Group Video Calling Using the Agora Flutter SDK

Meherdeep Thakur
Feb 25 · 7 min read
Group Video Calling Using the Agora Flutter SDK

Introduction

No one expected that working from home would be the new normal. This pandemic has been tough for everyone but it has proved that even when the complete country is in lockdown, people can work with ease in their homes. Where people are connected online with their colleagues, friends, and family.

Prerequisites

If you’re new to Flutter, then install the Flutter SDK from here.

Project Setup

  1. We begin by creating a Flutter project. Open your terminal, navigate to your dev folder, and enter the following:
flutter create agora_group_calling
pubspec.yaml
flutter pub get
Project Structure

Building the Group Video Calling Interface

To begin with, we navigate to main.dart. Replace the template code with the following code:

Building Our Home Page

Continuing with our home page, we will be asking our users to enter a channel name. A channel name is a unique string that will put people with the same channel name in a single group call:

HomePage.dart
UI for the HomePage
UI for the HomePage
HomePage UI
HomePage.dart — _handleCameraAndMic()
HomePage.dart — onJoin()

Building our Call Page

Before we begin with our CallPage.dart, let’s use the App ID that we got from the Agora developer account. (Follow the instructions here to learn how to generate an App ID.) Navigate to AppID.dart in your utils folder and create a variable named appID.

var appID = '<--- Enter your app id here --->' 
importing the Agora SDK
  • _infoStrings contains all the logs for all the events that occur during the call.
  • muted is a Boolean state variable to mute and unmute a user.
  • _engine is an object for our RtcEngine class
  • In our dispose method, we clear the _users list and destroy the RtcEngine.
  • In our initState() method, we call the initialize() function, which we will be declaring in the coming steps.
Agora CallPageState
_initAgoraRtcEngine()
  • leaveChannel() is the opposite of that because it is triggered when the user leaves the channel. It returns the stats of the call whenever the user leaves the channel. These stats include latency, CPU usage, duration, etc.
  • userJoined() is a method that is triggered when a remote user joins a particular channel. A successful callback returns the uid and the time elapsed of the remote user.
  • userOffline() is the opposite of that because it occurs when a user leaves the channel. A successful callback returns the uid and the reason for going offline, which includes dropping, quitting, etc.
  • firstRemoteVideoFrame()is a method that is called when the first video frame of a remote video is rendered. This helps you in returning the uid, the width, the height, and the time elapsed.
_addAgoraEventHandlers()
joinChannel()
  • Channel Name: It takes a string input to put users into a common video call.
  • Optional Info: This is an optional field through which you can pass additional information about the channel.
  • uid: It is the unique ID for every user that joins the channel. If you pass 0 or null value in that, then Agora automatically assigns the uid for every user.
build
_toolbar Widget

Testing

Once we are done building the group video calling application, we can test it on our device. To do that, navigate to your project directory in your terminal and run this command:

flutter run 

Conclusion

Congratulations! You have implemented your own group calling application, which you built using the Agora Flutter SDK, with some basic functionality like muting the local stream, switching the camera, and disconnecting the call.
You can get the complete code for this application here.

Other Resources

To learn more about the Agora Flutter SDK and other use cases, you can refer to the developer guide here.

Agora.io

Agora delivers cutting edge APIs for developers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store