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

屏幕分享

功能描述

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

接口调用流程

实现屏幕共享

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