融云 CDN 插件
依赖包说明
Web 内置 CDN 功能对 RTCLib 及依赖包有版本限制:
-
RTCLib:要求使用
@rongcloud/plugin-rtc@5.1.10
或更高版本。 -
IMLib:具体要求如下:
-
如 IMLib 为 IMLib 5.X,所有版本均支持 Web 内置 CDN 功能。
-
如 IMLib 为 Adapter SDK(
imlib-v4-adapter
或imlib-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 做过多的任务管理。
服务架构图:
主要业务流程图:
服务开通
融云 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 状态同步
-
主播调
joinLivingRoom
加入房间时,如果房间的内置 CDN 被其他主播手动开启或停用,joinLivingRoom
方法会返回房间内的 CDN 开启状态,CDNEnable
为true
时代表开启,为false
时代表停用。const { code, CDNEnable } = await rtcClient.joinLivingRoom('roomId', RCLivingType.VIDEO)
-
主播加入房间后,可通过在 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 直播资源
- 推荐本地下载 VLC 播放器进行播放。
- 如需在页面内播放,可引入第三方插件。例如哔哩哔哩 flv.js、百度 cyberplayer 等。
如何排查播放问题
-
如果 CDN 观看地址不可播放,可先排查观看地址是否在防盗链配置的有效期内。如果超过有效期,可通过获取新 CDN 观看地址解决。
-
如果在使用第三方插件播放 CDN 资源时遇到问题,可先使用 VLC 播放,排除资源本身不可用的问题。
第三方插件参考资源:
如果遇到第三方插件的使用问题,您可以参考第三方插件的集成文档。以下仅列出部分资源:
- cyberplayer 兼容性:https://cloud.baidu.com/doc/MCT/s/zjwvz4w4z
- cyberplayer demo 地址: http://cyberplayer.bcelive.com/demo/new/index.html
直播协议支持对比
下表列出了 VLC 播放器、第三方插件、浏览器等对各直播协议的支持情况:
协议 | VLC | 手机浏览器、PC safari | 哔哩哔哩 flv.js | 百度 cyberplayer |
---|---|---|---|---|
hls | 支持 | 支持 | 支持 | |
flv | 支持 | 支持 (比 cyberplayer 体积小) | 支持 | |
rtmp | 支持 |