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

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

我尝试的是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 回答
1

开始屏幕截图示例代码：

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 - 停止显示捕获

于 2021-04-12T07:51:49.500 回答