跳到主要内容

融云 CDN 插件

依赖包说明

Web 内置 CDN 功能对 RTCLib 及依赖包有版本限制:

  • RTCLib:要求使用 @rongcloud/plugin-rtc@5.1.10 或更高版本。

  • IMLib:具体要求如下:

    • 如 IMLib 为 IMLib 5.X,所有版本均支持 Web 内置 CDN 功能。

    • 如 IMLib 为 Adapter SDK(imlib-v4-adapterimlib-v4-adapter),均支持 Web 内置 CDN 功能。

    • 如仍使用旧版 IMLib v2/v4,请注意存在以下最低版本限制(建议替换升级为对应的 Adapter SDK):

      SDK包名最低版本
      IMLib v2@rongcloud/imlib-v2@2.9.9
      IMLib v4@rongcloud/imlib-v4@4.4.9

场景描述

当您使用 RTC SDK 做直播应用时,可以选择用 CDN 分发直播媒体流。在控制台开启 融云 CDN 服务并配置域名等信息后,观众端 APP 可以调接口来选择订阅 CDN 链路或者 RTC 低延迟链路的直播流。

使用 CDN 拉流时观众端默认按 CDN 服务输出的视频格式拉流,也可以调接口设置指定的拉流分辨率、码率、帧率( 说明:会触发 CDN 转码服务)。

需要说明的是主播端还是用 RTC 协议发布音视频资源,资源由融云 Server 来接收并转协议到 RTMP 并推给 CDN。此外观众端 SDK 可以感知到主播是否推流,服务端合流情况,无需 App Server 做过多的任务管理。

服务架构图:

(height=400)

主要业务流程图:

(height=400)

服务开通

融云 CDN 是付费增值服务,且需要开通后才能使用。详见融云 CDN 服务配置

主播

提示

以下示例代码中的 room 指加入房间成功后获取到的房间实例。

开启/停用内置 CDN

如果您在控制台配置融云 CDN 为手动模式,可调用 enableInnerCDN 开启、停用向 CDN 推流。

提示

房间内需有资源才可操作内置 CDN

API 参考:enableInnerCDN

/**
* 开启/停用推 CDN
* @params enable true 为开启、false 为停用
*/
const { code } = await room.enableInnerCDN(enable: boolean)

主播设置 CDN 资源分辨率和帧率

具体可参考合流布局

API 参考:setOutputVideoResolution

API 参考:setOutputVideoFPS

import { RCMCUConfigBuilder } from '@rongcloud/plugin-rtc'

// 获取构建器实例
const builder: RCMCUConfigBuilder = (room as RCLivingRoom).getMCUConfigBuilder()

// 设置视频分辨率
builder.setOutputVideoResolution(RCResolution.W640_H480)
// 设置视频帧率
builder.setOutputVideoFPS(RCFrameRate.FPS_15)

// 上传配置给 media server 以修改最终合流效果
const { code } = await builder.flush()

主播端之间 CDN 状态同步

  1. 主播调 joinLivingRoom 加入房间时,如果房间的内置 CDN 被其他主播手动开启或停用,joinLivingRoom 方法会返回房间内的 CDN 开启状态,CDNEnabletrue 时代表开启,为 false 时代表停用。

    const { code, CDNEnable } = await rtcClient.joinLivingRoom('roomId', RCLivingType.VIDEO)
  2. 主播加入房间后,可通过在 registerRoomEventListener 中增加注册 onCDNEnableChange,监听房间内 CDN 开启状态的变化。在房间内其他主播调 enableInnerCDN 方法开启或停用内置 CDN 时可收到通知。详细步骤可参考房间事件监听器

    // 注册房间事件监听器,重复注册时,仅最后一次注册有效
    room.registerRoomEventListener({
    /**
    * 房间内 CDN 状态被改变时触发
    * @param enable true 为开启、false 为停用
    */
    onCDNEnableChange (enable: boolean) {
    console.log('onCDNEnableChange', enable);
    }
    })

观众

提示

以下示例代码中的 room 指加入房间成功后获取到的房间实例。

设置 CDN 观看地址参数

如需修改 CDN 观看地址相关参数,可在初始化 RTCLib 时传入以下参数:

  • pullInnerCDNProtocol:设置观看地址直播拉流协议
  • pullInnerCDNUseHttps :设置观看地址是否使用 https

具体可参考 初始化 以及 IRCRTCInitOptions

获取房间内 CDN 观看地址

API 参考:getCDNPlayUrl

/**
* 获取 CDN 资源对应的直播观看地址
* @params resolution 分辨率,不传时,获取到的资源分辨率为主播端 MCU 资源的宽高
* @params fps 帧率,不传时,获取到的资源帧率为主播端 MCU 资源的帧率
* @returns CDNPlayUrl 为一个协议为 rtmp、flv 或 hls 的直播观看地址
*/
const { code, CDNPlayUrl } = await (room as RCAudienceLivingRoom).getCDNPlayUrl(resolution?: RCResolution, fps?: RCFrameRate)

监听房间内 CDN 资源变动

观众加入房间后,可通过在 registerRoomEventListener 中增加注册以下事件,监听主播端 CDN 资源变动。

// 注册房间事件监听器,重复注册时,仅最后一次注册有效
room.registerRoomEventListener({
/**
* 房间内主播把发布的资源推至 CDN 时触发
* CDNInfo 包含分辨率和帧率
*/
onCDNInfoEnable (CDNInfo: {resolution: RCResolution, fps: RCFrameRate}) {
console.log('onCDNInfoEnable', CDNInfo);
},
/**
* 主播停止推 CDN 时触发
*/
onCDNInfoDisable () {
console.log('onCDNInfoDisable');
}
/**
* 主播改变推 CDN 的分辨率或帧率时触发
* CDNInfo 包含分辨率和帧率
*/
onCDNInfoChange (CDNInfo: {resolution: RCResolution, fps: RCFrameRate}) {
console.log('onCDNInfoChange', CDNInfo);
}
})

播放 CDN 直播资源

如何排查播放问题

  • 如果 CDN 观看地址不可播放,可先排查观看地址是否在防盗链配置的有效期内。如果超过有效期,可通过获取新 CDN 观看地址解决。

  • 如果在使用第三方插件播放 CDN 资源时遇到问题,可先使用 VLC 播放,排除资源本身不可用的问题。

    第三方插件参考资源

    如果遇到第三方插件的使用问题,您可以参考第三方插件的集成文档。以下仅列出部分资源:

直播协议支持对比

下表列出了 VLC 播放器、第三方插件、浏览器等对各直播协议的支持情况:

协议VLC手机浏览器、PC safari哔哩哔哩 flv.js百度 cyberplayer
hls支持支持支持
flv支持支持 (比 cyberplayer 体积小)支持
rtmp支持