web端如何无插件解码播放H264/H265，网页和H5播放H264/H265

╰+攻爆jí腚メ 2023-10-14 07:00 58阅读 0赞

因为插件可以获得和桌面应用程序几乎一样的权限，安装完插件之后打开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传递过来只是一个数字，即使转成指针地址也取不到数组内容的数据。

我们来看一下最新一款网页播放器liveweb的视频播放效果:iveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。![762c94495d9d414da587cd93ce14764f.png][]  
Liveweb是好游科技自主开发的网页播放器，iveweb是可支持H.264/H.265视频播放的流媒体播放器，性能稳定、播放流畅，可支持的视频流格式有RTSP、RTMP、HLS、FLV、WebRTC等，具备较高的可用性。liveweb还拥有Windows、Android、iOS版本，其灵活的视频能力，极大满足了用户的多样化场景需求。

![65d3d8727e784e5a966962b980393596.png][]

[762c94495d9d414da587cd93ce14764f.png]: https://img-blog.csdnimg.cn/762c94495d9d414da587cd93ce14764f.png
[65d3d8727e784e5a966962b980393596.png]: https://img-blog.csdnimg.cn/65d3d8727e784e5a966962b980393596.png