跳到主要内容

观众端（不加房间）

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

提示

如果 SDK 版本 < 5.1.0，仅支持直接通过资源地址 liveUrl 订阅（观众不加房间订阅）。直播的观众通过 liveUrl 的方式去订阅主播端，但 liveUrl 和 livingType 数据的分发需开发者自行实现。

与加入房间订阅观看直播方式的对比​

  • 如果 SDK < 5.1.0，仅支持直接通过资源地址liveUrl 订阅并观看直播（观众不加房间订阅）。liveUrl 和 livingType 数据的分发需开发者自行实现。
  • 如果 SDK ≧ 5.1.0，支持观众加入 RTC 房间，并订阅房间内资源。观众角色的用户可以加入房间的返回值、房间事件监听器、房间实例的获取资源方法获取房间内的资源。

RCAudienceClient​

如果观众需要通过资源地址 liveUrl 订阅主播端资源，需要先使用 RCRTCClient 实例的 getAudienceClient 方法获取 RCAudienceClient 实例。该类型实例仅会在初次获取时初始化一次。

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

RCAudienceClient 提供以下方法：

方法说明
subscribe订阅 liveUrl 资源。
subscribe取消订阅主播资源。
registerReportListener注册数据监控监听器 IRCRTCReportListener。
registerTrackEventListener注册流事件监听 IRCRTCTrackEventListener，多次注册会导致后者覆盖前者，可以通过使用 registerTrackEventListener(null) 取消注册。

流数据监听​

使用 registerTrackEventListener 注册 IRCRTCTrackEventListener。

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

订阅资源​

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

  1. 获取 RCLivingType、RCMediaType 枚举定义。livingType 是主播建立直播房间时所选择的直播间类型，由开发者自行实现分发逻辑。

    // 获取 RCLivingType, RCMediaType 枚举定义
    import { RCLivingType, RCMediaType } from '@rongcloud/plugin-rtc'

  2. 订阅直播间资源。订阅资源所需的 liveUrl 由主播发布资源后获取，由开发者自行实现分发逻辑。

    /*
     * 订阅直播间资源
     * @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 取消订阅。

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