webcodecs是编码和解码音视频的webAPI

概念和用法

许多 Web API 在内部都使用了媒体编码器。例如，Web Audio API，以及 WebRTC API。然而，这些 API 不允许开发者处理视频流的单个帧和未合成的编码音频块或视频块。

Web 开发者通常使用 WebAssembly 来绕过这一限制，并在浏览器中使用媒体编解码器。然而，这需要额外的带宽来下载浏览器中已经存在的编解码器，降低了性能和能效，并增加了额外的开发成本。

WebCodecs API 提供了对浏览器中已存在的编解码器的访问能力。它可以访问原始视频帧、音频数据块、图像解码器、音频和视频的编码器及解码器

接口

• AudioDecoder (en-US)

• 解码 EncodedAudioChunk (en-US) 对象。

• VideoDecoder (en-US)

• 解码 EncodedVideoChunk (en-US) 对象。

• AudioEncoder (en-US)

• 编码 AudioData (en-US) 对象。

• VideoEncoder (en-US)

• 编码 VideoFrame (en-US) 对象。

• EncodedAudioChunk (en-US)

• 表示特定于编解码器的编码音频字节。

• EncodedVideoChunk (en-US)

• 表示特定于编解码器的编码视频字节。

• AudioData (en-US)

• 表示未编码的音频数据。

• VideoFrame (en-US)

• 表示一帧未编码的视频数据。

• VideoColorSpace (en-US)

• 表示视频帧的颜色空间。

• ImageDecoder (en-US)

• 解包和解码图像数据，允许访问动画图像中的帧序列。

• ImageTrackList (en-US)

• 表示图像中可用的轨道列表。

• ImageTrack (en-US)

• 表示单个图像轨道。

示例

在下面这个例子中，获取从 MediaStreamTrackProcessor (en-US) 中返回的帧，然后对他们进行编码。在文章使用 WebCodec 处理视频查看完整示例并了解更多细节。

JSCopy to Clipboard

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

参考

• 使用 WebCodec 处理视频