屏幕分享

更新时间：2023-11-27 GMT+08:00

查看PDF

功能描述

屏幕共享用于在音视频会议中，把一个与会者的屏幕内容，以视频的方式分享给其他与会者。屏幕共享可以共享整个桌面，也可以共享某一个程序窗口。

接口调用流程

实现屏幕共享

加入房间
参考接口调用流程中加入房间的时序图步骤加入房间。

创建并播放共享流

入会后调用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
 } 
})
```