CanvasCaptureMediaStreamTrack: requestFrame() メソッド

requestFrame()CanvasCaptureMediaStreamTrack インターフェイスのメソッドで、フレームをキャンバスから取り込んでストリームに送信することをリクエストします。

描画やフレームの取り込みのタイミングを慎重に制御する必要のあるアプリケーションは、フレームを取り込む時を直接指定するのに requestFrame() を使用することができます。

フレームの自動取り込みを避け、フレームが requestFrame() が呼ばれた時だけ取り込まれるようにするには、ストリームを生成する時に captureStream() メソッドに 0 の値を指定します。

構文

js
requestFrame()

返値

なし (undefined)。

使用上の注意

現在のところ、キャンバスのオリジンがクリーンでない場合に、例外が発生しないことを指摘する課題が仕様にあります。これは将来変更される可能性があるため、事前に計画を立てて SecurityError などの例外に注意するのが賢明でしょう(発生する可能性のある固有のエラーは仕様に記載されていませんが、これはその可能性があります)。

js
// 取り込むキャンバス要素を探す
const canvasElt = document.querySelector("canvas");

// ストリームを取得する
const stream = canvasElt.captureStream(25); // 25 FPS

// キャンバスの現在の状態をフレームとしてストリームに送信する
stream.getVideoTracks()[0].requestFrame();

仕様書

Specification
Media Capture from DOM Elements
# dom-canvascapturemediastreamtrack-requestframe

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
requestFrame

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

関連情報