更新时间:2023-11-27 GMT+08:00
屏幕分享
功能描述
屏幕共享用于在音视频会议中,把一个与会者的屏幕内容,以视频的方式分享给其他与会者。屏幕共享可以共享整个桌面,也可以共享某一个程序窗口。
实现屏幕共享
- 加入房间
参考接口调用流程中加入房间的时序图步骤加入房间。
- 创建并播放共享流
入会后调用isScreenShareSupported检测浏览器是否支持共享流。确认支持后,通过调用createStream创建共享流,通过调用setScreenProfile设置共享流的分辨率,通过调用initialize初始化共享流,通过调用play播放共享流,通过调用bindScreenAudio2RelatedStream设置是否绑定屏幕共享背景音乐至关联流对象。
示例代码如下:
// screenAudio 设置是否共享主流音频 let co = {screen: true , screenAudio: false} // 创建共享流 let localAuxStream = HRTC.createStream(co) // 设置共享流分辨率 localAuxStream.setScreenProfile('1080p') // 初始化共享流 localAuxStream.initialize() .then(() => { // 播放共享流 c${this.clientIndex}-aux 播放共享流的DOM元素 localAuxStream.play(`c${this.clientIndex}-aux`) localAuxStream.bindScreenAudio2RelatedStream(this.localStream, screenAudio)}) .catch((error) => { console.error(error) })
- 发布共享流
本地播放共享流后,通过调用publish发布本地共享流。
示例代码如下:
this.client.publish(localAuxStream) .then(() => {console.info(`发布共享流成功`)}) .catch((error) => { console.error(`发布共享流失败`, error) })
- 接收远端用户的共享流
收到远端用户开启共享流通知stream-added后,通过调用subscribe订阅远端用户的共享流,当共享流订阅成功会收到stream-subscribed回调通知,然后通过调用play在指定的窗口里播放接收到的远端用户的共享流。
示例代码如下:
this.client.on('stream-added', (event: any) => { // 流类型为共享流的话 if (event.stream.getType() === 'auxiliary') { // remoteAuxStream 远端共享流 let remoteAuxStream = event.stream this.client.subscribe(remoteAuxStream ) .then(() => {console.info(`订阅共享流成功`)}) .catch( (error) =>(console.info(`订阅共享流失败`))) }}) this.client.on('stream-subscribed', (event: any) => { // 流类型为共享流的话 if (event.stream.getType() === 'auxiliary') { // c${ clientIndex}-remoteAux 播放共享流的DOM元素 event.stream.play(`c${ clientIndex}-remoteAux`) } })
- 取消发布共享流
共享流发布后,可以通过调用unpublish取消共享流。
示例代码如下:
this.client.unpublish(localAuxStream) .then(() => {console.info(`取消发布共享流成功`)}) .catch((error) => { console.error(`取消发布共享流失败`, error) })
- 停止播放共享流
共享流发布后,可以通过调用close停止播放共享流,共享流停止成功后本地会收到screen-sharing-stopped回调信息。
示例代码如下:
localAuxStream.close() localAuxStream.on('screen-sharing-stopped', () => { console.log(`屏幕共享停止`) localAuxStream = null })
- 停止接收远端用户的共享流
远端用户的共享流取消发布后,本地自动取消订阅,同时会收到stream-removed回调消息。
示例代码如下:this.client.on('stream-removed', (event: any) => { if (event.stream.getType() === 'auxiliary') { remoteAuxStream = null } })
父主题: 实现音视频通话(Web)