实时音视频
  • iOS
  • Android
  • macOS
  • Windows
  • HarmonyOS
  • Linux
  • Web : JavaScript
  • 小程序
  • Flutter
  • Electron
  • Unity3D
  • uni-app
  • React Native
  • Cocos Creator
  • 产品简介
  • 下载
  • 体验 App
  • 快速开始
    • 跑通示例源码
    • 集成 SDK
    • 实现视频通话
    • 场景化音视频配置
  • 基础功能
  • 进阶功能
  • 最佳实践
  • 常见错误码
  • 服务端 API
  • 客户端 API
  • 常见问题

使用 CDN 直播

更新时间:2022-12-01 17:16

功能简介

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

/Pics/Common/ZegoExpressEngine/relay_cdn.png

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

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

示例源码下载

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

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

前提条件

在使用 CDN 直播之前,请确保:

CDN 直播功能不是默认开启的,使用前请在 ZEGO 控制台 自助开通(开通步骤请参考 项目管理 - 服务配置 中的“CDN”),或联系 ZEGO 技术支持开通。

使用步骤

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 播放器。

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

方式 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);
  1. 调用 removePublishCdnUrl 即可删除动态转推至 CDN 的 URL。调用 removePublishCdnUrl 接口停止转推时,请确保当前流 streamID 是存在的。
  • 若开发者有转推到多家 CDN 厂商的需求,可使用同一个流 ID 多次调用转推 API(URL 需要不同)。
  • 若开发者转推到多家 CDN 后,停止转推时也同样需要调用多次来停止所有转推的流。
  • 若开发者转推到多家 CDN 后,可从 CDN 回调状态通知的列表参数中获取到每条转推流的状态变更通知。
// 推流时使用的流ID
const streamID = "STREAM_ID";
// 需要停止转推的CDN地址,请开发者按照实际URL填入,streamID为推流的流名
const URL = "rtmp://推流域名/接入点/streamID";
const result = await zg.removePublishCdnUrl(streamID, targetURL);
console.warn(result);
  1. 获取流地址,注册 roomStreamUpdate 回调,已登录房间内流的新增、删除都会触发该回调,通过 “streamList” 返回流对应的播放地址。
zg.on('roomStreamUpdate', (roomID, updateType, streamList) => {
    console.log('roomStreamUpdate roomID ', roomID, streamList);
});
  1. 开始拉流
  • 目前 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;
    }
  • API 参考列表

    方法 描述
    startPublishingStream 开始推流
    addPublishCDNURL 增加转推至 CDN 的 URL
    removePublishCDNURL 删除转推至 CDN 的 URL
    roomStreamUpdate 订阅拉流更新回调

    相关文档

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