如何使用WebRTC停止屏幕共享？

Question

我正在使用getUserMedia来获取屏幕共享权限。当用户点击停止按钮时，我想停止屏幕共享。

根据MediaStream API，应调用stop()函数停止共享。但是，当我这样做时，我发现Chrome栏仍然显示着“https://xxx正在共享您的屏幕<button>停止共享</button>”尽管流已经停止。

有没有函数可以使Chrome栏消失？

- Ovilia

Answer 1

据我所知，MediaStream.stop方法已经被弃用。如果您想停止一个MediaStream，您应该停止并关闭它的tracks。当所有绑定到共享屏幕的tracks停止时，“Chrome bar”将消失。可以通过以下代码实现此目标。 "this.screenStream" 是共享屏幕的 MediaStream 对象。

    var tracks = this.screenStream.getTracks();
    for( var i = 0 ; i < tracks.length ; i++ ) tracks[i].stop();

- Bas Goossen

---

这应该是答案。 - DuKes0mE

Answer 2

通过命令行标志进行屏幕共享，可以使用相同的MediaStream.stop或MediaStreamTracks.stop方法停止。然而，如果您正在使用desktopCapture API（演示），那么可以像这样使用cancelChooseDesktopMedia：

function releaseCapturing() {
    // getting desktop-media-id from local-storage
    chrome.desktopCapture.cancelChooseDesktopMedia(parseInt(localStorage['desktop-media-request-id']));
}

function captureDesktop() {
    var desktop_id = chrome.desktopCapture.chooseDesktopMedia(
        ["screen", "window"], onAccessApproved);

    // storing desktop-media-id in the local-storage
    localStorage.setItem('desktop-media-request-id', desktop_id);
}

- Muaz Khan

---

我正在使用 MediaStream.stop()，但是正如我所说，Chrome栏中的 https://xxx正在共享您的屏幕 <button>停止共享</button> 在调用 MediaStream.stop() 后仍然存在。我想要移除Chrome栏。这可能吗？ - Ovilia

有什么解决方案吗？我也遇到了同样的问题，似乎无法解决。 - Ifeanyi Chukwu

我遇到了同样的问题并已经解决了。你需要在该媒体流的每个轨道（如果存在视频和音频）上调用stop方法。如果由于某些进一步的修改或处理而替换/删除了这些轨道，则可能需要在传递媒体流进行进一步处理之前存储对这些轨道的引用。 - DuKes0mE

Answer 3

你可以使用 stream.onended。

stream.onended = () => {
  console.info("ScreenShare has ended");
};

或者你可以监听 ended 事件。

stream.getVideoTracks()[0].addEventListener('ended', () => {
  //perform your task here
});

- Aman Kumar

---

虽然这并没有回答最初的问题，但我想补充一下，“onended”事件需要添加到实际视频轨道上（即getDisplayMedia流的getVideoTracks（）[0]），如“getVideoTracks（）[0].onended = ...”。因此，基本上不是使用“addEventListener（'ended'，...”。 - basiszwo

Answer 4

// get the media stream
const mediaStream = await navigator.mediaDevices.getDisplayMedia();

// get the media track
const mediaTrack = mediaStream.getTracks()[0];

// stop the media track to stop screen sharing
mediaTrack.stop();

在我的情况下，我调用了MediaStream.getTracks()[0].stop()。

- Owen Ma