# 屏幕分享
#### 功能描述
屏幕共享用于在音视频会议中，把一个与会者的屏幕内容，以视频的方式分享给其他与会者。屏幕共享可以共享整个桌面，也可以共享某一个程序窗口。
 #### 接口调用流程
![](https://support.huaweicloud.com/bestpractice-rtc/zh-cn_image_0000001167687446.png)
#### 实现屏幕共享
1. **加入房间**
   参考[接口调用流程]中加入房间的时序图步骤加入房间。
   
2. **创建并播放共享流**
   入会后调用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)
   })
   ```
   
3. **发布共享流**
   本地播放共享流后，通过调用publish发布本地共享流。
   示例代码如下：
   ```
   this.client.publish(localAuxStream)
   .then(() => {console.info(`发布共享流成功`)})
   .catch((error) => {
    console.error(`发布共享流失败`, error)
   })
   ```
   
4. **接收远端用户的共享流**
   收到远端用户开启共享流通知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`) 
    }
   })
   ```
   
5. **取消发布共享流**
   共享流发布后，可以通过调用unpublish取消共享流。
   示例代码如下：
   ```
   this.client.unpublish(localAuxStream)
   .then(() => {console.info(`取消发布共享流成功`)})
   .catch((error) => {
   console.error(`取消发布共享流失败`, error)
   })
   ```
   
6. **停止播放共享流**
   共享流发布后，可以通过调用close停止播放共享流，共享流停止成功后本地会收到screen-sharing-stopped回调信息。
   示例代码如下：
   ```
   localAuxStream.close()
   localAuxStream.on('screen-sharing-stopped', () => {
    console.log(`屏幕共享停止`)
    localAuxStream = null
   })
   ```
   
7. **停止接收远端用户的共享流**
   远端用户的共享流取消发布后，本地自动取消订阅，同时会收到stream-removed回调消息。
   示例代码如下：
   ```
   this.client.on('stream-removed', (event: any) => {
    if (event.stream.getType() === 'auxiliary') {
    remoteAuxStream = null
    } 
   })
   ```
   
 
#### API参考
[createStream](https://support.huaweicloud.com/csdk-rtc/rtc_05_0137.html#section8)
[isScreenShareSupported](https://support.huaweicloud.com/csdk-rtc/rtc_05_0137.html#section6)
[setScreenProfile](https://support.huaweicloud.com/csdk-rtc/rtc_05_0141.html#section3)
[initialize](https://support.huaweicloud.com/csdk-rtc/rtc_05_0141.html#section0)
[play](https://support.huaweicloud.com/csdk-rtc/rtc_05_0140.html#section0)
[bindScreenAudio2RelatedStream](https://support.huaweicloud.com/csdk-rtc/rtc_05_0141.html#section20)
[publish](https://support.huaweicloud.com/csdk-rtc/rtc_05_0138.html#section2)
[subscribe](https://support.huaweicloud.com/csdk-rtc/rtc_05_0138.html#section4)
[unpublish](https://support.huaweicloud.com/csdk-rtc/rtc_05_0138.html#section3)
[stream-added](https://support.huaweicloud.com/csdk-rtc/rtc_05_0139.html#section2)
[stream-subscribed](https://support.huaweicloud.com/csdk-rtc/rtc_05_0139.html#section5)
[stream-removed](https://support.huaweicloud.com/csdk-rtc/rtc_05_0139.html#section3)
[screen-sharing-stopped](https://support.huaweicloud.com/csdk-rtc/rtc_05_0143.html#section1)