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?

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?

• javascript
• google-chrome
• webrtc
• getusermedia
• screensharing

4 Answers 4

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

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

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

// 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();

In my case, I called MediaStream.getTracks()[0].stop()