视频帧：VideoFrame() 构造函数

第一种构造函数类型（参见上文）从图像创建一个新的 VideoFrame。其参数为

image

包含新 VideoFrame 图像数据的图像。它可以是以下对象之一：SVGImageElement、HTMLVideoElement、HTMLCanvasElement、ImageBitmap、OffscreenCanvas 或另一个 VideoFrame。

options 可选

包含以下内容的对象

duration 可选

表示帧持续时间的整数（以微秒为单位）。

timestamp

表示帧时间戳的整数（以微秒为单位）。

alpha 可选

一个字符串，描述用户代理在处理 alpha 通道时应如何操作。默认值为“keep”。

• "keep"：表示用户代理应保留 alpha 通道数据。
• "discard"：表示用户代理应忽略或删除 alpha 通道数据。

visibleRect 可选

表示 VideoFrame 可见矩形、包含以下内容的对象

x

x 坐标。

y

y 坐标。

width

帧宽度。

height

帧高度。

displayWidth 可选

在应用纵横比调整后显示的 VideoFrame 的宽度。

displayHeight 可选

在应用纵横比调整后显示的 VideoFrame 的高度。

第二种构造函数类型（参见上文）从 ArrayBuffer 创建一个新的 VideoFrame。其参数为

data

包含新 VideoFrame 数据的 ArrayBuffer、TypedArray 或 DataView。

options

包含以下内容的对象

format

表示视频像素格式的字符串。以下字符串之一，在 format 属性页面上进行了详细描述

• "I420"
• "I420A"
• "I422"
• "I444"
• "NV12"
• "RGBA"
• "RGBX"
• "BGRA"
• "BGRX"

codedWidth

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

codedHeight

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

timestamp

表示帧时间戳的整数（以微秒为单位）。

duration 可选

表示帧持续时间的整数（以微秒为单位）。

layout 可选

包含以下值的列表，用于 VideoFrame 中的每个平面

offset

表示给定平面开始位置的字节偏移量（以字节为单位）。

stride

表示平面每行使用的字节数（包括填充）。平面可能不重叠。如果未指定 layout，则平面将紧密排列。

visibleRect 可选

表示 VideoFrame 可见矩形、包含以下内容的对象

x

x 坐标。

y

y 坐标。

width

帧宽度。

height

帧高度。

displayWidth 可选

在应用纵横比调整后显示的 VideoFrame 的宽度。

displayHeight 可选

在应用纵横比调整后显示的 VideoFrame 的高度。

colorSpace

表示 VideoFrame 色彩空间的对象，包含以下内容

primaries

表示视频色彩原色的字符串，在 VideoColorSpace.primaries 属性页面上进行了描述。

transfer

表示视频色彩传递函数的字符串，在 VideoColorSpace.transfer 属性页面上进行了描述。

matrix

表示视频色彩矩阵的字符串，在 VideoColorSpace.matrix 属性页面上进行了描述。

fullRange

布尔值。如果为 true，则表示使用全范围色彩值。

transfer

ArrayBuffer 的数组，VideoFrame 将分离并拥有这些数组。如果数组包含支持 data 的 ArrayBuffer，则 VideoFrame 将直接使用该缓冲区，而不是从该缓冲区复制。

以下示例来自文章 使用 WebCodecs 进行视频处理。在第一个示例中，从画布创建了 VideoFrame。

const cnv = document.createElement("canvas");
// draw something on the canvas
// ...
let frame_from_canvas = new VideoFrame(cnv, { timestamp: 0 });

在以下示例中，从 TypedArray 创建了 VideoFrame。

const pixelSize = 4;
let init = {
  timestamp: 0,
  codedWidth: 320,
  codedHeight: 200,
  format: "RGBA",
};
let data = new Uint8Array(init.codedWidth * init.codedHeight * pixelSize);
for (let x = 0; x < init.codedWidth; x++) {
  for (let y = 0; y < init.codedHeight; y++) {
    let offset = (y * init.codedWidth + x) * pixelSize;
    data[offset] = 0x7f; // Red
    data[offset + 1] = 0xff; // Green
    data[offset + 2] = 0xd4; // Blue
    data[offset + 3] = 0x0ff; // Alpha
  }
}
init.transfer = [data.buffer];
let frame = new VideoFrame(data, init);