Stop Sharing Button from Browser Didn't Work Properly

Hello, I’m new to this form, sorry if I at the wrong section. I try create some sharing screen function on my conference apps. There is a case that I don’t know why it didn’t work properly.

image
When I start sharing screen for the first time and stop it using “Stop Sharing” button from browser (in this case chrome like the image above) when I try to check the producer list, it didn’t find any producer so it failed send message to any member of the conference to close the consumer. the screen share on the producer side ended but on consumer side it still running but with frozen state.

image
But when I try to stop with button from the site, and then I try to share screen again and stop it again but using the button from browser. it work properly (producer found and it trigger close-consumer to everyone in the conference.)

You may be missing updating producer list first time causing the issue. Does the issue appear when you share screen first time and stop it from your custom button?

When you say producer list you mean producer list on server on client side?

If I share screen first time and using stop sharing from my custom button it work properly. and after that the button from chrome will work properly too when I share screen on the same session.

producer from client side. if it found the producer it will emit close-producer to server and the server will close its producer. but because no producer on client side is found (with the error case) it will not emit close-producer to server

Then you need to check the logic you have implemented to close producer when you stop sharing from chrome’s default button. Show some snippets here to have a better look. If you are saving the producer to some variable when screen is shared then it should be available on stop share screen.

You may be removing producer variable on stream being stopped, so when you stop share screen from chrome’s button then chrome stops the screen stream automatically and if you reset the producer variable at the stream stopped event then surely it will not be available for next part of your code causing the issue. Check if that is the case.

I think no issue on the logic. here some snippets for custom button and onended event on MediaStreamTrack

Custom Button

<button onclick={handleStopSharing}>Stop Sharing</button>

const handleStopSharing = (event)  => {
    stopSharingScreen();
    event.preventDefault();
}

MediaStreamTrack

screenShareStream.current.getVideoTracks()[0].onended = function () {
    console.log("track ended");
    stopSharingScreen();
};

and this is what inside stopSharingScreen():

const stopSharingScreen = () =>{

    const screenShareProducer = myProducers.find(p => p.rtpParameters.codecs.findIndex(codec => codec.mimeType.toLowerCase() === "video/vp8") !== -1);
    console.log("producer", screenShareProducer);
    ....
}

the problem is when the conference just created and do screenshare, if the screenshare stopped by ended event the producer is not found.
console output:
image

but when it stopped by custom button it works and then when do screenshare again in the same conference somehow the ended event can find the producer
console output:
image

You need to console log myProducers along with screenShareProducer to get to the bottom of it.

This is not right way to find the producer. You are comparing codecs, how will you differentiate b/w camera stream, screen stream? This will cause many problems for you.

The right way to find the producer is that you save share_screen_producer in separate variable and on stopShareScreen get producer form that variable and proceed with your logic. There can be many other ways.