これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。
HTMLCanvasElement.captureStream() メソッドは、canvas の前面をリアルタイムにキャプチャした動画を CanvasCaptureMediaStream として返すメソッドです。
構文
MediaStream = canvas.captureStream(frameRate);
引数
frameRateOptional- キャプチャする際のフレームレートを倍精度浮動小数点数で指定します。指定しなかった場合、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() の定義 |
草案 | 初期定義 |
ブラウザ実装状況
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 機能 | 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 に変更してください。
関連情報
CanvasCaptureMediaStream- 戻り値のインターフェイスHTMLMediaElement.captureStream()- media 要素からストリームをキャプチャするメソッドMediaStreamMedia Capture and Streams API