"WebCodecs 实战：视频解码编码与帧管线优化"

概述WebCodecs 提供直接访问媒体编解码器的接口（如 `VideoDecoder`/`VideoEncoder`），用于低延迟渲染与高性能管线。它不负责容器/复用/传输层，需要结合 MSE/WebRTC 或自定义复用器。合理的帧生命周期管理与硬件加速偏好至关重要。解码示例：VideoDecoder 输出到 OffscreenCanvasconst canvas = new OffscreenCanvas(1280, 720) const ctx = canvas.getContext('2d') const decoder = new VideoDecoder({ output: frame => { // 将解码帧绘制到画布，并及时释放资源 const bitmap = frame.clone() ctx.drawImage(bitmap, 0, 0) frame.close() bitmap.close() }, error: e => console.error(e) }) decoder.configure({ codec: 'vp09.00.10.08', hardwareAcceleration: 'prefer-hardware' }) // 提供编码帧数据（示意）；真实场景需从网络分片组装为 chunks const chunk = new EncodedVideoChunk({ type: 'key', timestamp: 0, data: someBuffer }) decoder.decode(chunk) 编码示例：VideoEncoder 基本使用const encoder = new VideoEncoder({ output: chunk => { // 将编码数据送往网络/存储；真实场景需复用到容器（如 MP4/WEBM） sendEncodedChunk(chunk) }, error: e => console.error(e) }) encoder.configure({ codec: 'avc1.42001E', width: 1280, height: 720, bitrate: 2_000_000, framerate: 30, hardwareAcceleration: 'prefer-hardware' }) // 将渲染帧编码（示意） const frame = new VideoFrame(canvas, { timestamp: performance.now() }) encoder.encode(frame) frame.close() 工程建议生命周期：`VideoFrame`/`ImageBitmap` 使用后立即 `close()`；避免无界内存增长。硬件加速：配置 `hardwareAcceleration`（`prefer-hardware`/`deny`），根据平台能力与功耗进行权衡。与 MSE/WebRTC 的协作：MSE：适合点播/直播的拉流播放；编码侧需容器复用。WebRTC：适合实时互动与低延迟；结合 `RTCRtpSender`/`getStats` 调整码率与分辨率。兼容与回退：对不支持的浏览器回退到 `HTMLVideoElement` + MSE；检测 API 可用性后再初始化。参考与验证MDN WebCodecs 指南：https://developer.mozilla.org/docs/Web/API/WebCodecs_APIWICG WebCodecs 规范草案：https://wicg.github.io/webcodecs/web.dev WebCodecs 文章：https://web.dev/articles/webcodecsChrome 媒体相关文档：https://developer.chrome.com/docs/web-platform/webcodecs/