浏览器支持H.265解码总结

文章目录

1. 引言
2. 问题
3. 解决方案
   3.1 方案1：开发自己的浏览器
   3.2 方案2：前端JS解码+canvas显示
   3.3 方案3：前端WebAssembly转码+video显示
   3.4 方案4：前端WebAssembly解码+canvas显示
   3.5 总结
4. 相关资料
5. 参考资料
6. 引言
   项目要求在浏览器上支持H265视频，但即使当前最新的Chrome 85.0.4183.121版本也还不支持H265的解码。

那么，在浏览器上能不能解决H265的解码及显示呢？答案是肯定的。

2. 问题
   浏览器上支持H265，需要在浏览器上解决两个问题：

解码H265视频流
显示H265视频流
3. 解决方案
经过一番网络搜索和研究，大致有以下4种方案：

3.1 方案1：开发自己的浏览器
开发自己的浏览器

在底层实现支持H265解码
在 video 标签支持H265视频流的显示
目前公司已开发了自己的浏览器，基于Chrome 83进行开发，并增加了FFmpeg对HEVC的编解码，经测试能完美解决H265的编解码及显示。但由于存在版权风险，目前只能内部使用。

该方案可行，在测试机（i7-9700/32G）上播放16路的H265视频，整体比较流畅，但其它主流浏览器还是不支持H265，还需要研究不支持H265浏览器的解决方案。

3.2 方案2：前端JS解码+canvas显示
相关文档：Web端H.265播放器研发解密
https://blog.csdn.net/weixin_34379433/article/details/89535511

示例
https://sparkmorry.github.io/mse-learning/h265/
https://github.com/sparkmorry/mse-learning

该方案测试下来，JS解码相比较WebAssembly的解码方案，从性能来看会比较差，放弃。

3.3 方案3：前端WebAssembly转码+video显示
从ffmpegwasm上看到的一个转码示例，由于video标签不能播放H265的视频，所以先将H265视频转出H264，然后就可以通过video标签播放了

示例
https://github.com/ffmpegwasm/ffmpeg.wasm/blob/master/examples/browser/transcode.html

该方案测试下来，几秒的视频转码为H264需要近1分钟的时间，性能达不到要求，放弃。

3.4 方案4：前端WebAssembly解码+canvas显示
相关文档：Web端H.265播放器研发解密
https://blog.csdn.net/weixin_34379433/article/details/89535511

相关示例：H265播放器
（1）https://g.alicdn.com/videox/mp4-h265/1.0.2/index.html

（2）https://static-assets.cyt-rain.cn/h265/index.html

一个比较好的h265播放器
https://github.com/goldvideo/h265player

基于WASM的H265 Web播放器

文档 https://www.pianshen.com/article/3192218495/
源码 https://github.com/sonysuqin/WasmVideoPlayer
示例 https://roblin.cn/wasm/
该方案测试下来，该方案个人觉得是性能比较好的方案，在测试机（i7-9700/32G）上播放6路的H265视频，整体比较流畅。

3.5 总结
浏览器支持H265解码，初定方案：

支持H265的浏览器，如：科达浏览器，则直接使用浏览器自带的解码方案进行解码（硬解码或软解码），然后通过video标签显示出来；

不支持H265的浏览器，则采用WebAssembly技术，将FFmpeg编译为wasm，收到H265码流时，调用FFmpeg进行解码，然后通过canvas来显示视频画面；

4. 相关资料
   janus-gateway 关于AV1和H265的协商
   https://github.com/meetecho/janus-gateway/pull/2120

How to enable HEVC/H265 and AV1 in #webrtc in your browser
https://webrtcbydralex.com/index.php/2020/04/28/how-to-enable-hevc-h265-and-av1-in-webrtc-in-your-browser/

5. 参考资料
   Chromium媒体元素源码
   https://github.com/chromium/chromium/tree/master/media

WebAssembly
https://webassembly.org/

优秀的开源视音频处理框架FFmpeg
https://www.ffmpeg.org/
https://github.com/FFmpeg/FFmpeg
https://github.com/ffmpegwasm/ffmpeg.wasm

基于LLVM编译的WebAssembly打包工具集Emscripten
https://emscripten.org/index.html

基于WebAssembly的ogg播放器
https://github.com/brion/ogv.js

基于FFmpeg的简单播放器
https://github.com/leixiaohua1020/simplest_ffmpeg_player
from：https://blog.csdn.net/cgs1999/article/details/108847894