此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
WebCodecs API
WebCodecs API 为 web 开发者提供了对视频流的单个帧和音频数据块的底层访问能力。这对于那些需要完全控制媒体处理方式的 web 应用程序非常有用。例如，视频或音频编辑器，以及视频会议。
概念和用法
许多 Web API 在内部都使用了媒体编码器。例如，Web Audio API，以及WebRTC API。然而，这些 API 不允许开发者处理视频流的单个帧和未合成的编码音频块或视频块。
Web 开发者通常使用 WebAssembly 来绕过这一限制，并在浏览器中使用媒体编解码器。然而，这需要额外的带宽来下载浏览器中已经存在的编解码器，降低了性能和能效，并增加了额外的开发成本。
WebCodecs API 提供了对浏览器中已存在的编解码器的访问能力。它可以访问原始视频帧、音频数据块、图像解码器、音频和视频的编码器及解码器
接口
AudioDecoder解码
EncodedAudioChunk对象。VideoDecoder解码
EncodedVideoChunk对象。AudioEncoder编码
AudioData对象。VideoEncoder编码
VideoFrame对象。EncodedAudioChunk表示特定于编解码器的编码音频字节。
EncodedVideoChunk表示特定于编解码器的编码视频字节。
AudioData表示未编码的音频数据。
VideoFrame表示一帧未编码的视频数据。
VideoColorSpace表示视频帧的颜色空间。
ImageDecoder解包和解码图像数据，允许访问动画图像中的帧序列。
ImageTrackList表示图像中可用的轨道列表。
ImageTrack表示单个图像轨道。
示例
在下面这个例子中，获取从MediaStreamTrackProcessor 中返回的帧，然后对他们进行编码。在文章使用 WebCodec 处理视频查看完整示例并了解更多细节。
js
let frame_counter = 0;const track = stream.getVideoTracks()[0];const media_processor = new MediaStreamTrackProcessor(track);const reader = media_processor.readable.getReader();while (true) { const result = await reader.read(); if (result.done) break; let frame = result.value; if (encoder.encodeQueueSize > 2) { // Too many frames in flight, encoder is overwhelmed // let's drop this frame. frame.close(); } else { frame_counter++; const insert_keyframe = frame_counter % 150 === 0; encoder.encode(frame, { keyFrame: insert_keyframe }); frame.close(); }}