使用 CDN 直播

功能简介

转推 CDN（Content Delivery Network，内容分发网络）指的是将音视频流从 ZEGO 实时音视频云推送到 CDN 的过程。开发者基于该功能可打通 RTC 产品和 CDN 直播产品，方便用户从网页或第三方播放器直接观看和收听直播内容。

当推流端使用第三方推流工具（例如 OBS 软件、网络摄像头 IP Camera 等）将流推到 CDN 时，或使用 ZEGO SDK 转推 CDN 功能将音视频画面推送到第三方 CDN 上时，可使用直接传入 URL 地址的方式进行拉流。

为防止攻击者盗取或伪造您的推流 URL 地址，您可以参考 CDN 推流鉴权，提升您推流使用的安全性。

示例源码下载

请参考 下载示例源码 获取源码。

相关源码请查看 “src/Examples/AdvancedStreaming/StreamByCDN” 目录下的文件。

前提条件

在使用 CDN 直播之前，请确保：

• 已在项目中集成 ZEGO Express SDK，实现基本的实时音视频功能，详情请参考 快速开始 - 集成 和 快速开始 - 实现流程。
• 已在 ZEGO 控制台 创建项目，并申请有效的 AppID，详情请参考 控制台 - 项目管理 中的“项目信息”。

使用步骤

CDN 拉流

方式 1：通过 streamID 拉第三方 CDN 的流

1. 开始推流 请参考 快速开始 - 实现流程 的 “3.3 推流”。

2. 开始拉流 在同一房间内的其他用户将音视频流推送到 ZEGO 实时音视频云后再转推到 ZEGO CDN 时，可以进行如下操作：

   1. 监听 roomStreamUpdate 回调，当回调通知有流新增时，获取其他用户的 streamID，来拉取播放其他刚刚推送的流。
   2. 在 roomStreamUpdate 回调中，调用 startPlayingStream 接口，传入 “streamID” 拉取播放该用户的音视频，并将 resourceMode 参数设置为数字 “1”，表示仅从 CDN 拉流。
   3. 在 CDNVideo 传入用于渲染的 video 标签。
   4. 在 CDNPlayer 传入用于处理 flv 格式的播放器，否则将无法正常拉到 CDN 流。
   5. 通过监听 playerStateUpdate 回调知晓是否成功拉取音视频。
   6. 通过 npm i zego-express-web-cdn-player 下载安装 ZEGO 播放器。

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);
        }
    }
});

方式 2：通过 URL 拉第三方 CDN 的流

1. 开始推流，请参考 快速开始 - 实现流程 的 “3.3 推流”。
2. 当推流成功后，调用 addPublishCdnUrl 增加动态转推至 CDN 的 URL，即可向 CDN 进行音视频流的推送。

/** 推流成功后，开始转推到CDN */

// 推流时使用的流ID
String streamID = "STREAM_ID";
// 需要转推的CDN地址，请开发者按照实际URL填入，streamID为推流的流名，可自定义
String URL = "rtmp://推流域名/接入点/streamID";
const result = await zg.addPublishCdnUrl(streamID, targetURL);
console.warn(result);

3. 调用 removePublishCdnUrl 即可删除动态转推至 CDN 的 URL。调用 removePublishCdnUrl 接口停止转推时，请确保当前流 streamID 是存在的。

// 推流时使用的流ID
const streamID = "STREAM_ID";
// 需要停止转推的CDN地址，请开发者按照实际URL填入，streamID为推流的流名
const URL = "rtmp://推流域名/接入点/streamID";
const result = await zg.removePublishCdnUrl(streamID, targetURL);
console.warn(result);

4. 获取流地址，注册 roomStreamUpdate 回调，已登录房间内流的新增、删除都会触发该回调，通过 “streamList” 返回流对应的播放地址。

zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
    console.log('roomStreamUpdate roomID ', roomID, streamList);
});

5. 开始拉流

videoElement.src = 'https://XXX.m3u8';

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;
}

API 参考列表

相关文档

将流转推到 CDN 过程中，连接断开后如何处理