转推 CDN(Content Delivery Network,内容分发网络)指的是将音视频流从 ZEGO 实时音视频云推送到 CDN 的过程。开发者基于该功能可打通 RTC 产品和 CDN 直播产品,方便用户从网页或第三方播放器直接观看和收听直播内容。
当推流端使用第三方推流工具(例如 OBS 软件、网络摄像头 IP Camera 等)将流推到 CDN 时,或使用 ZEGO SDK 转推 CDN 功能将音视频画面推送到第三方 CDN 上时,可使用直接传入 URL 地址的方式进行拉流。
为防止攻击者盗取或伪造您的推流 URL 地址,您可以参考 CDN 推流鉴权,提升您推流使用的安全性。
请参考 下载示例源码 获取源码。
相关源码请查看 “src/Examples/AdvancedStreaming/StreamByCDN” 目录下的文件。
在使用 CDN 直播之前,请确保:
CDN 直播功能不是默认开启的,使用前请在 ZEGO 控制台 自助开通(开通步骤请参考 项目管理 - 服务配置 中的“CDN”),或联系 ZEGO 技术支持开通。
开始推流 请参考 快速开始 - 实现流程 的 “3.3 推流”。
开始拉流 在同一房间内的其他用户将音视频流推送到 ZEGO 实时音视频云后再转推到 ZEGO CDN 时,可以进行如下操作:
npm i zego-express-web-cdn-player
下载安装 ZEGO 播放器。目前 ZegoCDNPlayer 仅支持播放 flv 格式文件。
import { ZegoCDNPlayer } from "zego-express-web-cdn-player";
zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
if (updateType == 'ADD') {
// 流新增
for (var i = 0; i < streamList.length; i++) {
console.log('房间',roomID,'内新增了流:', streamList[i]['streamID'])
$(".remoteVideo").append(
$(
`<video id=${streamList[i].streamID} autoplay muted playsinline con trols></video>`
)
);
const video = $(".remoteVideo video:last")[0];
const playOption = {
CDNVideo: video,
CDNPlayer: new ZegoCDNPlayer();
resourceMode: 1, // CDN
};
// streamList 中有对应流的 streamID
zg.startPlayingStream(streamID, playOption);
}
const message = "其他用户的视频流streamID: " + streamID.toString();
} else if (updateType == 'DELETE') {
// 流删除
for (var i = 0; i < streamList.length; i++) {
console.log('房间',roomID,'内减少了流:', streamList[i]['streamID'])
// streamList 中有对应流的 streamID
zg.stopPlayingStream(streamID);
}
}
});
/** 推流成功后,开始转推到CDN */
// 推流时使用的流ID
String streamID = "STREAM_ID";
// 需要转推的CDN地址,请开发者按照实际URL填入,streamID为推流的流名,可自定义
String URL = "rtmp://推流域名/接入点/streamID";
const result = await zg.addPublishCdnUrl(streamID, targetURL);
console.warn(result);
// 推流时使用的流ID
const streamID = "STREAM_ID";
// 需要停止转推的CDN地址,请开发者按照实际URL填入,streamID为推流的流名
const URL = "rtmp://推流域名/接入点/streamID";
const result = await zg.removePublishCdnUrl(streamID, targetURL);
console.warn(result);
zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
console.log('roomStreamUpdate roomID ', roomID, streamList);
});
目前 Web 平台播放 rtmp 地址需要依赖于 flash 插件,如果浏览器不支持 flash 插件,则该浏览器就不能播放 rtmp 地址的流。
Safari 浏览器限制不能播放 flv 的流,只能播放 m3u8 或 rtmp 地址的流。
CDN 相关地址默认为 HTTP 格式,若您出于安全考虑,或者想使用 Web 端进行 CDN 观众拉流,则需要配置 HTTPS,详情请参考:控制台 - 服务配置 - CDN。
在 Safari 浏览器上,设置 “video” 标签的 “src” 属性值,通过 hls 播放地址拉流。
videoElement.src = 'https://XXX.m3u8';
在其他浏览器上(Safari 除外),使用 “video” 标签,通过 flv 播放地址拉流。
if (flvjs.isSupported()) {
//若支持flv.js
flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: flvUrl,
hasAudio: true,//是否需要音频
hasVideo: true,//是否需要视频
});
flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () {
console.error('LOADING_COMPLETE');
flvPlayer.play();
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
videoElement.muted = false;
videoElement.controls = true;
}
方法 | 描述 |
---|---|
startPublishingStream | 开始推流 |
addPublishCDNURL | 增加转推至 CDN 的 URL |
removePublishCDNURL | 删除转推至 CDN 的 URL |
roomStreamUpdate | 订阅拉流更新回调 |
联系我们
文档反馈