HTMLMediaElement.captureStream()
HTMLMediaElement インターフェイスの captureStream() プロパティは、メディア要素でレンダリングされているコンテンツのリアルタイムキャプチャをストリーミングしている MediaStream オブジェクトを返します。
これは、例えば WebRTC の RTCPeerConnection のソースとして使用できます。
構文
var mediaStream = mediaElement.captureStream()
パラメーター
無し。
戻り値
他のメディア処理コードによる音声データおよび/または動画データのソースとして、または WebRTC のソースとして使用できる MediaStream オブジェクト。
例
この例では、イベントハンドラが確立されているため、ボタンをクリックすると、ID が "playback" のメディア要素のコンテンツの MediaStream へのキャプチャを開始します。 これにより、WebRTC を介したストリーミングのソースなど、他の目的にストリームを使用して、動画通話中に録画済みの動画を他の人と共有できるようになります。
document.querySelector('.playAndRecord').addEventListener('click', function() {
var playbackElement = document.getElementById("playback");
var captureStream = playbackElement.captureStream();
playbackElement.play();
});
より長くより複雑な例と説明については、メディア要素の記録を参照してください。
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Media Capture from DOM Elements captureStream() の定義 |
草案 | 初期定義 |
ブラウザーの互換性
BCD tables only load in the browser
Firefox 51 より前のバージョンでは、ソースがそれ自体が MediaStream であるメディア要素では、captureStream() を使用できませんでした（RTCPeerConnection を介して受信されるストリームを表示している <video> 要素など）。 Firefox 51 以降、これは機能します。 これは、動画要素からストリームをキャプチャし、それを記録するために MediaRecorder を使用できることを意味します。 詳細は バグ 1259788 をご覧ください。
ただし、正当な理由で、Firefox では captureStream() の先頭に mozCaptureStream() が付いています。 現在の実装には、次のような注目に値するいくつかの奇妙な点があります。
- Firefox の実装は現在、メディア要素のソース自体が
MediaStreamである場合にのみ、仕様で説明しているように機能します。 - メディア要素のソースが
MediaStreamではない場合、このメソッドからの出力は仕様と互換性がありません。 そして、キャプチャの開始後にソースを変更した場合、その非互換性のために出力キャプチャストリームは新しいソースデータを受け入れることができません。 したがって、新しいソースのMediaStreamからのMediaStreamTrackはキャプチャしたストリームに追加されず、更新されたソースをキャプチャしない出力になります。 - ソースを
MediaStreamに戻すと、トラックをストリームに戻して追加し、期待どおりに機能します。 MediaStreamのソースを使用して要素に対してmozCaptureMediaStream()を呼び出すと、要素がMediaStreamを再生している間はトラックのみを含むストリームを返します。- ソースメディアのないメディア要素で
mozCaptureMediaStream()を呼び出すと、その互換モードは最初に追加されたソースに基づきます。 例えば、MediaStreamの場合、キャプチャストリームはそれ以降MediaStreamのソースでのみ機能します。 MediaStream以外のソースのサポートが仕様に達した時点で、接頭辞なしのメソッドの場合、この特別なふるまいは取り除かれます。 詳細は バグ 1259788, comment 160 をご覧ください。