captureStream() はHTMLMediaElement インターフェイスのプロパティで、このメディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしているMediaStream オブジェクトを返します。

これは、例えばWebRTC のRTCPeerConnection のソースとして使用できます。

構文

captureStream()

引数

なし。

返値

他のメディア処理コードによる音声データおよび/または動画データのソースとして、またはWebRTC のソースとして使用できるMediaStream オブジェクトです。

例

この例では、イベントハンドラーが確立されているため、ボタンをクリックすると、ID が"playback" のメディア要素のコンテンツのMediaStream へのキャプチャを開始します。 これにより、WebRTC を介したストリーミングのソースなど、他の目的にストリームを使用して、動画通話中に録画済みの動画を他の人と共有できるようになります。

document.querySelector(".playAndRecord").addEventListener("click", () => {  const playbackElement = document.getElementById("playback");  const captureStream = playbackElement.captureStream();  playbackElement.play();});

より長くより複雑な例と説明については、メディア要素の記録を参照してください。

仕様書

ブラウザーの互換性

Firefox 特有のメモ

Firefox 51 より前のバージョンでは、captureStream() はソースそれ自体がMediaStream であるメディア要素では使用できませんでした（RTCPeerConnection を介して受信されるストリームを表示している<video> 要素など）。 Firefox 51 以降では機能します。これは、動画要素からストリームをキャプチャし、それを記録するためにMediaRecorder を使用できることを意味します。 詳細はFirefox バグ 1259788 をご覧ください。

ただし、明確な理由から、Firefox ではcaptureStream() に接頭辞が付いてmozCaptureStream() となっています。現在の実装には、次のような注目に値するいくつかの奇妙な点があるからです。

• Firefox の実装は現在、メディア要素のソース自体がMediaStream である場合にのみ、仕様書での説明通りに動作します。
• メディア要素のソースがMediaStream ではない場合、このメソッドからの出力は仕様書と互換性がありません。 そして、キャプチャの開始後にソースを変更した場合、その非互換性のために出力キャプチャストリームは新しいソースデータを受け入れることができません。したがって、新しいソースのMediaStream からのMediaStreamTrack はキャプチャしたストリームに追加されず、更新されたソースをキャプチャしない出力になります。
• ソースをMediaStream に戻すと、トラックをストリームに戻して追加し、期待どおりに機能します。
• mozCaptureMediaStream() をMediaStream のソースを使用して要素に対して呼び出すと、要素がMediaStream を再生している間はトラックのみを含むストリームを返します。
• ソースメディアのないメディア要素でmozCaptureMediaStream() を呼び出すと、その互換モードは最初に追加されたソースに基づきます。 例えば、MediaStream の場合、キャプチャストリームはそれ以降 MediaStream のソースでのみ機能します。
• MediaStream 以外のソースのサポートが仕様に達した時点で、接頭辞なしのメソッドの場合、この特別なふるまいは取り除かれます。 詳細はFirefox バグ 1259788 をご覧ください。

関連情報

• メディア要素の記録
• MediaStream 収録 API
• HTMLCanvasElement.captureStream()
• MediaStream
• WebRTC API