javascript - 如何在emberjs的chrome浏览器中获取停止共享按钮的事件处理程序

Question

我正在使用 twilio API 在 emberjs 应用程序中实现屏幕共享，我成功地能够共享屏幕并切换停止它。这是我的代码->

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

我面临的问题是应用程序底部的停止共享按钮，如下面的屏幕截图所示

我需要一种方法来监听事件处理程序并在单击停止共享屏幕按钮后执行一些代码，我知道 MediaStreamTrack 文档中提到了一个 onended 事件处理程序，但我不知道如何使用它，任何帮助将不胜感激。

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

Answer 1

“停止共享”按钮将触发 MediaStreamTracks 'ended' 事件。尝试这个： mediaStream.getVideoTracks()[0].addEventListener('ended', () => console.log('screensharing has ended'))

Answer 2

出于某种原因，@philipp 的答案对我不起作用，我发现这很有帮助

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!');

    });