时间戳

首页 > 解决方案 > 如何手动停止 getDisplayMedia 流以结束屏幕捕获？

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

问题描述

我有兴趣从用户那里获取屏幕截图，并且我正在使用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 文章，但找不到任何关于如何停止流的提示。

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

标签： browserwebrtcscreen-capturewebpage-screenshotget-display-media

解决方案

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

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

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

推荐阅读