Video for Multiple Users (Web SDK 3.x)

Introduction

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.

Use this article as a best practice for implementing a video scenario that enables multiple users to publish video streams simultaneously.

To minimize bandwidth consumption and ensure smooth communication in a video scenario with multiple users, Agora recommends the following:

• All publishers enable dual-stream mode.
• Every subscriber receives the high-quality video stream of only one publisher, and the low-quality stream of the other publishers.

Implementation

Before proceeding, ensure that you have implemented the basic real-time audio and video functions in your project.

1. Enable dual-stream mode

After calling Stream.init successfully, call enableDualStream to enable dual-stream mode on the publishers' clients. In dual-stream mode, the SDK transmits a high-quality video stream and a low-quality video stream from the publisher. The high-quality video stream has a higher resolution and bitrate than the low-quality video stream.

For the Agora Web SDK v3.1.0 or later, the low-quality stream has a fixed default video profile: A resolution (width × height) of 160 × 120 px, a bitrate of 50 Kbps, and a frame rate of 15 fps. For the Agora Web SDK earlier than v3.1.0, the SDK sets the default video profile of the low-quality video stream based on that of the high-quality video stream.

2. Set the remote video stream type

Call setRemoteVideoStreamType on each subscriber's client to receive the high-quality stream from only one publisher and the low-quality stream of the other publishers.

3. Set the video profile for the low-quality stream

To reduce bandwidth consumption, Agora recommends calling Client.setLowStreamParameter to customize the video profile of the low-quality stream.

cswitchStream = function (){
  if (highOrLow === 0) {
    highOrLow = 1
    console.log("Set to low");
  }
  else {
    highOrLow = 0
    console.log("Set to high");
  }

  client.setRemoteVideoStreamType(stream, highOrLow);
}

4. Publish and subscribe to a stream

Call Client.publish to Publish a local stream, and call Client.subscribe to Subscribe to a remote stream.

Relation between the high-quality and low-quality streams

The SDK sets the video profile of the low-quality video stream based on that of the high-quality video stream. This following table shows the relation between the video profiles of the high-quality and low-quality video streams.

For the resolution, frame rate, and bitrate of each video profile, see API Reference.

Considerations

• Video dual-stream does not apply to the screen sharing scenario.
• To ensure smooth communication, Agora recommends that the resolution of the high-quality video stream not exceed 640 × 480 px, and the frame rate not exceed 15 fps.
• Unless otherwise specified, the video profile uses the following units: px for resolution, fps for frame rate and Kbps for bitrate.
• 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.
• If you want to customize the default video profile of the low-quality stream, ensure that the low-quality video stream keeps the aspect ratio of the high-quality video stream.