VideoFrame
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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();
}
}
仕様書
Specification |
---|
WebCodecs # videoframe-interface |
ブラウザーの互換性
BCD tables only load in the browser