Media Push (Web SDK 3.x)

Introduction

The Agora SDK provides the functionality to convert the audio and video streams of hosts from Agora private protocols to standard protocols (RTMP and RTMPS) and then push those streams to CDN. The CDN audience can watch live streams by clicking the corresponding URLs. This function can enrich the distribution channels of live media streams and facilitate the promotion of live streaming.

Prerequisites

Ensure that you enable the Media Push service before using this function:

1. Log in to Agora Console, and click the Project Management icon on the left navigation panel.

2. On the Project Management page, find the project for which you want to enable the Media Push service, and click the edit icon.

3. 

4. Under Real-time engagement extensions, find Media Push, and click Enable.

   

5. Click the Status button to enable the Media Push Client-side SDK API service. Read the pop-up prompt carefully, and then click Save.

   The service cannot be disabled after enabling.
   

5. The Enable button of Media Push changes to the Config button, which allows you to configure the Media Push service.

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 Client.setLiveTranscoding method to set the transcoding parameters of the media streams (LiveTranscoding), such as the resolution, bitrate, frame rate, background color, and watermark position. 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 Client.on("liveTranscodingUpdated") callback occurs when the LiveTranscoding class updates and reports the updated information to the local host.

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

   Use enableTranscoding to set whether or not to enable transcoding.

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

When adding/removing a media stream in the CDN live broadcast, the SDK triggers some callbacks in Client.on to report the current state of pushing streams to the local host. See API Reference.

Sample code

// CDN transcoding settings.
var LiveTranscoding = {
            // Width of the video (px). The default value is 640.
            width: 640,
            // Height of the video (px). The default value is 360.
            height: 360,
            // Bitrate of the video (Kbps). The default value is 400.
            videoBitrate: 400,
            // Frame rate of the video (fps). The default value is 15. Agora adjusts all values over 30 to 30.
            videoFramerate: 15,
            audioSampleRate: AgoraRTC.AUDIO_SAMPLE_RATE_48000,
            audioBitrate: 48,
            audioChannels: 1,
            videoGop: 30,
            // 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.
            videoCodecProfile: AgoraRTC.VIDEO_CODEC_PROFILE_HIGH,
            userCount: 1,
            userConfigExtraInfo: {},
            backgroundColor: 0x000000,
            // Adds a PNG watermark image to the video. You can add only one watermark image.
            images: [{
                    url: "http://www.com/watermark.png",
                    x: 0,
                    y: 0,
                    width: 160,
                    height: 160,
                }],
            // Sets the output layout for each user.
            transcodingUsers: [{
                    x: 0,
                    y: 0,
                    width: 640,
                    height: 360,
                    zOrder: 0,
                    alpha: 1.0,
                   // The uid must be identical to the uid used in Client.join.
                    uid: 1232,
                  }],
          };

client.setLiveTranscoding(LiveTranscoding);

// 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. Agora does not recommend transcoding in the case of a single host.
client.startLiveStreaming("your RTMP URL", true)


// Removes a URL to which the host pushes a stream.
client.stopLiveStreaming("your RTMP URL")

We also provide an open-source Live-Streaming demo project on GitHub. You can try the demo, or view the source code in the index.js and rtc-client.js files.

API reference

• init
• setLiveTranscoding
• startLiveStreaming
• stopLiveStreaming
• liveTranscodingUpdated
• liveStreamingStarted
• liveStreamingFailed

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 Client.startLiveStreaming method directly with enableTranscoding ("url", false).

  Please use AgoraRTC.createClient({mode: "live", codec: "h264"}) in this case.

• 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.