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上播放。

编译方法:

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

接口调用:

  1. 导入libffmpeg.js   (importScripts('libffmpeg.js');  libffmpeg.js会去加载libffmpeg.wasm)
  2. 接口封装:括号内的参数中,第一个number对应C函数的返回值,最后面的[]的成员对应C函数的参数;参数数据类型number可以对应C语言中的int或是指针等,大部分都是number;参数数据类型array是js中的数组,对应到C函数参数中也是指针,我使用的是unsigned char*;array与number不同的是,array传递到C函数中,可以通过这个指针地址取到传递过来的数组的数据。而number传递过来只是一个数字,即使转成指针地址也取不到数组内容的数据
发布了38 篇原创文章 · 获赞 2 · 访问量 1518

猜你喜欢

转载自blog.csdn.net/qq_34754747/article/details/104290430