how to stop screen sharing using WebRTC?

Question

I'm using getUserMedia to get access to screen sharing. When user clicks a stop button, I want to stop screen sharing.

According to MediaStream API, the stop() function should be called to stop sharing. But when I do so, I find the Chrome bar https://xxx is sharing your screen <button>Stop sharing</button> is still there, although the stream has stopped.

Is there a function that can make Chrome bar disappear?

Answer 1

Command-line flag based screen sharing can be stopped using same MediaStream.stop or MediaStreamTracks.stop method however if you're using desktopCapture API ( demo ) then there is cancelChooseDesktopMedia which can be used like this:

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

For as far as i am aware the MediaStream.stop method is deprecated. If you want to stop a MediaStream you should stop and close it's tracks. Thwn doing this the "Chrome bar" you mention will disapear once all tracks bound to the shared screen are stopped. This can be achieved through the following code. "this.screenStream" is the MediaStream object of the shared screen.

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

Answer 3

you can use stream.onended

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

or you can listen for ended event

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