Using CDN for Live Streaming

Feature Overview

When the publishing end uses third-party publishing tools (such as OBS software, IP cameras, etc.) to publish streams to CDN, or uses ZEGO SDK's CDN relay feature to push audio and video to third-party CDNs, audiences can watch the live stream in real-time by playing streams from the CDN.

Relaying to CDN (Content Delivery Network) refers to the process of pushing audio and video streams from ZEGOCLOUD to CDN. Based on this feature, developers can integrate RTC products with CDN live streaming products, allowing users to directly watch and listen to live content from web pages or third-party players.

To prevent attackers from stealing or forging your publishing URL, you can refer to CDN Stream Publishing Authentication to enhance the security of your stream publishing.

Example Source Code Download

Please refer to Download Example Source Code to get the source code.

For related source code, please view files in the "src/Examples/AdvancedStreaming/StreamByCDN" directory.

Prerequisites

Before using CDN live streaming, ensure that:

• You have created a project in the ZEGOCLOUD Console and applied for a valid AppID and Server address. For details, please refer to Console - Project Information.
• You have integrated the ZEGO Express SDK into your project and implemented basic audio and video stream publishing and playing functions. For details, please refer to Quick Start - Integration and Quick Start - Implementation Process.

Relay to CDN

Start Publishing Stream

Please refer to "Publish Stream" in Quick Start - Implementation Process to publish audio and video streams to ZEGOCLOUD.

Start Relaying

After the stream is successfully published, call the addPublishCdnUrl interface to add a URL for dynamic relaying to CDN, which allows pushing audio and video streams to the CDN.

// After successful stream publishing, start relaying to CDN

// Stream ID used when publishing
String streamID = "STREAM_ID"; // CDN URL to relay to, please fill in the actual URL. streamID is the stream name for publishing and can be customized
String URL = "rtmp://publishing-domain-name/access-point/streamID";
const result = await zg.addPublishCdnUrl(streamID, targetURL);
console.warn(result);

// After successful stream publishing, start relaying to CDN

// Stream ID used when publishing
String streamID = "STREAM_ID"; // CDN URL to relay to, please fill in the actual URL. streamID is the stream name for publishing and can be customized
String URL = "rtmp://publishing-domain-name/access-point/streamID";
const result = await zg.addPublishCdnUrl(streamID, targetURL);
console.warn(result);

Stop Relaying

Call the removePublishCdnUrl interface to remove the URL for dynamic relaying to CDN. When calling the removePublishCdnUrl interface to stop relaying, please ensure that the current stream streamID exists.

// Stream ID used when publishing
const streamID = "STREAM_ID";
// CDN URL to stop relaying, please fill in the actual URL. streamID is the stream name for publishing
const URL = "rtmp://publishing-domain-name/access-point/streamID";
const result = await zg.removePublishCdnUrl(streamID, targetURL);
console.warn(result);

// Stream ID used when publishing
const streamID = "STREAM_ID";
// CDN URL to stop relaying, please fill in the actual URL. streamID is the stream name for publishing
const URL = "rtmp://publishing-domain-name/access-point/streamID";
const result = await zg.removePublishCdnUrl(streamID, targetURL);
console.warn(result);

Get Stream Address

Register the roomStreamUpdate callback. The addition or deletion of streams in the logged-in room will trigger this callback, which returns the corresponding playback addresses for the streams through "streamList".

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

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

Start Playing Stream

Developers can play streams using any of the following methods.

Method 1: Integrate Player Plugin to Play Stream

ZEGO's self-developed web player plugin supports playing CDN live streaming in H.265 and H.264 formats. It can be quickly integrated into web applications, providing developers with stable and smooth CDN live streaming capabilities. For details, please refer to Player Overview.

1. Please refer to Player Plugin - Integration Guide to integrate the player plugin and complete operations such as instantiating the player plugin.

2. Set the URL address and call the player plugin's ZegoExpressPlayer > play interface to play the CDN live stream.

   player.src = "http://xxxx/livestream/stream.flv"; // Currently only supports http-flv format resources
   playButton.onclick = () => {
       player.play();
   };

   player.src = "http://xxxx/livestream/stream.flv"; // Currently only supports http-flv format resources
   playButton.onclick = () => {
       player.play();
   };

Method 2: Play Stream Based on Browser Video Tag

• On Safari browser, set the "src" attribute value of the "video" tag to play streams through the hls playback address.

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

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

• On other browsers (except Safari), use the "video" tag to play streams through the flv playback address.

  if (flvjs.isSupported()) {
      //If flv.js is supported
      flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: flvUrl,
          hasAudio: true,//Whether audio is needed
          hasVideo: true,//Whether video is needed
     });
     flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () {
         console.error('LOADING_COMPLETE');
         flvPlayer.play();
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    videoElement.muted = false;
    videoElement.controls = true;
  }

  if (flvjs.isSupported()) {
      //If flv.js is supported
      flvPlayer = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: flvUrl,
          hasAudio: true,//Whether audio is needed
          hasVideo: true,//Whether video is needed
     });
     flvPlayer.on(flvjs.Events.LOADING_COMPLETE, function () {
         console.error('LOADING_COMPLETE');
         flvPlayer.play();
    });
    flvPlayer.attachMediaElement(videoElement);
    flvPlayer.load();
    videoElement.muted = false;
    videoElement.controls = true;
  }

Default Relay to CDN

Start Publishing Stream

Please refer to "Publish Stream" in Quick Start - Implementation Process to publish audio and video streams to ZEGOCLOUD.

At this time, all live streams published by users using ZEGO Express SDK to ZEGO Audio and Video Cloud will be relayed to CDN. Currently, only ZEGO's own CDN is supported.

Start Playing Stream

Starting from Express Web SDK version 3.3.0, you can play CDN live streams by using ZEGO's self-developed web Player Plugin (version 1.3.0 and above). This player plugin supports playing CDN live streaming in H.265 and H.264 formats, can be quickly integrated into web applications, and provides developers with stable and smooth CDN live streaming capabilities. For details, please refer to Player Overview.

1. Please refer to Player Plugin - Integration Guide to integrate the player plugin and complete operations such as instantiating the player plugin.

2. Listen to the SDK's roomStreamUpdate callback. When the callback notifies that a stream has been added, get other users' streamID to play the stream just published by others.

3. In the roomStreamUpdate callback, call the startPlayingStream interface and pass in "streamID" to play the user's audio and video. Set the resourceMode parameter to the number "1", indicating playing streams only from CDN.

4. Pass the generated player instance in CDNPlayer, otherwise you will not be able to successfully pull CDN streams.

5. Listen to the playerStateUpdate callback to receive notifications about whether audio and video were successfully played.

<body>
    ...
    <div id="player-container" zg-width="640" zg-height="360"></div>
    ...
    <!-- Currently the player plugin only supports script tag import -->
    <script src="./zego-express-player/ZegoExpressPlayer-1.3.0.js"></script>
</body>

<body>
    ...
    <div id="player-container" zg-width="640" zg-height="360"></div>
    ...
    <!-- Currently the player plugin only supports script tag import -->
    <script src="./zego-express-player/ZegoExpressPlayer-1.3.0.js"></script>
</body>

...

zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // Stream added
        for (var i = 0; i < streamList.length; i++) {
            console.log('Room',roomID,'stream added:', streamList[i]['streamID'])
            const playOption = {
                resourceMode: 1, // CDN
                CDNPlayer: new ZegoExpressPlayer(zg, {
                    container: document.getElementById("player-container"),
                    mode: "live"
                });
            };
            // streamList contains the corresponding stream's streamID
            zg.startPlayingStream(streamID, playOption);
        }
        const message = "Other user's video stream streamID: " + streamID.toString();
    } else if (updateType == 'DELETE') {
        // Stream deleted
        for (var i = 0; i < streamList.length; i++) {
            console.log('Room',roomID,'stream removed:', streamList[i]['streamID'])
            // streamList contains the corresponding stream's streamID
            zg.stopPlayingStream(streamID);
          }
       }
});

zg.startPlayingStream(streamID, playOption);

...

zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    if (updateType == 'ADD') {
        // Stream added
        for (var i = 0; i < streamList.length; i++) {
            console.log('Room',roomID,'stream added:', streamList[i]['streamID'])
            const playOption = {
                resourceMode: 1, // CDN
                CDNPlayer: new ZegoExpressPlayer(zg, {
                    container: document.getElementById("player-container"),
                    mode: "live"
                });
            };
            // streamList contains the corresponding stream's streamID
            zg.startPlayingStream(streamID, playOption);
        }
        const message = "Other user's video stream streamID: " + streamID.toString();
    } else if (updateType == 'DELETE') {
        // Stream deleted
        for (var i = 0; i < streamList.length; i++) {
            console.log('Room',roomID,'stream removed:', streamList[i]['streamID'])
            // streamList contains the corresponding stream's streamID
            zg.stopPlayingStream(streamID);
          }
       }
});

zg.startPlayingStream(streamID, playOption);

Related Documentation

How to handle disconnection during the process of relaying streams to CDN?