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 等编码格式（具体支持因浏览器而异），可用于将原始帧压缩为字节流。
关键步骤包括：
- 检查浏览器是否支持目标编码格式
- 配置编码器参数（分辨率、比特率、关键帧间隔等）
- 将 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 上的专业级多媒体应用打开了大门。
以上就是如何利用 Web Codecs API 在浏览器中直接处理视频帧的编码与解码？的详细内容，更多请关注php中文网其它相关文章！
广告
328
收藏
