VideoFrame

Baseline 2024 *

Newly available

Since September 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

VideoFrame はウェブコーデック API のインターフェイスで、動画のフレームを表します。

VideoFrame は移譲可能オブジェクトです。

解説

VideoFrame オブジェクトは様々な方法で作成したり、アクセスしたりすることができます。MediaStreamTrackProcessor はメディアトラックを個々のVideoFrame オブジェクトに分割します。

VideoFrame は画像のソースであり、他のキャンバスソース（SVGImageElement,HTMLVideoElement,HTMLCanvasElement,ImageBitmap,OffscreenCanvas,他のVideoFrame）を受け入れるコンストラクターがあります。これは、画像や動画要素からフレームを作成することができることを意味しています。

2 つ目のコンストラクターは、バイナリーピクセル表現の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();  }}