Introduction

The process of publishing streams into the CDN (Content Delivery Network) is called CDN live streaming, where users can view the live streaming through a web browser.

When multiple hosts are in a channel in CDN live streaming, transcoding is used to combine the streams of all the hosts into a single stream. Transcoding sets the audio and/or video profiles and the picture-in-picture layout for the stream to be pushed to the CDN.

Prerequisites

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

1. Log in Console, and click 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.

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

Implementation

Before proceeding, ensure that you implement the basic interactive live streaming in your project. See Start Live Interactive Streaming for details.

Refer to the following steps to push streams to the CDN:

1. The host in a channel calls the setLiveTranscoding method to set the transcoding parameters of the media streams (LiveTranscoding), such as the resolution, bitrate, frame rate, and position of the watermark/background image. If you need a transcoded picture, set the picture-in-picture layout for each user in the TranscodingUser class, as described in Sample Code.

   The onTranscodingUpdated callback occurs when the LiveTranscoding class updates and reports the updated information to the local host.

2. The host in a channel can call the addPublishStreamUrl method to add a media stream to the CDN.

   Use transcodingEnabled to set whether or not to enable transcoding.

3. The host in a channel can call the removePublishStreamUrl method to remove a media stream from the CDN live broadcast.

When the state of the media streams pushed to the CDN changes, the SDK triggers the onRtmpStreamingStateChanged callback to report the current state of pushing streams to the local host. The local host can troubleshoot with the error code when exceptions occur.

Sample code

// C++
// CDN transcoding settings.
LiveTranscoding config;
config.audioSampleRate = TYPE_44100;
config.audioChannels = 2;
config.audioBitrate = 48;
// Width of the video (px). The default value is 360.
config.width = 360;
// Height of the video (px). The default value is 640.
config.height = 640;
// Bitrate of the video (Kbps). The default value is 400.
cofig.videoBitrate = 400;
// Frame rate of the video (fps). The default value is 15. Agora adjusts all values over 30 to 30.
config.videoFramerate = 15;
// If userCount > 1, set the layout for each user with transcodingUser.
config.userCount = 1; 
// Video codec profile. Choose to set as Baseline (66), Main (77), or High (100). If you set this parameter to other values, Agora adjusts it to the default value of 100.
config.videoCodecProfile = HIGH;

// Sets the output layout for each user.
config.transcodingUser = new TranscodingUser[config.userCount];
// The uid must be identical to the uid used in joinChannel().
config.transcodingUser[0].uid = 123456; 
config.transcodingUser[0].x = 0;
config.transcodingUser[0].audioChannel = 0;
config.transcodingUser[0].y = 0;
config.transcodingUser[0].width = 640;
config.transcodingUser[0].height = 720;

// CDN transcoding settings when using transcoding.
m_rtcEngine->setLiveTranscoding(config);

// 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 need to set the live transcoding configurations by calling the setLiveTranscoding method. We do not recommend transcoding in the case of a single host.
m_rtcEngine->addPublishStreamUrl(url, true);

 if (config.transcodingUsers)
   {
      delete[] config.transcodingUsers;
   }

// Removes a URL to which the host pushes a stream.
m_rtcEngine->removePublishStreamUrl(url);

Example 1: Two-host tile horizontally

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

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

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

We also provide an open-source Live-Streaming demo project on GitHub.

API reference

• setLiveTranscoding
• addPublishStreamUrl
• removePublishStreamUrl
• onTranscodingUpdated
• onRtmpStreamingStateChanged

Considerations

• Up to 17 hosts can be supported in the same live streaming channel.

• This service is not free. Agora charges for the use of this service based on the duration of the audio and video transcoding.

• Agora supports pushing streams in the RTMP and RTMPS protocols, but the RTMPS protocol is supported only in transcoding mode.

• If you push the stream directly without transcoding for a single host, you can skip Step1, and call the addPublishStreamUrl method directly with transcodingEnabled (false).

  Currently, Agora only supports pushing H.264 (default) streams to the CDN.

• Set the value of videoBitrate by referring to Video Bitrate Table. If you set a bitrate beyond the proper range, the SDK automatically adjusts it to a value within the range.

• Ensure that the stream URLs used in the transcoding mode and non-transcoding mode are different.