HTMLCanvasElement.captureStream()

ジャンプ先:
  1. 構文
  2. 使用例
  3. 仕様
  4. ブラウザ実装状況
  5. 関連情報

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

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() の定義		 草案 初期定義

ブラウザ実装状況

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 に変更してください。

関連情報

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

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