HTMLMediaElement: captureStream() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
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();
});
より長くより複雑な例と説明については、メディア要素の記録を参照してください。
仕様書
Specification |
---|
Media Capture from DOM Elements # dom-htmlmediaelement-capturestream |
ブラウザーの互換性
BCD tables only load in the browser
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 をご覧ください。