跳到主要内容

观众端(不加房间)

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

提示

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

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

  • 如果 SDK < 5.1.0,仅支持直接通过资源地址liveUrl 订阅并观看直播(观众不加房间订阅)。liveUrllivingType 数据的分发需开发者自行实现。
  • 如果 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. 获取 RCLivingTypeRCMediaType 枚举定义。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()