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.flip 只读 实验性

返回 VideoFrame 是否水平翻转。

VideoFrame.rotation 只读 实验性

返回应用于 VideoFrame 的顺时针旋转角度（0、90、180 或 270 度）。任意数字（包括负数）将四舍五入到下一个四分之一转。

实例方法

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 示例