このページは Cloud Translation API によって翻訳されました。

キャンバス、動画、またはオーディオ要素から MediaStream をキャプチャする

Sam Dutton

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() は、動画要素が動画を再生できるようになった後にのみ呼び出すことができます。そのため、ここでは onplay ハンドラにあります。

しかし、なぜでしょうか？

captureStream() メソッドを使用すると、キャンバス要素とメディア要素から録画またはライブストリーミングを行うことができます。

<canvas> からゲームプレイを録画、ストリーミングする
カメラで動画をキャプチャしてから、コンテンツやエフェクトを追加する
<canvas> を使用して複数の動画からピクチャーインピクチャー効果を作成する
<canvas> で動画と画像（ファイル、カメラ、またはその両方）を組み合わせる
ファイルから再生された動画をライブ配信する
録音した音声メッセージや動画メッセージをビデオメールやボイスメールに使用する

基本的に、captureStream() は JavaScript が MediaStream を構築して「何かを挿入」できるようにします。

注意事項

暗号化されたメディア拡張機能を介してコンテンツ保護を実装するメディア要素で captureStream() を使用しようとすると、例外がスローされます。
<canvas> からキャプチャする場合、captureStream() が呼び出されるときに最大フレームレートが設定されます。たとえば、canvas.captureStream(10) は、キャンバスが 0 ～ 10 fps の間を出力することを意味します。<canvas> に何も描画されない場合は何もキャプチャされず、<canvas> が 30 fps で描画されても 10 fps でキャプチャされます。captureStream 仕様には、詳細な議論を含むバグが報告されています。
captureStream() 動画のディメンションが、呼び出し元の <canvas> と一致している。

デモ