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

Question

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

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

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

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

Answer 2

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

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

Answer 3

您可以使用stream.onended

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

或者，您可以监听已结束的事件

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