网页端视频播放器的设计实现总结
- 环境配置
1.了解Emscripten和WebAssembly技术，提供Emscripten编译环境（Emscripten安装地址），在cmd中查看emcc是否可用验证环境是否创建成功。
2.搭建本地服务器，首先我们要到Node.js官网下载对应版本的安装包（Node.js下载地址）；接着就是安装，和安装普通软件类似，直接下一步下一步就可以了；之后我们来验证node是否安装成功，Win+R输入cmd来调出控制台并输入node -v和npm -v来查看node版本和npm（包管理工具）版本；最后执行如下命令便可以完成本地服务器的搭建。
npm install -g serve
serve .
注意：在本地直接点击html文件是以文件方式打开会报错，必须使用http协议的方式打开；同时必须保证浏览器支持webassembly。
二.文件的读取以及主线程与web worker之间数据的传递
1.C/C++代码和web worker都不支持对文件的打开、读写，只能以HTML5的方法对文件进行操作，推荐使用FileReader对象。
2.worker.js必须存放在服务器中才能加载执行。
3.以定时器的方式分段读取文件，代替传统的while循环方式，解决主线程阻塞的问题，使用setInterval方法
4.javaScript中主线程和worker之间的数据传递方式？
主线程中的worker对象通过postMessage向indexedDB数据库发送数据，当indexedDB数据库接收到客户端发送的数据
首先把数据的键值储存并记录到indexedDB数据库表里面，其实相当于把数据保存到一张结构完整的表内。接着，indexedDB
数据库会把接收到的数据值扔给worker的onmessage进行处理。
三.javaScript对内存的操作以及与C/C++接口数据的传递
ArrayBuffer对象、TypedArray视图和DataView视图是 JavaScript 操作二进制数据的接口。该接口设计之初的目的是为了满足 JavaScript
与显卡之间大量的、实时的数据交换，它们之间的数据通信必须是二进制的，而不能是传统的文本格式。现web worker与底层C/C++接口的二进制数据传递。
二进制数组由三类对象组成。
（1）ArrayBuffer对象：代表内存之中的一段二进制数据，可以通过“视图”进行操作。“视图”部署了数组接口，这意味着，可以用数组的方法操作内存。
（2）TypedArray视图：共包括 9 种类型的视图，比如Uint8Array（无符号 8 位整数）数组视图, Int16Array（16 位整数）数组视图, Float32Array（32 位浮点数）数组视图等等。
（3）DataView视图：可以自定义复合格式的视图，比如第一个字节是 Uint8（无符号 8 位整数）、第二、三个字节是 Int16（16 位整数）、第四个字节开始是 Float32（32 位浮点数）等等，此外还可以自定义字节序。
基本类型指针传递：
你可以使用getValue(ptr,type)和setValue(ptr,value,type)访问内存。第一个参数ptr是一个指针(代表一个内存地址的数字)。类型type必须为LLVM IR类型，i8、i16、i32、i64、float、double或类似i8 (或只有 )的指针类型。
C/C++中的二进制数据传递到js中：
方式一：(通过返回值获取)
var iyuv_size = iWidth*iHeight*3/2;
var pYUV = Module._GetBuffer();//获取C/C++层二进制数据的地址
var buf = new ArrayBuffer(iyuv_size);//通过二进制对象分配一块连续内存
var ayuv_data = new Uint8Array(buf);//二进制对象绑定到视图，通过视图对内存进行读写操作
ayuv_data.set(Module.HEAPU8.subarray(pYUV,pYUV+iyuv_size));//c/c++中的内存拷贝到刚分配的js内存中
方式二：（通过参数获取）
var iyuv_size = iWidth*iHeight*3/2;
var yuvData = Module._malloc(iyuv_size);//传递地址时才需要malloc,malloc之后获得的是指向地址的指针
var yuvLen = Module._malloc(4);
Module.setValue(yuvLen,iyuv_size,”i32”);//可以设置长度初始值，注意这里的yuvLen是一个地址指针传递，而不是值传递
var res = Module._GetBuffer(yuvData,yuvLen);//第二个参数传递的是指针，目的是从C++层获得yuv的长度，因此要malloc
var nJLen = Module.getValue(yuvLen,”i32”);
var pJData = new Uint8Array(nJLen);
pJData.set(Module.HEAPU8.subarray(yuvData,yuvData+yuvLen));//二进制数据需要绑定视图才可以操作内存
js中的数据传递到C/C++中：
方式一：
var iLen = data.len;
var pBuffer = Module._malloc(iLen)//通过emscripten分配C/C++中的堆内存
var Data = Module.HEAPU8.subarray(pBuffer, pBuffer + iLen);//堆内存绑定到视图对象
Data.set(new Uint8Array(data.buf));//数据写入到emscripten分配的内存中去
InputData(pBuffer,iLen);
方式二：
var iLen = data.len;
var pBuffer = Module._malloc(iLen);
Module.writeArrayToMemory(new Uint8Array(data.buf),pBuffer);//js中的数据拷贝到刚分配的C++缓存中；
InputData(pBuffer,iLen);
Js和C++之间的结构体传递：
https://blog.csdn.net/pkx1993/article/details/82015315
四.Emscripten编译C/C++到js和wasm文件
1.Emscripten编译优化分为两个步骤：
（1）每个源文件编译成目标文件（.bc文件），通过LLVM优化
（2）目标文件编译成js文件
2.emscripten正确的优化方式：
./emcc -O2 a.cpp -o a.bc//编译成bitcode
./emcc -O2 b.cpp -o b.bc//编译成bitcode
./emcc -O2 a.bc b.bc -o project.js//把bitcode编译成js
注意：各个步骤的优化级别必须设置为一样
3.Js使用库的两种方式：
（1）多个bitcode直接变成js
emcc project.bc libstuff.bc -o final.js
（2）多个bitcode先编译成一个，然后在变成js
emcc project.bc libstuff.bc -o allproject.bc
emcc allproject.bc -o final.js
4.编译过程中遇到的问题及解决方案：
（1）emcc方式编译js文件时，提示C文件调用cpp文件找不到函数时，尝试使用em++方式进行编译
（2） 编译的C/C++文件中的函数不能和平台相关，并且不支持多线程
（3）bind/emscripten.h只对C++文件有效，如果C文件中引入该头文件进行接口的绑定会报错
五．Js文件的导入
1.html中导入js文件
<script src="play.js"></script>
2.web worker中导入js文件
importScripts('decode.js');
Module.postRun.push(function () {
postMessage({'function': "loaded"});
});
//它是以阻塞方法加载js的，只有所有文件加载完成之后，接下来的脚本才能继续执行
3.js包中导入js文件
异步方式：
var _script = document.createElement("script");
_script.type = "text/javascript";
_script.src = "SuperRender.js";
document.getElementsByTagName("head")[0].appendChild(_script);
_script.onload = function(){
console.log("SuperRender.js load sucess");
}
该加载方式是异步加载的，注意要等到js文件加载完，才能调用其中的类或方法，否则会出错。
同步方式：
加载类：import {文件名（不加后缀）} from “类名（加路径）”;
加载非类：import from 文件名；
视频丢帧和花屏问题
1.利用ffmpeg解码得到一帧数据后，需要将数据保存到缓存buffer中，等到送入到解码库中的数据全都处理完，再返回给上层。
2.解码后的YUV数据时由三个分量分开存储的，在送入渲染库webGL之前，需要将yuv三个分量的数据拼接成一块连续的数据再送入到渲染库中进行渲染。