VideoFrame

可以通过多种方式创建或访问 VideoFrame 对象。 MediaStreamTrackProcessor 将媒体轨道分解为单独的 VideoFrame 对象。

VideoFrame 是一个图像源，并有一个构造函数可以接受任何其他画布源（SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或其他 VideoFrame）。这意味着可以从图像或视频元素创建帧。

第二个构造函数允许从其在 ArrayBuffer、TypedArray 或 DataView 中的二进制像素表示创建 VideoFrame。

然后可以将创建的帧转换为媒体轨道，例如使用 MediaStreamTrackGenerator 接口从帧流创建媒体轨道。

VideoFrame()

创建一个新的 VideoFrame 对象。

VideoFrame.format 只读

返回 VideoFrame 的像素格式。

VideoFrame.codedWidth 只读

返回 VideoFrame 的宽度（以像素为单位），可能包括不可见的填充，并在考虑潜在的比例调整之前。

VideoFrame.codedHeight 只读

返回 VideoFrame 的高度（以像素为单位），可能包括不可见的填充，并在考虑潜在的比例调整之前。

VideoFrame.codedRect 只读

返回一个 DOMRectReadOnly，其宽度和高度与 codedWidth 和 codedHeight 相匹配。

VideoFrame.visibleRect 只读

返回一个 DOMRectReadOnly，描述此 VideoFrame 的可见像素矩形。

VideoFrame.displayWidth 只读

应用纵横比调整后，返回显示的 VideoFrame 的宽度。

VideoFrame.displayHeight 只读

应用纵横比调整后，返回显示的 VideoFrame 的高度。

VideoFrame.duration 只读

返回一个整数，表示视频时长（以微秒为单位）。

VideoFrame.timestamp 只读

返回一个整数，表示视频时间戳（以微秒为单位）。

VideoFrame.colorSpace 只读

返回一个 VideoColorSpace 对象。

VideoFrame.allocationSize()

返回保存 VideoFrame 所需的字节数，这些字节数由传递到方法中的选项过滤。

VideoFrame.copyTo()

将 VideoFrame 的内容复制到 ArrayBuffer 中。

VideoFrame.clone()

创建一个新的 VideoFrame 对象，该对象引用与原始对象相同的媒体资源。

VideoFrame.close()

清除所有状态并释放对媒体资源的引用。

在以下示例中，帧从 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();
  }
}

• 使用 WebCodecs 进行视频处理
• WebCodecs 示例