Video Calling Integration Using Agora IO and Socket IO in Flutter.
Enjoy high definition video communication anywhere anytime
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:
- Develop using an android studio or visual studio code as an editor.
- Create an Account on the Agora.io dashboard.
- Android native configuration.
- iOS native configuration.
- Integrate Agora SDK to your flutter code with other kinds of stuff related to video calling.
- Generate Agora token from server-side and other socket-related backend stuff.
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.
Please complete all the steps for registration on agora.io. After that please navigate to the dashboard.
Get your APP ID from Agora Dashboard, which will use in integration.
All the setup and configuration of Agora IO from the Agora dashboard are done.
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
toYES
in yourinfo.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 :
- Common Screen
- Pickup Screen
- Video Calling Screen
- 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
.
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
.
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.
- The app ID (From Dashboard)
- Generated Token (Backend Server)
- 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
.
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 :
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 :
- The teacher is calling a student by click on the button.
- The student is getting an incoming call screen.
- Students will accept/reject calls via the accepting/reject button.
- After Accept, the Student or Teacher can cut the call using the button which is located at the top right corner.
- 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 connectCall
socket 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 onCallRequest
socket 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 onRejectCall
socket 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 onAcceptCall
socket 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 onRejectCall
socket 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.
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 :