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

参考