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

Question

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

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

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

Answer 1

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

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

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