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);
仕様書
Specification |
---|
Media Capture from DOM Elements # dom-htmlcanvaselement-capturestream |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
CanvasCaptureMediaStream
(en-US) - 返値のインターフェイスHTMLMediaElement.captureStream()
- media 要素からストリームをキャプチャするメソッドMediaStream
Media Capture and Streams API