8

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?

4 Answers 4

7

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();
1
  • This should be the answer
    – DuKes0mE
    Commented Jan 5, 2022 at 14:31
2

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);
}
3
  • 1
    I'm using MediaStream.stop(), but as I said, the Chrome bar https://xxx is sharing your screen <button>Stop sharing</button> is still there after MediaStream.stop() is called. I want to remove the Chrome bar. Is this possible?
    – Ovilia
    Commented Jul 21, 2014 at 14:24
  • Any solution? I'm facing the same issue. Can't seem to get around it Commented Feb 23, 2021 at 3:20
  • I have the same and just solved it. You have call stop on every track (video and audio if they exist) of that media stream. If the tracks get replaced/removed due to some further modification or processing down the line, then you may have to store a reference to the tracks before passing the media stream for further processing.
    – DuKes0mE
    Commented Jan 5, 2022 at 14:17
1

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
});
1
  • while this doesn't answer the initial question, I want to add that the "onended" event needs to be added on the actual video track (of the getDisplayMedia stream) "getVideoTracks()[0].onended = ...". So basically instead of "addEventListener('ended', ...".
    – basiszwo
    Commented Jan 23, 2023 at 21:18
0
// 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()

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.