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