H.265 网页播放方案：WebAssembly + FFmpeg 实现硬解软解兼容

前言：浏览器对 H.265 的'爱恨情仇'

为什么 <video src="video.h265.mp4"> 在 Chrome 里放不出来？因为 H.265 的专利池太深了。只有 Safari (即使是 iOS) 和 Edge (需硬件支持) 原生支持较好。

我们的目标是构建一套混合解码方案：

1. 优先硬解 (WebCodecs)：如果浏览器支持硬件加速（如 Chrome 94+ 的 WebCodecs），直接调用 GPU，性能起飞。
2. 降级软解 (Wasm + FFmpeg)：如果不支持，自动切换到 WebAssembly 版的 FFmpeg 进行 CPU 软解，利用 SIMD 指令集加速。

播放器架构图：

• 方案 A: 硬件解码 (GPU)
• 方案 B: 软件解码 (CPU/Wasm)
• 流程：视频流 -> 解封装 -> 检测 WebCodecs 支持 -> 硬解/软解 -> YUV420 数据 -> Canvas (WebGL)

---

一、编译 FFmpeg 为 WebAssembly

这是最困难的一步。我们需要使用 Emscripten 将 C 语言编写的 FFmpeg 编译成 .wasm 文件。

关键编译参数： 为了性能，必须开启 Multithreading (多线程) 和 SIMD (单指令多数据流)。

# Docker 环境下编译示例
emcc \
  -Llibavcodec -Llibavutil -Llibswscale \
  -I. \
  -o ffmpeg-decoder.js \
  src/decoder.c \
  -s WASM=1 \
  -s USE_PTHREADS=1 \
  -s PTHREAD_POOL_SIZE=4 \
  -s SIMD=1 \
  -s ALLOW_MEMORY_GROWTH=1 \
  -O3

*注意：src/decoder.c 是你需要编写的 C 语言胶水代码，用于暴露 FFmpeg 的 avcodec_send_packet 和 avcodec_receive_frame 接口给 JS 调用。

---

二、核心实现：Web Worker 中的解码循环

解码是 CPU 密集型任务，绝对不能放在主线程，否则页面会卡死。我们需要在 Web Worker 中运行 Wasm。

1. 初始化解码器 (Worker.js)

importScripts('ffmpeg-decoder.js');
let decoderModule;
let codecContext;

// 初始化 Wasm 模块
Module().then(module => {
  decoderModule = module;
  // 调用 C 导出的初始化函数
  codecContext = decoderModule._init_h265_decoder();
  postMessage({ type: 'ready' });
});

self.onmessage = () {
   { type, data } = e.;
   (type === ) {
    
    
     ptr = decoderModule.(data.);
    decoderModule..(data, ptr);
    
    
    
     ret = decoderModule.(codecContext, ptr, data.);
    
    
     (ret === ) {
      
      
       yuvData = ();
      ({ : , : yuvData }, [yuvData.]);
    }
    decoderModule.(ptr);
  }
};