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.
Ensure that you enable the RTMP Converter service before using this function.
Now, you can use the function and see the usage statistics.
Before proceeding, ensure that you have read the quickstart guides and implemented basic real-time audio and video functions in your project.
Follow these steps to push streams to the CDN:
Before publishing the stream, call AgoraRTCClient.setLiveTranscoding
for the hosts in the channel to set the configurations for transcoding, such as the resolution, bitrate, frame rate, background color, and watermarks. If you want to manage the layout of multiple hosts in the CDN live streaming, set the transcodingUsers
parameter, as shown in the following sample code.
Call AgoraRTCClient.startLiveStreaming
for the hosts in the channel to publish their local stream to a CDN address. Use the transcodingEnabled
parameter to set whether or not to enable transcoding.
Call AgoraRTCClient.stopLiveStreaming
for the hosts in the channel to remove a CDN address.
Listen for the AgoraRTCClient.on("live-streaming-error")
and AgoraRTCClient.on("live-streaming-warning")
events to get the errors and warnings that occur during CDN live streaming.
The client
object in the following sample code is created by calling AgoraRTC.createClient
.
// CDN transcoding configurations.
const 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.
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,
// Add an online PNG watermark image to the video. You can add only one watermark.
watermark: {
url: "http://www.com/watermark.png",
x: 0,
y: 0,
width: 160,
height: 160,
},
// Set the 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 AgoraRTCClient.join.
uid: 1232,
}],
};
// This is an asynchronous method. Please ensure that the asynchronous operation completes before conducting the next operation.
client.setLiveTranscoding(LiveTranscoding).then(() => {
console.log("set live transcoding success");
});
// Add 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 setLiveTranscoding. We do not recommend transcoding in the case of a single host.
// This is an asynchronous method. Please ensure that the asynchronous operation completes before conducting the next operation.
client.startLiveStreaming("your RTMP URL", true).then(() => {
console.log("start live streaming success");
})
// Remove a URL and stop live streaming. This is an asynchronous method. Please ensure that the asynchronous operation completes before conducting the next operation.
client.stopLiveStreaming("your RTMP URL").then(() => {
console.log("stop live streaming success");
})
videoBitrate
according to the Video Bitrate Table. If you set a bitrate beyond the recommended range, the SDK automatically adjusts it to a value within the range.Client.startLiveStreaming
directly with enableTranscoding
set as false
. Please use AgoraRTC.createClient({mode: "live", codec: "h264"})
in this case.