In a video call or interactive video streaming scenario, if multiple users publish video streams at the same time, user experience may be affected by limited device performance and excessive bandwidth consumption.
This document shows how to use the Agora Web SDK to implement a video scenario that enables multiple users to publish video streams simultaneously and also introduces some notes. Agora recommends limiting the number of users sending streams concurrently in a channel to 17.
Before proceeding, ensure that you refer to the appropriate Quickstart Guide to implement the basic real-time communication functions in your project.
To implement a video scenario that enables multiple users to publish video streams simultaneously, follow these steps:
Before publishing the local audio and video tracks, call enableDualStream to enable dual-stream mode. In dual-stream mode, in addition to the original video stream, the SDK sends another video stream that has a lower resolution and bitrate than the original one. Agora calls the original video stream the high-quality video stream and calls the additional one the low-quality video stream.
Theoretically, you can set the video profile of a high-quality stream as any of all the video profiles supported by the SDK, but Agora recommends using a video profile with a resolution of no more than 640 x 480 and a frame rate of 15 fps.
The default video profile of the low-quality stream is: A resolution (width × height) of 160 × 120 px, a bitrate of 50 Kbps, and a frame rate of 15 fps. If you don't want to use the default video profile of the low-quality stream, call setLowStreamParameter to customize the video profile of the low-quality stream. This method is particularly applicable to scenarios where you want to avoid excessive bandwidth consumption caused by a high bitrate.
setLowStreamParameter
may not take effect. For example, the Firefox browser has a fixed frame rate of 30 fps, therefore the frame rate settings do not work on the Firefox browser.Receivers call setRemoteVideoStreamType to subscribe to the high-quality stream from only one sender and to the low-quality streams of the other senders. Agora recommends using a layout with one big window and multiple small windows: The big window for the high-quality stream and small windows for the low-quality streams.
After finishing the above method calls, call publish
to publish the local stream, and call subscribe
to subscribe to a remote stream.
// Customize the video profile of the low-quality stream. Set the video profile as 160 × 120, 15 fps, 120 Kbps.
client.setLowStreamParameter({
width: 160,
height: 120,
framerate: 15,
bitrate: 120,
});
// Enable dual-stream mode.
client.enableDualStream().then(() => {
console.log("enable dual stream success");
}).catch(err => {
console.log(err);
});
// Choose whether to subscribe to a user's high-quality stream or low-quality stream.
client.setRemoteVideoStreamType(user, streamType)