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 以降。