实时音视频 RTC实时音视频 RTC

更新时间:2021/06/28 GMT+08:00
分享

SDK使用

  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:userId, userName:userName, signature:signature, ctime:ctime, role:role} 
    async joinRoom() {
       try{
         await 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
    6
    Stream stream = HRTC.createStream({audio:true,microphoneId:xxx,video:true,cameraId:yyy})
    stream.initialize().then(() => {
      stream.addResolution('90p_1')  //可选的,如果要开启双流可以添加另外一个分辨率的视频
      client.publish(stream)
      stream.play(elementId,{muted:true})   //播放本地流
    }) 
    

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

    1
    2
    3
    4
    client.on('stream-added, (event) => {
      const steam = 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”事件通知,可设置对端窗口,播放对端音视频。

    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。
      • muted:可选,boolean类型,true表示静音,false表示不静音,默认值为false。
      • resolutionId: 可选,string类型,指定要播放的分辨率的视频。默认为分辨率最高的视频。

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

    1
    client.unsubscribe(stream)
    

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

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

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

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

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

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

  7. 本端离开房间。

    1
    client.leave()
    

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

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

分享:

    相关文档

    相关产品