我正在使用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)
}
})
我所面临的问题是与停止分享按钮,这是在应用程序的底部,如下面的屏幕截图x1c 0d1x所示
我需要一种方法来监听事件处理程序并在单击停止共享屏幕按钮后执行一些代码,我知道有一个在MediaStreamTrack文档中提到的onended事件处理程序,但我不知道如何使用它,任何帮助都将不胜感激。
https://developer.mozilla.org/en-US/docs/Web/API/MediaStreamTrack
2条答案
按热度按时间deyfvvtc1#
“停止共享”按钮将触发MediaStreamTracks“已结束”事件。请尝试以下操作:
mediaStream.getVideoTracks()[0].addEventListener('ended', () => console.log('screensharing has ended'))
hxzsmxv22#
由于某种原因,@philipp answer对我不起作用,我发现这很有帮助
https://github.com/webrtc/samples/blob/gh-pages/src/content/getusermedia/getdisplaymedia/js/main.js#L88