VideoFrame: VideoFrame() コンストラクター
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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
の可視長方形を表すオブジェクトで、次のものを含みます。 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
内の各プレーンについて、以下の値を格納したリスト。 visibleRect
省略可-
VideoFrame` の可視長方形を表すオブジェクトで、以下のものを含みます。
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 a VideoFrame
is created from a TypedArray
.
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);
仕様書
Specification |
---|
WebCodecs # dom-videoframe-videoframe |
ブラウザーの互換性
BCD tables only load in the browser