MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

HTMLCanvasElement.captureStream() メソッドは、canvas の前面をリアルタイムにキャプチャした動画を CanvasCaptureMediaStream として返すメソッドです。

構文

MediaStream = canvas.captureStream(frameRate);

引数

frameRate Optional
キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、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() の定義
勧告改訂案 初期定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 51.0 43 (43)[1] 未サポート 36.0 ?
機能 Android Android Webview Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 51.0 51.0 43.0 (43) 未サポート 38 ?

[1] Firefox 41 / 42 では機能がデフォルトで無効となっています。 有効にする場合は canvas.capturestream.enabled の設定項目を true に変更してください。

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: hashedhyphen
 最終更新者: hashedhyphen,