captureStream() メソッドを使用すると、<canvas>、<audio>、または <video> 要素から MediaStream をキャプチャできます。
これにより、これらの要素からの動画ストリームまたは音声ストリームを録画したり、WebRTC 経由でライブ配信したり、<canvas> でエフェクトや他の MediaStream と組み合わせたりできます。つまり、captureStream() を使用すると、MediaStream はキャンバス要素、音声要素、動画要素間、または RTCPeerConnection または MediaRecorder にメディアを行き来できます。
次のデモ（WebRTC のサンプルから入手可能）では、左側のキャンバス要素からキャプチャされた MediaStream が、WebRTC ピア接続を介して右側の動画要素にストリーミングされています。
（その他のキャンバスと動画の例へのリンクを以下に示します）。
captureStream() のコードは簡単です。
<canvas> の場合:
var canvas = document.querySelector('canvas');
var video = document.querySelector('video');
// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;
<video> の場合:
var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');
leftVideo.onplay = function() {
// Set the source of one <video> element to be a stream from another.
var stream = leftVideo.captureStream();
rightVideo.srcObject = stream;
};
なぜでしょうか。
captureStream() メソッドを使用すると、キャンバス要素やメディア要素から録画やライブ ストリーミングを行うことができます。
<canvas>からゲームプレイを録画してストリーミングする- カメラで撮影した動画にコンテンツやエフェクトを追加できます
<canvas>を使用して複数の動画からピクチャー イン ピクチャー エフェクトを作成する<canvas>で（ファイルまたはカメラ、あるいはその両方の）動画と画像を組み合わせる- ファイルから再生されたライブ ストリーミング動画
- 録音した音声や動画メッセージを動画またはボイスメールに使用する
基本的に、captureStream() を使用すると、JavaScript で MediaStream を作成して「挿入」できるようになります。
注意事項
Encrypted Media Extensions を介してコンテンツ保護を実装しているメディア要素で
captureStream()を使用しようとすると、例外がスローされます。<canvas>からキャプチャする場合、captureStream()が呼び出されたときに最大フレームレートが設定されます。たとえば、canvas.captureStream(10)はキャンバスが 0 ～ 10 fps で出力することを意味します。<canvas>に何も描画されないと何もキャプチャされず、<canvas>が 30 fps でペイントされても 10 fps がキャプチャされます。captureStream仕様でさらに議論が必要なバグが報告されています。captureStream()動画のサイズが、呼び出された<canvas>と一致している。
デモ
Canvas
動画
サポート
- Canvas
captureStream(): Firefox 43 以降。chrome://flags/#enable-experimental-web-platform-features が有効になっている Chrome 50 以降、またはデフォルトでは Chrome 52 以降。 - 動画と音声
captureStream(): Firefox 47、chrome://flags/#enable-experimental-web-platform-features が有効な Chrome 52 以降、またはデフォルトでは Chrome 53 以降。