Introduction

The process of publishing streams into the CDN (Content Delivery Network) is called CDN live streaming, where users can view the live broadcast 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/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 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

Before proceeding, ensure that you implement a basic live broadcast in your project. See Start a Live Broadcast 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 media streams (LiveTranscoding), such as the resolution, bitrate, frame rate and position of watermark/background. 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 update information to the local host.

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

    Use transcodingEnabled to set whether transcoding is enabled or not.

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

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

Sample code

// Java
// 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;
// Video bitrate of the video (Kbps). The default value is 400.
config.videoBitrate = 400;
// Video framerate 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 100.
config.videoCodecProfile = HIGH;

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

// CDN transcoding settings when using transcoding.
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 need 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);

Example 1: Two-host Tile Horizontally

../_images/sei_2host.png
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

../_images/sei_3host.png
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

../_images/sei_random.png
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

Considerations

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

  • In the case of a single host, we do not recommend transcoding . 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.

  • Agora charges a transcoding usage fee for CDN live streaming.