browser - 如何手动停止 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。为了可视化，我将它直接绑定(bind)到一个元素:

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

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

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



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

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

Answer 1

您可以停止它的，而不是停止流本身。轨道 .
使用 getTracks 遍历轨道方法和调用 stop()他们每个人:

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

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