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?

score 6 · Answer 1 · answered Sep 23 '20 at 11:02

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

score 2 · Answer 2 · answered Jul 21 '14 at 10:15

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

answered Jul 21 '14 at 10:15

Muaz Khan

7,138
9
41
77

1

I'm using `MediaStream.stop()`, but as I said, the Chrome bar `https://xxx is sharing your screen ` is still there after `MediaStream.stop()` is called. I want to remove the Chrome bar. Is this possible? – Ovilia Jul 21 '14 at 14:24
Any solution? I'm facing the same issue. Can't seem to get around it – Ifeanyi Chukwu Feb 23 '21 at 03: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 Jan 05 '22 at 14:17

score 1 · Answer 3 · answered Sep 24 '20 at 21:36

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

answered Sep 24 '20 at 21:36

Aman Kumar

19
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 Jan 23 '23 at 21:18

score 0 · Answer 4 · answered Apr 05 '23 at 16:24

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

how to stop screen sharing using WebRTC?

4 Answers4

Linked