文档首页 > > SDK参考> Web SDK> SDK使用

SDK使用

分享
更新时间:2021/01/07 GMT+08:00
  1. 检测浏览器是否兼容SDK。

    1
    2
    3
    4
    5
    6
    let isMatch = HRTC.checkSystemRequirements()
    if(isMatch) {
      console.log(兼容)
    } else {
      console.log(不兼容)
    }
    

  2. 创建客户端。

    1
    2
    let config = {appId,domain}
    let client = HRTC.createClient(config)
    
    • domain:域名。
    • appId:应用ID,只有App ID相同的应用程序才能进入同一个房间进行互通。

    domainappId提交工单申请

  3. 加入房间。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    JoinConfig option = {userId, userName, signature, ctime, role} 
    async joinRoom {
       try{
         await this.client.join(roomId, option)
         console.log(加入成功)
       } catch(e){
         console.log(加入失败)
       }
    }
    
    • userId:本端用户唯一标识。
    • userName:用户昵称,该昵称为UTF-8编码。
    • signature:鉴权签名字串,应用开发者需要向远端服务器获取鉴权签名。

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

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

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

  4. 创建本地流并发布。

    1
    2
    3
    4
    5
    Stream stream = HRTC.createStream({audio:true,microphoneId:xxx,video:true,cameraId:yyy})
    stream.initialize().then(() => {
      this.client.publish(stream)
      stream.play(elementId,{muted:true})   //播放本地流
    }) 
    

  5. 当收到服务器发送的“stream-added”事件通知时,可以订阅远端媒体。

    1
    2
    3
    4
    this.client.on('stream-added, (event) => {
      const steam = event.stream
      this.client.subscribe(stream,{video:true, audio:true})
    }
    

    订阅完成之后,本端会收到“stream-subscribed”事件通知,可设置对端窗口,播放对端音视频。

    1
    2
    3
    4
    this.client.on('stream-subscribed', (event) => {
       const stream = event.stream
       stream.play(elementId, { objectFit: contain, muted: true})
    }
    
    • elementId:HTML <div>标签 ID。
    • 播放选项参数:
      • objectFit:必选,string类型,取值包括contain、cover和fill。
      • muted:可选,boolean类型,true表示静音,false表示不静音,默认值为false。

    若是不想观看对端,则可取消订阅对端音视频:

    1
    this.client.unsubscribe(stream)
    

  6. 当远端离开房间,本端会收到“peer-leave”事件通知,清理远端用户的资源。

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

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

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

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

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

  7. 本端离开房间。

    1
    this.client.leave()
    

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

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

分享:

    相关文档

    相关产品

文档是否有解决您的问题?

提交成功!非常感谢您的反馈,我们会继续努力做到更好!
反馈提交失败,请稍后再试!

*必选

请至少选择或填写一项反馈信息

字符长度不能超过200

提交反馈 取消

如您有其它疑问,您也可以通过华为云社区问答频道来与我们联系探讨

智能客服提问云社区提问