WebCodecs 编解码与帧管线：VideoDecoder/ImageDecoder 性能实践

背景与价值WebCodecs 直接使用底层平台编解码器，降低 JS 解码开销与延迟。适合直播/短视频播放、帧处理与缩略图生成等场景。图像解码与绘制（ImageDecoder）async function decodeImage(blob: Blob, canvas: HTMLCanvasElement) { const decoder = new (window as any).ImageDecoder({ data: blob, type: blob.type }); const { image } = await decoder.decode({ frameIndex: 0 }); const ctx = canvas.getContext('2d')!; ctx.drawImage(image, 0, 0); } 视频解码与渲染（VideoDecoder + WebCodecs）const decoder = new (window as any).VideoDecoder({ output: (frame: VideoFrame) => { // 将帧交给绘制管线（WebGL/WebGPU/Canvas） frame.close(); }, error: (e: any) => console.error(e) }); decoder.configure({ codec: 'vp09.00.10.08', hardwareAcceleration: 'prefer-hardware' }); function feedChunk(chunk: EncodedVideoChunk) { decoder.decode(chunk); } 回退策略不支持 WebCodecs：回退到 `<video>` 标签或 MSE（Media Source Extensions）。解码器选择失败：降级到更通用编码（H.264等），或使用软件解码。指标验证（Chrome 128/Edge 130）帧率：1080p 视频解码渲染稳定 ≥ 60fps（硬件加速）。解码延迟（P95）：单帧解码 ≤ 12ms；首帧显示 ≤ 180ms。CPU 占用：较纯 JS 解码降低 30%–55%。测试清单不同编码与分辨率：选择合适编码与加速策略，输出稳定。回退路径：不支持设备上 `<video>` 播放正常，MSE 无异常。应用场景在线播放、视频编辑预览、图像处理与缩略图生成、实时分析。