9

ユーザーからスクリーンショットを取得することに興味があり、 getDisplayMediaAPI を使用してユーザーの画面をキャプチャしています。

const constraints = { video: true, audio: false };

if (navigator.mediaDevices["getDisplayMedia"]) {
  navigator.mediaDevices["getDisplayMedia"](constraints).then(startStream).catch(error);
} else {
  navigator.getDisplayMedia(constraints).then(startStream).catch(error);
}

実行すると、ブラウザーはユーザーに表示を共有するかどうかを尋ねます。ユーザーがプロンプトを受け入れると、提供されたコールバックが MediaStream を受け取ります。視覚化のために、要素に直接バインドしています。

  const startStream = (stream: MediaStream) => {
    this.video.nativeElement.srcObject = stream;
  };

これは今のところシンプルで非常に効果的です。それにもかかわらず、私は 1つのフレームにしか関心がないため、ストリームを処理したらすぐに手動でストリームを停止したいと考えています。

私が試したのは、video要素を DOM から削除することですが、Chrome は画面が現在キャプチャされているというメッセージを表示し続けます。したがって、これはビデオ要素にのみ影響し、ストリーム自体には影響しません:

画面キャプチャ中 (ドイツ語)

MDN の Screen Capture API の記事を見ましたが、ストリームを停止する方法に関するヒントは見つかりませんでした。

プロンプトも停止するように、ストリームを適切に終了するにはどうすればよいですか?

4

2 に答える 2

17

ストリーム自体を停止するのではなく、トラックを停止できます。
メソッドを使用してトラックを反復処理し、それぞれをgetTracks呼び出しstop()ます。

stream.getTracks()
  .forEach(track => track.stop())

すべてのトラックが停止するとすぐに、Chrome のキャプチャ プロンプトも消えます。

于 2019-10-10T16:44:02.657 に答える