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

【问题标题】：how to stop screen sharing using WebRTC?如何使用 WebRTC 停止屏幕共享？
【发布时间】：2014-07-21 05:11:15
【问题描述】：

我正在使用getUserMedia 访问屏幕共享。当用户单击停止按钮时，我想停止屏幕共享。

根据MediaStream API，应该调用stop()函数来停止分享。但是当我这样做时，我发现 Chrome 栏 https://xxx is sharing your screen <button>Stop sharing</button> 仍然存在，尽管流已停止。

有没有可以让Chrome bar消失的功能？

【问题讨论】：

标签： javascript google-chrome webrtc getusermedia screensharing

【解决方案1】：

可以使用相同的MediaStream.stop 或MediaStreamTracks.stop 方法停止基于命令行标志的屏幕共享，但是如果您使用的是desktopCapture API (demo)，则可以使用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);
}

【讨论】：

我正在使用MediaStream.stop()，但正如我所说，在调用MediaStream.stop() 之后，Chrome 栏https://xxx is sharing your screen <button>Stop sharing</button> 仍然存在。我想删除 Chrome 栏。这可能吗？
有什么解决办法吗？我面临同样的问题。似乎无法绕过它
我也有同样的问题，刚刚解决了。您可以在该媒体流的每个轨道（如果存在视频和音频）上调用 stop。如果由于一些进一步的修改或处理而导致轨道被替换/删除，那么您可能必须在传递媒体流以进行进一步处理之前存储对轨道的引用。

【解决方案2】：

据我所知，MediaStream.stop 方法已被弃用。如果你想停止一个 MediaStream 你应该停止并关闭它的轨道。这样做之后，一旦绑定到共享屏幕的所有曲目都停止，您提到的“Chrome 栏”就会消失。这可以通过以下代码来实现。 “this.screenStream”是共享屏幕的MediaStream对象。

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

【讨论】：

这应该是答案

【解决方案3】：

你可以使用 stream.onended

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

或者你可以监听结束的事件

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

【讨论】：