更新时间:2024-07-02 GMT+08:00

SDK使用

  1. 检测浏览器是否兼容 SDK。具体接口详情请参见checkSystemRequirements

     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
      async isBrowserSupport() {
        let check = false
        try {
          check = await HRTC.checkSystemRequirements()
          console.warn('browser isSupport: ' + check)
        } catch (error) {
          console.error(`check browser isSupport error: ${error.getCode()} - ${error.getMsg()}`)
          if (error.getCode() !== 90100025) {
            console.error(`browser Support part ability of RTC`)
            check = true
          }
        }
        return check
     }
    

  2. 创建客户端。具体接口详情请参见createClient

    1
    2
    let config = { appId,domain,countryCode }
    let client = HRTC.createClient(config)
    
    • domain:string[128]类型,服务器域名。该参数在SDK 1.0+版本中必填,SDK 2.0+版本中非必填。
    • appId:string[128]类型,必填。应用ID,只有App ID相同的应用程序才能进入同一个房间进行互通。
    • countryCode:string[2]类型,可选。国家码,如:CN表示中国大陆,US表示美国,HK表示中国香港。countryCode值的填写具体请参见国家码对照表

    domainappId提交工单获取

  3. 加入房间。具体接口详情请参见join

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let option = { userId: userId, userName: userName, signature: signature, ctime: ctime, role: role } 
    async joinRoom() {
       try{
         await client.join(roomId, option)
         console.log('join room success')
       } catch(error){
         console.log('join room fail',error)
       }
    }
    
    • userId:必选,string[64] 类型,本端用户唯一标识。
    • userName:可选,string[256]类型,用户昵称,该昵称为UTF-8编码。
    • signature:必选,string[512]类型,鉴权签名字串,应用开发者需要向远端服务器获取鉴权签名。

      远端服务器需要您自行部署,具体请参见接入鉴权

    • ctime:必选,string类型,签名UTC时间戳,单位秒。
    • role:必选,number类型,用户角色,可以标识媒体方向,取值如下:
      • 0:joiner(发布并观看)。
      • 2:player(只观看不发布)。
    • roomId:必选,string[64]类型,房间ID,房间唯一标识。

    加入房间成功后,对端会收到“peer-join”事件。

  4. 创建本地流并发布。具体接口详情请参见createStreaminitializeaddResolutionpublishplay

    1
    2
    3
    4
    5
    6
    7
    8
    9
    let stream = HRTC.createStream({ audio:true,microphoneId:xxx,video:true,cameraId:xxx })
    
    
    stream.initialize().then(() => {
      stream.addResolution('90p_1')  //可选,如果要开启双流可以添加另外一个分辨率的视频
      
      stream.play(elementId,{ muted:true })  //播放本地流
      client.publish(stream)
    })
    
    • audio:可选,boolean类型,指定是否采集主流的音频。默认值为false。
    • video:可选,boolean类型,指定是否采集主流的视频,主流即摄像头的流。默认值为false。
    • microphoneId:可选,string类型,在audio为true的时候有效,表示采集音频的源麦克风设备Id。如果不传,系统自动设置默认值。
    • cameraId:可选,string类型,在video为true的时候有效,表示采集视频的摄像头设备Id。如果不传,系统自动设置默认值。

  5. 当收到服务器发送的“stream-added”事件通知时,可以订阅远端媒体。具体接口详情请参见stream-addedsubscribegetStreamInfo

    1
    2
    3
    4
    client.on('stream-added', (event) => {
      const stream = event.stream
      client.subscribe(stream,{ video:true, audio:true })
    })
    
    1
    2
    3
    4
    5
    6
    7
    如果双流场景
    client.on('stream-added', (event) => {
      const stream = event.stream
      const streamInfo = stream.getStreamInfo()  //获取流的分辨率等信息
      const resolutionIds = streamInfo.videoProfiles.map((profile) => profile.resolutionId)  // App 根据自己的业务场景,选择分辨率
      client.subscribe(stream,{ video:true, audio:true, resolutionIds:resolutionIds })  // 订阅音频以及所选择的分辨率的视频
    })
    

    订阅完成之后,本端会收到“stream-subscribed”事件通知,可设置对端窗口,播放对端音视频。具体接口详情请参见stream-subscribedplay

    1
    2
    3
    4
    client.on('stream-subscribed', (event) => {
       const stream = event.stream
       stream.play(elementId, { objectFit: 'contain', muted: true, resolutionId: resolutionId })
    })
    
    • elementId:HTML <div>标签ID。
    • 播放选项参数:
      • objectFit:可选,string类型,取值包括contain、cover和fill,默认值:主流:cover,辅流:contain。
      • muted:可选,boolean类型,true表示静音,false表示不静音,默认值为false。
      • resolutionId: 可选,string类型,指定要播放的分辨率的视频。默认为分辨率最高的视频。

    若是不想观看对端,则可取消订阅对端音视频。具体接口详情请参见unsubscribe

    1
    client.unsubscribe(stream)
    

  6. 当远端离开房间,本端会收到“peer-leave”事件通知,清理远端用户的资源。具体接口详情请参见peer-leave

    1
    2
    3
    client.on('peer-leave', (event) => {
       // just do something…
    })
    

    event.userId对端用户标识,通过监听“peer-leave事件获得。

    远端用户退出,本端同时会收到“stream-removed”事件通知,可在事件处理函数中,关掉视频窗口。具体接口详情请参见stream-removed

    1
    2
    3
    client.on('stream-removed', (event) => {
       event.stream.close()
    })
    

    通过stream对象调用close方法,该方法会移除之前用“play”创建的 video 标签元素并关闭摄像头、麦克风。

  7. 本端离开房间。具体接口详情请参见leave

    1
    client.leave()
    

    当音视频通话结束时,调用此接口离开房间。

    至此,音视频通话基本流程可以成功运行。