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

Question

我有兴趣从用户那里获取 屏幕截图，我正在使用 getDisplayMedia API 来捕获用户的屏幕：

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;
  };

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

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

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

如何正确结束直播，让提示也停止？

Answer 1

您可以停止其 tracks。
而不是停止流本身使用 getTracks 方法遍历轨道并在每个轨道上调用 stop()：

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

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

Answer 2

开始截屏示例代码：

async function startCapture() {
  logElem.innerHTML = "";

  try {
    videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    dumpOptionsInfo();
  } catch(err) {
    console.error("Error: " + err);
  }
}

停止截屏示例代码：

function stopCapture(evt) {
  let tracks = videoElem.srcObject.getTracks();

  tracks.forEach(track => track.stop());
  videoElem.srcObject = null;
}

更多信息：MDN - Stopping display capture

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

How to manually stop getDisplayMedia stream to end screen capture?

browser

screen-capture

webpage-screenshot

webrtc

get-display-media