2017-09-15 65 views
2

我正在使用twilio API在emberjs應用程序中實現屏幕共享,我成功地能夠共享屏幕並切換停止它。這裏是我的代碼 - >如何在emberjs中的chrome瀏覽器中獲取停止共享按鈕的處理程序

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

我現在面臨的問題是與停止共享按鈕,在應用程序的底部,與截圖看到下面 enter image description here

我需要一種方法來聽到一個事件處理程序並在點擊停止共享屏幕按鈕後執行一些代碼,我知道MediaStreamTrack文檔中提到了一個事件處理程序,但我不知道如何使用它,任何幫助都會非常高讚賞。

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

回答

1

的 「停止共享」 按鈕,將觸發MediaStreamTracks '結束' 事件。試試這個: mediaStream.getVideoTracks()[0].addEventListener('ended',() => console.log('screensharing has ended'))

相關問題