WebCodecs API

注意： 此功能在 专用 Web 工作线程 中可用。

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 进行视频处理 中了解更多信息。

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();
  }
}

另请参阅