このページは 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 th<e sou>rce 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 th<e sou>rce 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 を作成して「コンテンツを挿入」できます。

注意事項

Encrypted Media Extensions を介してコンテンツ保護を実装するメディア要素で captureStream() を使用すると、例外がスローされます。
<canvas> からキャプチャする場合、最大フレームレートは captureStream() が呼び出されたときに設定されます。たとえば、canvas.captureStream(10) は、キャンバスの出力が 0 ～ 10 fps であることを意味します。<canvas> に何もペイントされていない場合は何もキャプチャされず、<canvas> が 30 fps でペイントされていても 10 fps がキャプチャされます。captureStream 仕様に関するバグと詳細な議論が提出されています。
captureStream() 動画のサイズが、呼び出された <canvas> と一致している。

デモ