WebCodecs API
注意：此功能在 专用 Web Workers 中可用。
WebCodecs API 为 Web 开发者提供了对视频流的单个帧以及音频块的底层访问。它对于需要完全控制媒体处理方式的 Web 应用程序非常有用。例如，视频或音频编辑器，以及视频会议。
概念与用法
许多 Web API 在内部使用媒体编解码器。例如，Web Audio API 和 WebRTC API。但是，这些 API 不允许开发者处理视频流的单个帧以及未混合的编码音频或视频块。
Web 开发者通常使用 WebAssembly 来绕过此限制，并在浏览器中处理媒体编解码器。但是，这需要额外的带宽来下载浏览器中已存在的编解码器，从而降低性能和功耗效率，并增加额外的开发开销。
WebCodecs API 提供了对浏览器中已有的编解码器的访问。它允许访问原始视频帧、音频数据块、图像解码器、音频和视频编码器及解码器。
处理模型
WebCodecs API 使用异步 处理模型。每个编码器或解码器实例都维护一个内部的、独立的处理队列。在队列化大量工作时，牢记此模型很重要。
名为 configure()、encode()、decode() 和 flush() 的方法通过将控制消息追加到队列末尾来异步操作，而名为 reset() 和 close() 的方法则同步中止所有待处理的工作并清除处理队列。在调用 reset() 后，可以在调用 configure() 后继续队列化更多工作，但 close() 是一个永久性操作。
名为 flush() 的方法可用于等待调用 flush() 时所有待处理的工作完成。但是，通常只应在队列化完所有期望的工作后调用它。它无意于以固定的时间间隔强制进度。不必要地调用它会影响编码器质量，并导致解码器要求下一个输入是关键帧。
解复用
目前没有用于解复用媒体容器的 API。处理容器化媒体的开发者需要自己实现或使用第三方库。例如，可以使用 MP4Box.js 或 jswebm 分别将音频和视频数据解复用到 EncodedAudioChunk 和 EncodedVideoChunk 对象。
接口
AudioDecoder-
解码
EncodedAudioChunk对象。 VideoDecoder-
解码
EncodedVideoChunk对象。 AudioEncoder-
编码
AudioData对象。 VideoEncoder-
编码
VideoFrame对象。 EncodedAudioChunk-
表示特定于编解码器的编码音频字节。
EncodedVideoChunk-
表示特定于编解码器的编码视频字节。
AudioData-
表示未编码的音频数据。
VideoFrame-
表示未编码视频数据的帧。
VideoColorSpace-
表示视频帧的颜色空间。
ImageDecoder-
解包和解码图像数据，从而可以访问动画图像中的帧序列。
ImageTrackList-
表示图像中可用轨道的列表。
ImageTrack-
表示单个图像轨道。
示例
在以下示例中，帧从 MediaStreamTrackProcessor 返回，然后进行编码。请参阅完整示例，并在文章 使用 WebCodecs 进行视频处理 中了解更多信息。
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();
}
}