VideoFrame() コンストラクターは、動画のフレームを表すVideoFrame オブジェクトを生成します。

構文

new VideoFrame(image)new VideoFrame(image, options)new VideoFrame(data, options)

引数

最初の型のコンストラクター（上述）は、画像から新しいVideoFrame を作成します。引数は以下のとおりです。

image

新しいVideoFrame の画像データを格納する画像。SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap,OffscreenCanvas,他のVideoFrame のオブジェクトのいずれかになります。

options省略可

以下のものを含むオブジェクトです。

duration省略可

フレームの再生時間をマイクロ秒単位で表す整数。

timestamp

フレームのタイムスタンプをマイクロ秒単位で表す整数。

alpha省略可

アルファチャンネルを扱うときにユーザーエージェントがどのように振る舞うべきかを記述する文字列。既定値は "keep" です。

• "keep": ユーザーエージェントがアルファチャンネルデータを保存することを示します。
• "discard": ユーザーエージェントがアルファチャンネルを無視または除去すべきことを示します。

visibleRect省略可

VideoFrame の可視長方形を表すオブジェクトで、次のものを含みます。

x

X 座標。

y

Y 座標。

width

このフレームの幅。

height

このフレームの高さ。

displayWidth省略可

アスペクト比調整後に表示されるVideoFrame の幅。

displayHeight省略可

アスペクト比調整後に表示されるVideoFrame の高さ。

2 つ目のコンストラクター（上記参照）は、新しいVideoFrame をArrayBuffer から作成します。引数は以下の通りです。

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

VideoFrame が切り離して所有権を取るArrayBuffer の配列。配列にdata をバッキングするArrayBuffer が格納されている場合、VideoFrame はそのバッファーからコピーするのではなく、そのバッファーを直接使用します。

例

次の例はWebCodecs による動画処理の記事から引用しています。この最初の例では、キャンバスからVideoFrame を作成しています。

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

In the following example aVideoFrame is created from aTypedArray.

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

仕様書

ブラウザーの互換性