文档首页/ 实时音视频 SparkRTC/ 客户端SDK参考/ Web SDK/ SDK使用
更新时间：2024-07-02 GMT+08:00
查看PDF
分享

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值的填写具体请参见国家码对照表。

    domain和appId请参考应用管理进行获取。

  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. 创建本地流并发布。具体接口详情请参见createStream、initialize、addResolution、publish、play。 

    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-added、subscribe、getStreamInfo。 

    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-subscribed、play。

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

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

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

父主题： Web SDK

相关文档