One of the biggest challenges facing any developer is building applications that can scale. With a video-conferencing application using Agora, the main scaling issue is the bandwidth of your local device, especially if there are many incoming video streams. And as the number of participants rises, it becomes increasingly difficult to make sure that your application can keep up.
In this tutorial, you will see how to use Agora to build an application that can scale to up to 17 users by optimizing the bandwidth usage of the incoming video streams.
- An Agora developer account (see How to Get Started with Agora)
- Flutter SDK
- Editor of your choice
- Android or iOS device for testing
- In your project directory, open a terminal window and create a Flutter project by running this command:
flutter create agora_scalable_ui
- Open the newly created project in the editor of your choice.
- Navigate to
pubspec.yamland add the latest version of the Agora Flutter SDK as a dependency.
- Add relevant permission in your
AndroidManifest.xmlfile (Android) or
- Android (in your
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.RECORD_AUDIO"/> <uses-permission android:name="android.permission.CAMERA"/>
- iOS (in your
info.plist): Add both NSCameraUsageDescription and NSMicrophoneUsageDescription to
Info.plistalong with text descriptions. See here for more information on these, along with code samples of how to request and get authorization states.
All done! Let’s start building the app.
We will stick with a very simple grid view. Our goal is to scale this application as the user joins. To do this, we will optimize our bandwidth usage to ensure all the streams work concurrently without any difficulty.
Building a Home Page
Our home page is responsible for prompting the user for the name of the channel they want to join and requesting camera and microphone permission.
To request user permission, we are using a plug-in called permission handler.
Building the Video Call Page
1. Adding all the required variables
2. Initializing the Agora methods:
In the above code snippet, we set up the Agora engine with dual-stream mode enabled. Dual-stream is an Agora feature that allows a client to publish two streams at the same time. One stream is for a higher resolution and bitrate, and the other stream is for a lower resolution and bitrate. With this dual-stream setup, when a remote client subscribes to your stream, they can switch to a lower stream based on their bandwidth requirements.
3. Initializing the Agora SDK:
_initAgoraRtcEngine function creates an object of the AgoraRtcEngine, which we use to refer all the methods provided in the Agora SDK.
4. Adding Agora event handlers:
userJoined callback, we are doing the following:
- Adding the UID of the remote video to a list of UIDs (
_users) that we use as the dataset for all the users’ UIDs present in the channel
- Checking if the number of remote users has grown to five to know whether to switch to using the lower stream in dual-stream mode
userOffline callback, we are doing the following:
- Removing the UID from the
- Switching back to the higher stream in the dual-stream mode if the number of remote users shrinks to three
5. Creating the grid view for local and remote user video
Here, we simply pass the UID present in the
_users list to generate a list of views. These views are then used to generate a grid that scales automatically as the user joins.
Finally, it is time to write the dispose method. We clean up all the resources relevant to Agora here:
To test the application, you will need five or more users such that when they join the channel the video quality optimizes automatically in order to provide the best video calling experience.
To run the app, enter this command in your terminal:
You now have a video chat application that can scale to up to 17 users by optimizing settings for incoming streams.
You can find a complete application using all of the above code on GitHub:
To learn more about the Agora Flutter SDK and other use cases, see the developer guide here.