H.265 软解选型实录：CCPlayer 为什么用 WASM + Canvas，而不是 WebCodecs

在线演示：https://player.ccnvr.com

源码仓库：https://github.com/ccnvr/ccplayer

H265

H.265 在安防、教育、广电这几个圈子里基本已经是默认编码。摄像头出厂就是 H.265，同画质下码率比 H.264 省将近一半。

方案选择

1、MSE 硬解

最优方案，使用浏览器默认支持（Media Source Extensions）,目前Chrome支持h265。这种方案会调用系统GPU硬件。效果，性能最优。

2、WebCodecs

新方案，使用 VideoDecoder

把系统 / 浏览器已有的解码能力封装成可调用的 API。底层实际干活的是操作系统的解码模块：

• Windows → DXVA（硬解，取决于有没有装对应扩展）
• Linux → VAAPI / VDPAU
• macOS → VideoToolbox

decode 进去的是压缩流，出来的是能画的原始帧，中间那步不在 JS 里

缺点是强制 HTTPS

3、WASM + Canvas

兼容最佳方案

WebAssembly 本身不受 secure context 限制。HTTP 页面照样可以 fetch 一个 .wasm、编译、执行。这是我们最终选它的直接原因，没有更复杂的理由。

画面则画在一块覆盖在 video 上方的 canvas 上。video 只负责出声和走时间，画面由 canvas 出。

CCPlayer

CCPlayer 集成了 ws-flv、http-flv、mp4、hls 的软解能力，统一天下解决h265播放问题。应该是市面上兼容性最强的播放了。并且CCPlayer 完全免费

这是使用方法，非常简单：

import Player from 'ccplayer'
import 'ccplayer-flv'
import 'ccplayer-soft-decode' // import 即注册，之后 softDecode 默认为 'auto'

new Player({
  id: 'mse',
  url: 'http://192.168.1.10:8080/live/stream.flv',
  isLive: true,
  softDecode: 'auto',
  softDecodeOptions: {
    wasmBaseUrl: '/wasm', // 内网自托管，指向包含 decode/ 的那一层
    openLog: true
  },
  onSoftDecodeFallback (info) {
    console.log('已回退软解', info.reason)
  }
})

基于西瓜播放器（xgplayer）二次封装。 API 完全一致，ui完全一致。无感切换。比jessibuca和easyplayer 更加稳定可靠。api更简洁。

这里真的要吐槽一下 easyplayer和jessibuca。easyplayer API 文档乱七八糟非常不完善，还有公司logo，没人维护，样式还丑。jessibuca 收费，支持直播。免费版软解只支持到720p，api太多，太乱，都不知道怎么配置。