SDK使用

更新时间：2025-02-28 GMT+08:00

加入房间前必须有此步骤，检测浏览器是否兼容 SDK。具体接口详情请参见checkSystemRequirements。

     
          async isBrowserSupport() {
    let check = await HRTC.checkSystemRequirements(false, 'sendrecv')
    if (check === true) {
      console.warn('#############browser isSupport: ' + check)
    } else {
      console.error(`#############check browser isSupport error: ${check.getCode()} - ${check.getMsg()}`)
    }
 }

创建客户端。具体接口详情请参见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值的填写具体请参见国家码对照表。
说明：

domain和appId请提交工单获取。

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

     
        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”事件。

创建本地流并发布。具体接口详情请参见createStream、initialize、addResolution、publish、play。

     
        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。如果不传，系统自动设置默认值。

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

     
        client.on('stream-added', (event) => {
  const stream = event.stream
  client.subscribe(stream,{ video:true, audio:true })
})

说明：

       
          如果双流场景：
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-subscribed、play。

     
        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。

     
        client.unsubscribe(stream)

当远端离开房间，本端会收到“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 标签元素并关闭摄像头、麦克风。
本端离开房间。具体接口详情请参见leave。
1

client.leave()
当音视频通话结束时，调用此接口离开房间。

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

父主题： Web SDK

上一篇：开发前准备

下一篇：基本使用逻辑

意见反馈

文档内容是否对您有帮助？

有帮助没帮助

提供反馈

提交成功！非常感谢您的反馈，我们会继续努力做到更好！

系统繁忙，请稍后重试

在使用文档中是否遇到以下问题

内容与产品页面不一致

内容不易理解

缺失示例代码

步骤不可操作

搜不到想要的内容

缺少最佳实践

意见反馈（选填）

0/500

请至少选择一项反馈信息并填写问题反馈

字符长度不能超过500

直接提交取消

SDK使用

意见反馈

文档内容是否对您有帮助？

文档反馈