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

1. 引言

项目要求在浏览器上支持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

  • 7
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 30
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 30
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值