跳到主要内容

观众端（不加房间）

融云 RTC Web SDK 支持直播模式下观众直接通过资源地址（liveUrl）订阅并观看直播，即观众无需加入房间即可订阅直播。

提示

当 SDK 版本 < 5.1.0 时，仅支持通过 liveUrl 直接订阅资源（观众不加房间订阅）。此时，观众通过 liveUrl 订阅主播端资源，但 liveUrl 和 livingType 的分发逻辑需开发者自行实现。

与加入房间订阅方式的对比​

  • SDK < 5.1.0

    仅支持通过 liveUrl 直接订阅观看直播（观众不加房间订阅），liveUrl 和 livingType 的分发逻辑需开发者自行实现。

  • SDK ≥ 5.1.0

    支持观众加入 RTC 房间，并通过房间实例订阅房间内资源。观众用户可以通过加入房间的返回值、房间事件监听器以及房间实例方法获取和订阅资源。

获取直播观众客户端实例​

当观众通过资源地址 liveUrl 订阅主播端资源时，需要先通过 RCRTCClient 实例的 getAudienceClient 方法获取 RCAudienceClient 实例。

该实例仅会在首次获取时初始化一次。

typescript
// 获取 RCAudienceClient 观众端实例
const liveUrlAudienceClient = rtcClient.getAudienceClient()

RCAudienceClient 提供以下方法：

方法说明
subscribe订阅 liveUrl 对应的资源
unsubscribe取消订阅主播资源
registerReportListener注册数据监控监听器 IRCRTCReportListener
registerTrackEventListener注册音视频流事件监听器 IRCRTCTrackEventListener。多次注册会覆盖前一次注册，可通过 registerTrackEventListener(null) 取消注册

流数据监听​

通过 registerTrackEventListener 注册 IRCRTCTrackEventListener，监听远端音视频流状态。

代码示例​

typescript
// 注册流数据监听
liveUrlAudienceClient.registerTrackEventListener({
  /**
   *  当订阅的音视频流通道建立完成时触发，track 已可播放
   * @param track RCRemoteTrack 类实例
   */
  onTrackReady (track: RCRemoteTrack) {
    // 订阅的音视频轨道已连接，可以根据业务需求选择性播放
    if (track.isAudioTrack()) {
      // 音频播放无需传递组件
      track.play()
    } else {
      // 此处的 videoNode 为 <video> 标签元素实例
      track.play(videoNode)
    }
  }
})

订阅资源​

提示

同一时间仅能订阅一个直播间的 liveUrl 资源。如需订阅其他直播间资源，需先取消当前订阅。

调用 RCAudienceClient 实例下的 subscribe 方法订阅直播间资源。

接口​

typescript
liveUrlAudienceClient.subscribe(liveUrl, livingType, mediaType, subTiny)

参数说明​

参数类型必填说明
liveUrlstring是直播资源地址。主播发布资源后获取，由开发者自行实现分发逻辑。
livingTypeRCLivingType是直播类型，有效值为音频、音视频。
mediaTypeRCMediaType是订阅资源类型，有效值为音频、视频、音视频混合流。
subTinyboolean否是否订阅小流。默认为 false。

示例代码​

typescript
/**
 * 订阅直播间资源
 * @param liveUrl 直播资源地址
 * @param livingType 直播间类型，其有效值为 `RCLivingType` 所定义的枚举值
 * @param mediaType 订阅资源类型，其有效值为 `RCMediaType` 所定义的枚举值
 * @param subTiny 当值为 `true` 时将订阅小流，否则订阅大流。默认值为 `false`
 */
const {
  code,
  // tracks 是一个数组，若 code !== RCRTCCode.SUCCESS，则 tracks 长度为 0
  // tracks 最多包含一个 RCRemoteAudioTrack 实例和一个 RCRemoteVideoTrack 实例
  tracks
} = await liveUrlAudienceClient.subscribe(liveUrl, RCLivingType.VIDEO, RCMediaType.AUDIO_VIDEO, false)

if (code !== RCRTCCode.SUCCESS) {
  console.warn('订阅主播资源失败 ->', code)
}

取消订阅​

使用 unsubscribe 方法取消订阅。

接口​

typescript
liveUrlAudienceClient.unsubscribe()

参数说明​

无

示例代码​

typescript
const { code } = await liveUrlAudienceClient.unsubscribe()
最后于 更新