Video Calling Integration Using Agora IO and Socket IO in Flutter.

Enjoy high definition video communication anywhere anytime

Source

Flutter evolves quickly and so does Flutter app development. When it comes to integrating new features and functionality in the customized app, Flutter remains a preferred choice of app developers across the world.

Recently, while diving into one of my project tasks that stands for Video Calling Integration in the Flutter app, I went through the Agora io dashboard. After doing some research, I made my mind to publish an article on how to implement video calling in Flutter with socket io.

Agora.io is the real-time engagement platform for meaningful human connections to enjoy high definition video communication anywhere anytime.

Lets first make a note of the tasks:

1. Develop using an android studio or visual studio code as an editor.
2. Create an Account on the Agora.io dashboard.
3. Android native configuration.
4. iOS native configuration.
5. Integrate Agora SDK to your flutter code with other kinds of stuff related to video calling.
6. Generate Agora token from server-side and other socket-related backend stuff.

Photo by Serghei Trofimov on Unsplash

Let’s start integration and achieve your milestone…….

Create an Account on Agora Io

Go to Agora IO Website then perform Sign up and Sign In.

After Creating an Agora IO Account Go to Dashboard.

Source

Please complete all the steps for registration on agora.io. After that please navigate to the dashboard.

Source

Get your APP ID from Agora Dashboard, which will use in integration.

Source

All the setup and configuration of Agora IO from the Agora dashboard are done.

Photo by Jackson Simmer on Unsplash

Integrate Agora IO Related Configuration for Native Android:

Please add the following permissions in AndroidManifest.xml as Agora Video SDK requires camera and microphone permission to start a video call.

Integrate Agora IO Related Configuration for Native iOS:

Please add the below keys and values in info.plist file in the iOS folder.

• Privacy - Microphone Usage Description
• Privacy - Camera Usage Description

Note : As Agora io SDK use PlatformView, you should setio.flutter.embedded_views_preview to YES in your info.plist

Integrate Agora SDK to your dart code :

Please add the following plugin into pubspec.yaml file.

You can find the Agora SDK related plugin here agora_rtc_engine .

We have to ask permission related to microphone & camera to user. So we have to integrate permission_handler plugin for this into our project.

As we all know that during an incoming call/video call, there should be any sound or ringtone which indicates us for the call. So for that, we have to add one other plugin to play ringtone or sounds based on a specific platform. this feature will be done by flutter_ringtone_player plugin.

Now there is also one scenario, during video calls, the screen should be turned on throughout the call. So for that, we have to add one other plugin to implement this feature is wakelock plugin.

Most important plugin to implement video call in an easy way for accepting and reject calls from another user, socket_io_client is the plugin which helpful for us to achieve this functionality.

First of all, Agora provides a start-up project to set video calling in your project but in our real-life projects, we have to do some other stuff which does not provide in start-up GitHub project. So I thought that it will be helpful for all developers who want anything other than that with a user experience perspective. So let's add some other features with the overall cycle of video calls starting from Pickup call to Video call.

First of all, we are going to implement socket-related stuff…….

Let's declare some socket-related constants in socket_constants.dart file.

Socket Events and Video Call Events related constants

socketUrl : <Your server url for socket>

Note : This is a sample project so we are going to pass static ids to socket but you can pass authorization token or unique id in live projects.

agoraAppId : <Your Agora App Id>

Let's create one dart file that will manage all the socket-related events.

You should call the initSocketManager method in initState method of common_screen.dart to initialize the socket.

So we have implemented basic socket-related stuff so far. Now it's time to take some deep breaths and start with the UI portion.

Let's do it in simple 3 steps :

1. Common Screen
2. Pickup Screen
3. Video Calling Screen
4. Reject Call Dialog

Common Screen :

We need to implement a common screen for students and teachers, so for that, we have to make some UI/UX for the same like below. You can find the code for this file from common_screen.dart.

Common Screen

Pickup Screen :

We need to implement a pickup screen for Accept/Reject call. So for that, We have to make some UI/UX for the same like below. You can find the code for this file from pickup_screen.dart.

Incoming Call To Teacher

Video Calling Screen :

Now let's do the main magic of Agora which you all are waiting for to do…..

For this screen, there are some important things which we need to take care of.

1. The app ID (From Dashboard)
2. Generated Token (Backend Server)
3. Channel Name (Backend Server)

We need to make some UI/UX for the same like below for the Video calling screen. You can find the code for this file from video_calling_screen.dart.

Video Call Screen

Let's set up for Agora-related configuration in a flutter. You should call initalizeCalling in initState method of flutter lifecycle.

agoraAppId : <Your Agora App Id>

widget.token : Through backend

widget.channelName : Through backend

VideoOutputOrientationMode.Adaptative : Landscape & Portrait Orientation Support.

Just don’t forget to call leaveChannel() and destroy() methods at the time of disposal.

Ui/Ux of Video Calling Screen :

_renderLocalPreview : To Preview local camera view

_renderRemoteVideo : To Preview remote camera view

_cancelCallView : Cancel Call Button Ui/Ux

Now, After these two screens, we are going to make a reject call dialog to end the call. So please look at below Ui & find the code for this file from leave_dialog.dart .

Reject Call Dialog :

End Call Alert Dialog

Now all UI/UX part is done.

Let's implement Agora video call-related socket events and emit them programmatically.

Flow from one user to another user of calling :

1. The teacher is calling a student by click on the button.
2. The student is getting an incoming call screen.
3. Students will accept/reject calls via the accepting/reject button.
4. After Accept, the Student or Teacher can cut the call using the button which is located at the top right corner.
5. After cutting the call both are redirected to the common screen.

So let’s implement this flow in dart.

Paste the below code in onPressed method of a button in common_screen.dart.

ArgParams.connectId : <Id of other user>

ArgParams.isForOutGoing : true >Its an outgoing call

Note : This is a sample project so we are going to pass static ids to socket but you can pass unique id based on server response in live projects.

You have to pass the id of another user in connectCallsocket event.

I have made two model class named as ResCallAcceptModel and ResCallRequestModel to organized code easily.

When a teacher is calling to a student from a common screen at that time student will listen onCallRequestsocket event and navigate to pickup screen.

ArgParams.isForOutGoing : false >Its an incoming call

So at that time students will have two options to give responses, accept and reject. If a student wants to reject the call then he should press the reject button of the incoming call screen.

Wakelock.disable() : Screen will turn off after sleep time.

Wakelock.enable() : Screen will turn on even after sleep time.

FlutterRingtonePlayer.stop() : Ringtone will stop playing.

FlutterRingtonePlayer.play() : Ringtone will start playing.

So at that time teacher will listen onRejectCallsocket event and navigate to the previous screen.

If a student wants to accept the call then he should press accept button of the incoming call screen and navigate to the video calling screen.

So at that time teacher will listen onAcceptCallsocket event and navigate to video calling screen.

So now we have successfully implemented video call flow so far.

Whenever a student/teacher wants to cancel a video call, they can do this from the button which is located at the top right portion of the video calling screen, after clicking on that cancel button, the end call alert dialog will come in the picture.

So at that time, other users will listen onRejectCallsocket event and navigate to the previous screen.

Let's implement the backend part for agora and socket event-related stuff.

Generate Agora Token From Server Side :

Socket Events Implementation From Server Side :

.env File For Backend :

Thanks, Rinkal Gohel for backend-related support.

You will find other stuff related to the backend (agora-call-backed) in my GitHub repo. So we are done with implementation now. You can find the GitHub repo link at the end of this blog.

Let's see the summary of implementation in the below videos.

Incoming Call

Outgoing Call

Conclusion

We have done all the Implementation Of Agora video calling with the socket. If you want to do implement for Live broadcasting purpose then you can do it as well with agora.

So, that’s it for Video Calling Integration Using Socket and Agora IO In Flutter.

You can find the whole project with clean architecture on Git Repository :

JaimilPatel/AgoraVideoCall