HTMLCanvasElement: captureStream() メソッド
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.
captureStream() は HTMLCanvasElement インターフェイスのメソッドで、MediaStream を返します。これは CanvasCaptureMediaStreamTrack を含んでおり、このキャンバスの内容をリアルタイムに動画キャプチャします。
構文
js
captureStream()
captureStream(frameRate)
引数
frameRate省略可-
各フレームのキャプチャレートを示す倍精度浮動小数点値です。設定されていない場合、キャンバスが変化するたびに新しいフレームがキャプチャされます。
0に設定すると、フレームは自動的にキャプチャされません。代わりに、返されたトラックのrequestFrame()メソッドが呼び出されたときにのみ、キャプチャされます。
返値
MediaStream オブジェクトへの参照です。その中に
CanvasCaptureMediaStreamTrack が 1 つあります。
例外
NotSupportedErrorDOMException-
frameRateが負の値であった場合に発生します。 SecurityErrorDOMException-
ビットマップのオリジンがクリーンではありません。 そのコンテンツの少なくとも一部が、文書そのものが読み込まれたサイトとは別のサイトから読み込まれたものであるか、その可能性があります。
例
js
// キャプチャしたい canvas 要素を取得
const canvasElt = document.querySelector("canvas");
// ストリームの取得
const stream = canvasElt.captureStream(25); // 25 FPS
// 取得したストリームに対して何らかの処理を行う
// 例：RTCPeerConnection を使って別のコンピューターに送信
// ここで pc は既に生成された RTCPeerConnection オブジェクト
stream.getTracks().forEach((track) => pc.addTrack(track, stream));
仕様書
| Specification |
|---|
| Media Capture from DOM Elements # dom-htmlcanvaselement-capturestream |
ブラウザーの互換性
Loading…
関連情報
HTMLMediaElement.captureStream()- メディア要素からストリームをキャプチャするメソッドMediaStreamMedia Capture and Streams API