如何利用 Web Codecs API 在浏览器中直接处理视频帧的编码与解码？

Web Codecs API 提供对音视频编解码的底层控制，支持逐帧处理，适用于实时滤镜、录制、推流等场景。1. 可通过 capturestream() 和 MediaStreamTrackProcessor 获取 canvas 或 video 的 VideoFrame；2. 使用 VideoEncoder 配置编码参数并输入 VideoFrame 得到 EncodedVideoChunk；3. 使用 VideoDecoder 将 EncodedVideoChunk 解码为 VideoFrame 用于渲染或再处理；4. 典型应用包括浏览器内剪辑、低延迟直播、格式转换与 WebAssembly 结合的 ai 分析，需注意资源释放、队列控制及浏览器兼容性，目前主要在 chrome 和 edge 支持。

Web Codecs API 让开发者能在浏览器中直接访问音视频的底层编码与解码过程，特别适合需要逐帧处理视频的应用场景，比如实时滤镜、视频录制、流媒体推流或 WebAssembly 视频处理管道。它提供了对视频帧（VideoFrame）、编码器（VideoEncoder）和解码器（VideoDecoder）的精细控制。

1. 获取并处理原始视频帧

要处理视频帧，首先需要从摄像头、canvas 或 video 元素中捕获图像数据。

使用 captureStream() 方法可以从 canvas 或 video 获取媒体流，然后通过 MediaStreamTrackProcessor 将其转换为可读的帧流：

• 创建一个 canvas 并绘制内容，或使用现有 video 元素
• 调用 captureStream() 获取 MediaStream
• 使用 MediaStreamTrackProcessor 创建 ReadableStream 来逐帧读取

const canvas = document.getElementById(‘myCanvas’); const stream = canvas.captureStream(30); // 30fps const trackProcessor = new MediaStreamTrackProcessor({ track: stream.getVideoTracks()[0] }); const reader = trackProcessor.readable.getReader(); // 持续读取视频帧 async function readFrames() { while (true) { const { done, value } = await reader.read(); // value 是 VideoFrame if (done) break; console.log(‘接收到帧:’, value.timestamp); // 可在此将帧送入编码器或进行处理 value.close(); // 注意：必须手动释放帧资源 } } readFrames();

2. 使用 VideoEncoder 编码视频帧

VideoEncoder 支持 H.264、VP8、VP9 等编码格式（具体支持因浏览器而异），可用于将原始帧压缩为字节流。

关键步骤包括：

文心快码

文心快码（Comate）是百度推出的一款AI辅助编程工具

35

查看详情

• 检查浏览器是否支持目标编码格式
• 配置编码器参数（分辨率、比特率、关键帧间隔等）
• 将 VideoFrame 输入编码器
• 从输出队列获取编码后的 EncodedVideoChunk

const config = { codec: ‘vp8’, width: 640, height: 480, bitrate: 1_000_000, framerate: 30 }; const init = { output: (chunk, metadata) => { // chunk 是 EncodedVideoChunk，可存储或发送 const buffer = chunk.copyTo(new ArrayBuffer(chunk.byteLength)); console.log(‘编码输出:’, chunk.timestamp, chunk.type); // ‘key’ 或 ‘delta’ if (metadata.decoderConfig) { console.log(‘SPS/PPS:’, metadata.decoderConfig); } }, Error: e => console.error(e) }; const encoder = new VideoEncoder(init); encoder.configure(config); // 编码一帧（例如来自 canvas 的帧） async function encodeFrame(videoFrame) { if (encoder.encodeQueueSize > 2) { console.warn(‘编码队列积压’); return; } encoder.encode(videoFrame); videoFrame.close(); // 释放输入帧 }

3. 使用 VideoDecoder 解码视频数据

如果你有编码后的视频数据（如从网络接收的 VP8 字节流），可以用 VideoDecoder 将其还原为 VideoFrame。

典型流程：

• 配置解码器，指定编码格式和初始 SPS/PPS（如果已知）
• 将 EncodedVideoChunk 输入解码器
• 在 output 回调中接收解码后的 VideoFrame

const decoderConfig = { codec: ‘vp8’ }; const decoderInit = { output: decodedFrame => { console.log(‘解码出帧:’, decodedFrame.timestamp); // 可将帧渲染到 canvas 或重新编码 renderFrame(decodedFrame); // 自定义渲染函数 decodedFrame.close(); // 释放帧 }, error: e => console.error(‘解码错误:’, e) }; const decoder = new VideoDecoder(decoderInit); decoder.configure(decoderConfig); // 输入编码块 function decodeChunk(encodedBytes, timestamp, isKeyFrame) { const chunk = new EncodedVideoChunk({ type: isKeyFrame ? ‘key’ : ‘delta’, timestamp, data: encodedBytes }); decoder.decode(chunk); }

4. 实际应用场景与注意事项

Web Codecs 适用于：

• 浏览器内视频剪辑（添加滤镜后重新编码）
• 低延迟直播推流（配合 WebTransport 或 websocket）
• 从 MJPEG 或 H.265 流转封装为浏览器可播放格式
• 结合 WebAssembly 进行 AI 视频分析（如人体检测）后再编码

需要注意：

• 必须手动调用 close() 释放 VideoFrame 和编码器/解码器资源
• 编码/解码是异步操作，需控制输入队列大小避免阻塞
• 不同浏览器对编码格式的支持差异较大，建议运行时检测 VideoEncoder.isConfigsupported()
• 目前 safari 对 Web Codecs 支持有限，主要在 Chrome 和 Edge 中可用

基本上就这些。Web Codecs 提供了接近原生性能的视频处理能力，虽然使用稍复杂，但为 Web 上的专业级多媒体应用打开了大门。