HTMLCanvasElement: captureStream() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

captureStream() は HTMLCanvasElement インターフェイスのメソッドで、MediaStream を返します。これは CanvasCaptureMediaStreamTrack を含んでおり、このキャンバスの内容をリアルタイムに動画キャプチャします。

構文

js
captureStream()
captureStream(frameRate)

引数

frameRate 省略可

各フレームのキャプチャレートを示す倍精度浮動小数点値です。設定されていない場合、キャンバスが変化するたびに新しいフレームがキャプチャされます。0 に設定すると、フレームは自動的にキャプチャされません。代わりに、返されたトラックの requestFrame() メソッドが呼び出されたときにのみ、キャプチャされます。

返値

MediaStream オブジェクトへの参照です。その中に CanvasCaptureMediaStreamTrack が 1 つあります。

例外

NotSupportedError DOMException

frameRate が負の値であった場合に発生します。

SecurityError DOMException

ビットマップのオリジンがクリーンではありません。 そのコンテンツの少なくとも一部が、文書そのものが読み込まれたサイトとは別のサイトから読み込まれたものであるか、その可能性があります。

例

js
// キャプチャしたい canvas 要素を取得
const canvasElt = document.querySelector("canvas");

// ストリームの取得
const stream = canvasElt.captureStream(25); // 25 FPS

// 取得したストリームに対して何らかの処理を行う
// 例：RTCPeerConnection を使って別のコンピューターに送信
// ここで pc は既に生成された RTCPeerConnection オブジェクト
stream.getTracks().forEach((track) => pc.addTrack(track, stream));

仕様書

Specification
Media Capture from DOM Elements
# dom-htmlcanvaselement-capturestream

ブラウザーの互換性

BCD tables only load in the browser

関連情報