Introduction

CDN live streaming refers to the process of publishing streams to the CDN (Content Delivery Network), where users can view a live broadcast with a web browser.

You can use transcoding to combine the streams of all hosts in the channel into one stream, or set the audio/video profiles and picture-in-picture layout for the stream to be published to the CDN.

The following figure shows a typical CDN-pushing scenario.

../_images/live_ios_publishing_stream_en.png

Prerequisites

Ensure that you enable the RTMP Converter service before using this function.

  1. Log in Dashboard, and click img in the left navigation menu to go to the Products & Usage page.
  2. Select a project from the drop-down list in the upper-left corner, and click Duration under RTMP Converter.
  3. Click Enable RTMP Converter.
  4. Click Apply to enable the RTMP Converter service and get 500 max concurrent channels.
The number of concurrent channels, N, means that users can push streams to the CDN with transcoding in N channels of media streams.

Now, you can use the function and see the usage statistics.

Implementation

Agora's CDN publishing solution is based on the following API methods to publish streams to the CDN, inject external video streams, transcode, and set the output layout.

In which:

  • The host calls the setLiveTranscoding method to set the transcoding parameters, for example, the canvas settings, after joining a channel. The host still needs to set a 16 × 16 view when only publishing an audio stream to CDN.
  • The host adds or removes a URL with the addPublishStreamUrl and removePublishStreamUrl methods after joining the channel.

Sample Code

// CDN transcoding settings.
LiveTranscoding config;
config.audioSampleRate = TYPE_44100;
config.audioChannels = 2;
config.audioBitrate = 48;
config.width = 640;
config.height = 720;
config.videoFramerate = 30;
config.userCount = 1;  // If userCount > 1, set layout for each user.
config.videoCodecProfile = HIGH;

// Sets the output layout for each user.
LiveTranscoding transcoding = new LiveTranscoding();
LiveTranscoding.TranscodingUser user = new LiveTranscoding.TranscodingUser();
user.uid = 123456;
transcoding.addUser(user);
user.x = 0;
user.audioChannel = 0;
user.y = 0;
user.width = 640;
user.height = 720;

rtcEngine.setLiveTranscoding(transcoding);
// Adds a URL to which the host pushes a stream.
// Set the transcodingEnabled parameter as true to enable the transcoding service. Once transcoding is enabled, you nee to set the live transcoding configurations by calling the setLiveTranscoding method. We do not recommend transcoding in the case of a single host.
rtcEngine.addPublishStreamUrl(url, true);
// Removes a URL to which the host pushes a stream.
rtcEngine.removePublishStreamUrl(url);

Adjusting the Picture-in-picture Layout

Use transcodingUser to adjust the picture-in-picture layout when a channel has multiple hosts.

A host can set transcoding and the layout, for example, the canvas settings and multiple-host window settings, only after joining a channel.

1: Two-host Tile Horizontally

To display the following layout:

../_images/sei_2host.png

Set the parameters as follows:

Canvas:
     width: 640
     height: 360
     backgroundColor: #FFFFFF

User0:
      userId: 123
      x: 0
      y: 0
      width: 320
      height: 360
      zOrder: 1
      alpha: 1.0

User1:
      userId: 456
      x: 320
      y: 0
      width: 320
      height: 360
      zOrder: 1
      alpha: 1.0

Example 2: Three-host Tile Vertically

To display the following layout:

../_images/sei_3host.png

Set the parameters as follows:

Canvas:
      width: 360
      height: 640
      backgroundColor: #FFFFFF

   User0:
      userId: 123
      x: 0
      y: 0
      width: 360
      height: 640
      zOrder: 1
      alpha: 1.0

   User1:
       userId: 456
       x: 0
       y: 320
       width: 180
       height: 320
       zOrder: 2
       alpha: 1.0

   User2:
       userId: 789
       x: 180
       y: 320
       width: 180
       height: 320
       zOrder: 2
       alpha: 1.0

Example 3: One Full Screen + Floating Thumbnails

To display the following layout:

../_images/sei_random.png

Set the parameters as follows:

Canvas:
   width: 360
   height: 640
   backgroundColor: #FFFFFF

User0:
   userId: 123
   x: 0
   y: 0
   width: 360
   height: 640
   zOrder: 1
   alpha: 1.0

User1:
    userId: 456
    x: 45
    y: 390
    width: 110
    height: 213
    zOrder: 2
    alpha: 1.0

User2:
    userId: 789
    x: 185
    y: 390
    width: 110
    height: 213
    zOrder: 2
    alpha: 1.0