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

• Video processing with WebCodecs
• WebCodecs examples