HTMLCanvasElement.captureStream()
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
HTMLCanvasElement.captureStream() メソッドは、canvas の前面をリアルタイムにキャプチャした動画を CanvasCaptureMediaStream (en-US) として返すメソッドです。
構文
MediaStream = canvas.captureStream(frameRate);
引数
frameRate省略可- キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、canvas が変化するたびにフレームが新しくキャプチャされます。0 を指定した場合、フレームが 1 枚だけキャプチャされます。
戻り値
MediaStream オブジェクトへの参照を返します。
使用例
// キャプチャしたい canvas 要素を取得
var canvasElt = document.querySelector('canvas');
// ストリームの取得
var stream = canvasElt.captureStream(25); // 25 FPS
// 取得したストリームに対して何らかの処理を行う
// 例：RTCPeerConnection を使って別のコンピュータに送信
// ここで pc は既に生成された RTCPeerConnection オブジェクト
pc.addStream(stream);
仕様
| 仕様書 | 策定状況 | 備考 |
|---|---|---|
| Media Capture from DOM Elements HTMLCanvasElement.captureStream() の定義 |
草案 | 初期定義 |
ブラウザ実装状況
BCD tables only load in the browser
関連情報
CanvasCaptureMediaStream(en-US) - 戻り値のインターフェイスHTMLMediaElement.captureStream()- media 要素からストリームをキャプチャするメソッドMediaStreamMedia Capture and Streams API