如何手动停止 getDisplayMedia 流以结束屏幕捕获？

Question

我有兴趣从用户那里获取屏幕截图，并且我正在使用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;
  };

到目前为止，这是简单且非常有效的。尽管如此，我只对单个帧感兴趣，因此我想在处理完后立即手动停止流。

我尝试的是video从 DOM 中删除该元素，但 Chrome 一直显示当前捕获屏幕的消息。所以这只会影响视频元素而不是流本身：

我查看了MDN上的Screen Capture API 文章，但找不到有关如何停止流的任何提示。

如何正确结束流以便提示也停止？

Answer 1

您可以停止其轨道，而不是停止流本身。
使用该getTracks方法迭代轨道并调用stop()它们中的每一个：

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

一旦所有曲目停止，Chrome 的捕获提示也会消失。