How to get the event Handler for stop sharing button in chrome browser in emberjs

Question

I am using twilio API to implement screen sharing in an emberjs app, I am successfully able to share the screen and also toggle on stopping it. Here is my code ->

this.get('detectRtc').isChromeExtensionAvailable(available => {
    if (available) {
      const { twilioParticipant } = this.get('participant')

      if (this.get('stream') && this.get('stream').active) {
        this.get('streamTrack').stop()
        this.get('userMedia.mediaStream')
        .removeTrack(this.get('streamTrack'))
        this.set('isEnabled', false)
        twilioParticipant.removeTrack(this.get('streamTrack'))
      } else {
        this.get('detectRtc').getSourceId(sourceId => {
          // "cancel" button is clicked
          if (sourceId !== 'PermissionDeniedError') {
            // "share" button is clicked extension returns sourceId
            this.get('userMedia')
            .getScreen(sourceId)
            .then(mediaStream => {
              this.set('isEnabled', true)
              this.set('stream', mediaStream)
              this.set('streamTrack', mediaStream.getVideoTracks()[0])
              twilioParticipant.addTrack(mediaStream.getVideoTracks()[0])
            })
            .catch(() => { /* do nothing, but return something */ })
          }
        })
      }
    } else {
      this.get('flash').status(
        'base',
        this.get('intl').t('chromeExtension.install'),
        {
          icon: 'alert-circle',
          push: true
        }
      )
      // TODO Show the system popup to install chrome extension from web store
      // !!chrome.webstore &&
      // !!chrome.webstore.install &&
      // chrome.webstore.install(this.webStoreUrl)
    }
  })

The issue I'm facing is with the stop sharing button which is at the bottom of the app as seen in screenshot below

I need a way to listen to an event handler and execute the some code after clicking on the stop sharing screen button, I know there is an onended event Handler which is mentioned in the MediaStreamTrack docs, but I don't know how to use it, any help will be highly appreciated.

https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack

Answer 1

The "stop sharing" button will trigger the MediaStreamTracks 'ended' event. Try this: mediaStream.getVideoTracks()[0].addEventListener('ended', () => console.log('screensharing has ended'))

Answer 2

for some reason, @philipp answer is not working for me and I found this quite helpful

https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/getdisplaymedia/js/main.js#L88

this.get('stream').addEventListener('inactive', e => {
      console.log('Capture stream inactive - stop recording!');

    });