How to listen for "Stop sharing" click in Chrome DesktopCapture API

Question

I'm currently writing a chrome extension which uses Chrome's DesktopCapture API. I'm struggling to set a callback when someone clicks on "Stop sharing".

I tried using the onended EventHandler of the MediaStream, but the MediaStream's ended property is still set to true after clicking on the button.

The only difference I could find between the stream (before and after clicking the button) is that the videoTracks.readyState is set to ended.

Edit: I would also like to notice if the user closes the window they were streaming before.

Solution 1

I solved this issue by assigning an EventHandler on the videoTrack's onended property:

  // somebody clicked on "Stop sharing"
  stream.getVideoTracks()[0].onended = function () {
    // doWhatYouNeedToDo();
  };

As far as my edit goes (noticing a closing window): it also fires the event.

Solution 2

Now we have oninactive, You can use like this

stream.oninactive = () => {}

Solution 3

stream.onended = () => { // Click on browser UI stop sharing button
  console.info("Recording has ended");
};

Where to get stream? Using adapter.js (making universal Promise based API across browsers):

navigator.mediaDevices.getUserMedia(..).then((stream) => {..});