跳到主要内容

观众端(加入房间)

在直播模式下,观众角色的用户可以在进入音视频房间后订阅远端主播角色用户已发布的资源。

获取房间内的资源

直播模式下主播角色用户发布的音视频流,会在服务端另行合并生成一道音频合流和一道视频合流。观众角色用户通常订阅“合流”(也可以直接订阅原始音视频流,简称“分流”)。

提示

观众订阅分流适合小众玩法灵活的直播业务场景。比如观众被分成多种角色,需要选择性观看或收听部分主播发布的资源;又或者不同观众的展示布局并不相同,甚至可以随时切换布局的情况。

加入音视频房间的观众角色用户可以通过以下方式获取资源:

  • 加入房间的返回数据(要求 SDK ≧ 5.2.3)。使用 joinLivingRoomAsAudience 加入房间后,SDK 会返回以下数据(房间内已有资源不会通过监听通知业务层):

    • RTCTracks:房间内已有的主播资源
    • MCUTracks:房间内已有的合流资源
    • CDNUris:房间内置 CDN 信息
    • userIds:房间内主播列表
    // 获取 RCLivingType 枚举定义
    import { RCLivingType } from '@rongcloud/plugin-rtc'

    /*
    * 观众加入直播房间调用
    * @param roomId 房间 Id
    * @param livingType 直播类型
    * * 当 `livingType` 值为 `RCLivingType.AUDIO` 是表示音频直播
    * * 当 `livingType` 值为 `RCLivingType.AUDIO_VIDEO` 是表示音视频直播
    */
    // 从 5.2.3 开始,加入房间时可返回 RTCTracks、MCUTracks、CDNUris、userIds
    const { room: audienceRoom, RTCTracks, MCUTracks, CDNUris, userIds, code } = await rtcClient.joinLivingRoomAsAudience('roomId', RCLivingType.AUDIO_VIDEO)
    // 若加入失败,则 room 值为 undefined
    if (code !== RCRTCCode.SUCCESS) {
    console.log('join room as audience failed:', code)
    }
  • 观众角色的房间事件监听。观众角色的用户获取 RCAudienceLivingRoom 房间实例后,可以使用 registerRoomEventListener 注册房间事件监听器 IAudienceRoomEventListener。下表列出了 IAudienceRoomEventListener 与资源相关的部分方法:

    方法返回属性说明
    onTrackPublishRCRemoteTrack[](SDK ≧ 5.1.0)返回新发布的合流音轨与视轨数据列表,包含新发布的 RCRemoteAudioTrackRCRemoteVideoTrack 实例。观众角色用户通常仅需订阅合流
    onTrackUnpublishRCRemoteTrack[](SDK ≧ 5.1.0)返回被取消发布的合流音轨与视轨数据列表。当房间内全部主播退出房间时,SDK 内部会取消对资源的订阅,业务层仅需处理 UI 业务。
    onAnchorTrackPublishRCRemoteTrack[](SDK ≧ 5.1.5)返回主播新发布的音轨与视轨数据列表,包含新发布的 RCRemoteAudioTrackRCRemoteVideoTrack 实例。
    onAnchorTrackUnpublishRCRemoteTrack[](SDK ≧ 5.1.5)返回被主播取消发布的音轨与视轨数据列表。当资源被取消发布时,SDK 内部会取消对相关资源的订阅,业务层仅需处理 UI 业务。
    // audienceRoom 为观众加入房间返回的 room
    // 注册房间事件监听器,重复注册时,仅最后一次有效
    audienceRoom.registerRoomEventListener({
    /**
    * 主播加入
    * @param userIds 加入的主播 id 列表
    */
    onAnchorJoin (userIds: string[]) {
    },
    /**
    * 主播离开
    * @param userIds 离开的主播 id 列表
    */
    onAnchorLeave (userIds: string[]) {
    },
    /*
    * 房间内直播合流资源发布
    * @param track RCRemoteTrack 类实例
    * * 房间类型以第一个加入房间用户设置的直播类型为准
    * * 房间直播类型为 RCLivingType.AUDIO_VIDEO ,tracks 包含 RCRemoteAudioTrack 与 RCRemoteVideoTrack 实例
    * * 直播类型为 RCLivingType.AUDIO , tracks 仅包含 RCRemoteAudioTrack 实例
    * * 触发时机: 主播发布资源后
    */
    onTrackPublish (tracks: RCRemoteTrack[]) {
    },
    /*
    * 房间内直播合流资源取消发布
    * @param track RCRemoteTrack 类实例
    * * 触发时机: 全部主播退出房间(因资源为多个主播发布的合流资源,单个主播取消发布不会触发)
    */
    onTrackUnpublish (tracks: RCRemoteTrack[]) {
    },
    /*
    * 房间内主播资源发布
    * @param track RCRemoteTrack 类实例
    * * 触发时机: 主播发布资源后
    */
    onAnchorTrackPublish (tracks: RCRemoteTrack[]){
    },
    /*
    * 房间内主播资源取消发布
    * @param track RCRemoteTrack 类实例
    * * 触发时机: 主播取消发布资源后
    */
    onAnchorTrackUnpublish (tracks: RCRemoteTrack[]){
    },
    /**
    * 订阅的音视频流通道已建立, track 已可以进行播放
    * @param track RCRemoteTrack 类实例
    */
    onTrackReady (track: RCRemoteTrack) {
    // 订阅的音视频轨道已连接,可以根据业务需求选择性播放
    if (track.isAudioTrack()) {
    // 音频播放无需传递组件
    track.play()
    } else {
    // 此处的 videoNode 为 <video> 标签元素实例
    track.play(videoNode)
    }
    }
    })
  • 通过 RCAudienceLivingRoom 房间实例获取。RCAudienceLivingRoom 房间实例上提供了以下主动获取资源的方法:

    方法返回属性说明
    getRemoteMCUTracks()RCRemoteTrack[](SDK ≧ 5.2.3)返回房间内的合流音轨与视轨数据列表,包含新发布的 RCRemoteAudioTrackRCRemoteVideoTrack 实例。观众角色用户通常仅需订阅合流
    getRemoteRTCTracks()RCRemoteTrack[](SDK ≧ 5.2.3)返回主播发布的音轨与视轨数据列表,包含新发布的 RCRemoteAudioTrackRCRemoteVideoTrack 实例。
    getCDNInfo()CDNInfo(SDK ≧ 5.2.3)返回房间内 CDN 资源状态(是否开启、分辨率、帧率)。

订阅资源

观众加入房间并获取资源后,使用 subscribe 方法订阅资源:

const { code } = await audienceRoom.subscribe(tracks)
if (code !== RCRTCCode.SUCCESS) {
console.log('资源订阅失败 ->', code)
}

仅在观众角色订阅分流,且远端主播发布资源时设置了发布大小流,则订阅对方视频流时,可选择订阅对方的视频小流,以节省下行带宽。订阅小流仅在对方发布了小流的情况下有效,若对方并未发布小流,接收的仍然是对方的大流数据

const { code } = await audienceRoom.subscribe([
// 音频不支持大小流
audioTrack,
{
track: videoTrack,
subTiny: true // 订阅小流
}
])

取消订阅

使用 unsubscribe 取消订阅。

// 按业务需求选择取消订阅资源
const { code } = await audienceRoom.unsubscribe(tracks)
if (code !== RCRTCCode.SUCCESS) {
console.log('资源取消订阅失败:', code)
}