web无插件解码播放H264/H265

因为插件可以获得和桌面应用程序几乎一样的权限，安装完插件之后打开web时，web代码可以调用插件肆意的读写电脑本地数据。
这几年微软、谷歌、苹果、Mozilla等各大浏览器厂商也意识到了浏览器插件的安全问题，开始在新发布的浏览器中限制第三方插件的使用。

解码器选择：

1. js解码HTML5播放

项目描述：

大概流程：利用websocket传输未解码数据，送入ffmpeg库解码，回调至上层利用canvas出图。

视频传输：使用websocket协议；
ipc后端推流：使用C语言编程；
web前端收流：使用js语言；(如何收流，拆流，解析，送数据)
web的视频解码库：使用js语言，通过emscripten工具把C语言解码库代码编译成js；
解码后的YUV数据：转换为RGB后推到HTML5的canvas播放。

由于找不到合适的开源js解码器代码，所以选用C语言的解码器，通过emscripten工具把C语言解码库编译成js库。

emscripten安装：

这个工具的安装非常麻烦，过程会报很多错误，需要预先安装很多软件，需要一定耐心。没关系，根据报错提示一个个排除，最后就可以成功的。emscripten安装成功后，生成交叉编译器emcc，即可编译静态库。

libffmpeg.js的编译->编译ffmpeg.js+ffmpeg.wasm库->js调用ffmpeg.js中的函数(使用Moduole.cwrap，将API导出，让C语言中的函数可以在JS中调用，此时FFMpegContextCreate 等均可在js文件中调用，上面讲到websocket接收到未解码数据后，触发onmessage函数，connect_http_read，调用Decode，数据解码后，返回解码数据，回调到上传出图。)->canvas出图(imgData即为解码后的rgb数据，将数据传到canvas显示即为一帧图像)。

测试效果：

使用最新的Firefox浏览器
解码H264的1080P分辨率时，延时可以控制在几百毫秒以内，测试的最大分辨率是2592X1944，也比较实时。
解码H265的1080P分辨率时，比较负荷比较大，会有卡顿现象。

2.WebAssembly解码HTML5播放

项目描述：

视频传输：使用websocket协议；
ipc后端推流：使用C语言编程；
web前端收流：使用js语言。
视频解码库：使用WebAssembly实现，js把取到的媒体数据通过封装好的接口传递给WebAssembly解码。
视频播放使用HTML5的canvas播放：js获取到WebAssembly解码后的YUV数据，转换为RGB后在canvas上播放。

编译方法：

编译ffmpeg生成静态库
编译静态库生成libffmpeg.wasm和libffmpeg.js
在js中调用API(编辑脚本涉及的API需要在C语言中进行函数的声明)

接口调用：

导入libffmpeg.js (importScripts('libffmpeg.js'); libffmpeg.js会去加载libffmpeg.wasm)
接口封装：括号内的参数中，第一个number对应C函数的返回值，最后面的[]的成员对应C函数的参数；参数数据类型number可以对应C语言中的int或是指针等，大部分都是number；参数数据类型array是js中的数组，对应到C函数参数中也是指针，我使用的是unsigned char*；array与number不同的是，array传递到C函数中，可以通过这个指针地址取到传递过来的数组的数据。而number传递过来只是一个数字，即使转成指针地址也取不到数组内容的数据