浏览器支持情况

• 主流现代浏览器均不兼容H.265编码的视频播放
  • 硬解
  • 目前除了Edge新版本以插件方式支持，其他主流浏览器为了安全性考虑，均屏蔽了安装插件的方式

目前面临的主要问题

• H265播放CPU占用相对来说较高，其中一部分消耗在大量数据的传递；

• CPU比较高时有几率出现音/视频不同步。

• h265 测试流

  • https://gw.alicdn.com/bao/uploaded/LB1l2iXISzqK1RjSZFjXXblCFXa.mp4?file=LB1l2iXISzqK1RjSZFjXXblCFXa.mp4
  • https://sparkmorry.github.io/mse-learning/h265/hd_265.mp4

• libde265.js，它是一个通过 JS 来解码 H.265 视频的库，它通过将 视频的 frame data 转化为 rgba 像素，然后绘制到 Canvas 上，目前只能通过video标签播放mp4格式的视频，直播流尚不清楚，需进一步验证

  • https://zhuanlan.zhihu.com/p/50655841
  • https://events.jackpu.com/h265/

解决方案

• 方案1：前端WebAssembly解码+canvas显示

  • https://www.cnblogs.com/lidabo/p/14763192.html
  • 相关文档：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视频，整体比较流畅。

• 方案2：前端WebAssembly解码+canvas显示（兼容h264）

  • https://blog.csdn.net/xiejiashu/article/details/108000718
  • https://github.com/tsingsee/EasyPlayer.js
  • http://www.easydarwin.org/easyplayer/

总结

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

• 相关资料

  • 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/

• 参考资料

  • 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

浏览器兼容性

• 主要用到了WebAssembly及WebWorker的支持，实际测试中主流浏览器Chrome、Safari、Firefox、Edge均能通过兼容性测试。 ===> 需进一步验证

• https://blog.csdn.net/weixin_34379433/article/details/89535511

• https://g.alicdn.com/videox/mp4-h265/1.0.2/index.html

h265视频下载

• https://www.ebaina.com/ask/100000005574

最终结论

• 方案1:

  • 测试demo http://192.168.18.235:9069/h265player/demo/demo.html
  • 1、h265的数据流
    • 1.1、主流浏览器，Chrome、Firefox、Safari浏览器均能正常播放
    • 1.2、手机苹果、安卓均能正常播放
  • 2、h264数据流均不能正常播放
  • 3、h265 解码过程：通过WebAssembly技术，将FFmpeg编译为wasm，收到H265码流时，调用FFmpeg进行解码，然后通过canvas来显示视频画面；整个过程cpu占用率过高，需考虑实际应用场景

• 方案2:

  • 测试demo http://192.168.18.235:9069/easyplayer/demo/html/index.html
  • 1、h265的数据流
    • 1.1、主流浏览器，Chrome、Firefox 均能正常播放，Safari不能
    • 1.2、手机苹果、安卓微信、企业微信打开都是大黑屏状态
    • 1.3、拖拽过程中会存在抖动现象
  • 2、h264的直播流
    • 2.1、主流浏览器，Chrome、Firefox、Safari浏览器均能正常播放
    • 2.2、手机苹果、安卓均能正常播放