Question

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

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

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

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

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

Answer 1

“停止共享”按钮将触发MediaStreamTracks“已结束”事件。试试这个： 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!');

    });

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

2 个答案: