DOM

HTMLMediaElement.captureStream() メソッド

 編集:2022.11.02 by T.A.

[Edge]。→

HTMLMediaElement でレンダリングされているコンテンツのリアルタイム キャプチャをストリーミングしている MediaStream オブジェクトを返します。

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

構文
HTMLMediaElement.captureStream()
HTMLMediaElement HTMLMediaElement
戻り値

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

mdnより

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

document.querySelector('.playAndRecord').addEventListener('click', function() {
  var playbackElement = document.getElementById("playback");
  var captureStream = playbackElement.captureStream();
  playbackElement.play();
});

より長く複雑な例と説明については、「」を参照してください。

HTML:

<VIDEO id=IdTest src="../../Sample/Eizou_M.mp4" controls></VIDEO>

JavaScript:

D=IdTest.captureStream();  //エラー発生:Failed to execute 'captureStream' on 'HTMLMediaElement': Cannot capture from element with cross-origin data
	//'HTMLMediaElement' で 'captureStream' を実行できませんでした: クロスオリジン データを持つ要素からキャプチャできません

テスト