Flutter Video & Audio Call Using ZEGOCLOUD SDK

hello guys and welcome back to coding Corbett in this video I will show you how to implement audio and video call in your flutter application in this application I have users such as Android 1 and Android 2. in this device I'm logged in as Android one and the other one I'm logged in as Android 2. now if Android 2 tries to call android1 we will see the ring Gengar calling page and a notification on the other device to answer it or dismiss it I will answer it and you can see now the ongoing call between the two devices now this is customizable as you wish I will show you in a while now and if any of these devices hang up the call it will end on the other one now if we try video call from this device to the other the same will happen we will get a notification and we'll enter a video call with these two devices so before we get started if you haven't subscribed yet make sure to subscribe and turn on the notification Bell so you don't miss our content now let's get started all right now before we dive in into coding I need to show you the SDK that we will be using so head over to zikocloud.com and in here this SDK is trusted by many businesses such as live me apply Oasis and many more and this SDK supports many features such as one-on-one call group call and voice audio live streaming and some others and finally it supports many platforms such as Android iOS web flutter react native Windows Mac OS electron now make sure to sign up but I've already signed up so I will just log in all right now once you sign up you will get this dashboard it has recent projects builds overview resources now what we care about is projects so expand the projects go to projects management and you can create one but I've already created one so I'll just go to mine and from here you can click configure my app and the view guidance let me first open view guidance then configure my app now from here you can add whatever you want so make sure to add flutter and you can click edit config or get guidance now what we care about is guidance so click get guidance and then from here you have two options quick start and you have another option which is dry demo now try demo is a GitHub repository that has flutter projects I actually don't recommend it because the documentation is well documented and you will get it working from the first try now from the quick start here you have quick start with Zig UI get pre-built call it has all the documentation needed but what we care about in this video is a quick start with call invitation because we're going to be implementing this one not the previous one so make sure to select this one if you are following up and in this page you have all the custom customization that you can make use of and change in the SDK as you wish so make sure to visit this page in order to customize your SDK as you wish all right now we will start with the flutter side you need to add these three libraries first Firebase score or cloud firestore and after you do that you need to in the terminal you need to run flatterfair configure and that's because we have to link our flutter app with Firebase and if you haven't created a flat Firebase project yet make sure to create one or you can create one from here but mine will select the default one created and selected previously and from here you can select what platform you want so just select Android and iOS and it will register it for Android for iOS it may ask about the bundle identifier and I think it's better to keep it as Android so I will tap type com.example.zebocloud and then type enter and that's all what you need to do in order to make your application connected with Firebase and flatterfire now it will generate a file that we will be using in order to continue working with the app all right now let me show you what's already implemented in the app let's expand lib expand service and I want to start with Firebase service now in the Firebase service I have Oath Firebase Earth and store for firestore and I have static user model current user with a getter current user this guitar checks on the current user if it's not null it returns it it just returned the current user that is signed in and the setup Firebase method just initialize the Firebase app build the views returns all the users that we have inside our firestore as users now we have two main method sign up and log in for sign up we take name email username password and then we create user with email and password and after it we create a new user with email name and username let me show you the user model it's a simple one that consists of email username name and has two methods from Json and two Json now after we create the user we are checking the Firebase user if the firestore contains that object it will return false and we will show some error otherwise if it doesn't contain it we will just set the book and with user.2 Json and will return true for login we sign in the user with email and password and then we check on the firestore if we have data for this user if we do we set current user to user.f from Json and we return true otherwise we will return false to show some errors now moving on to the main inside the main we have widget flutter binding dot ensure initialized along with setup Firebase the method that I show you in a while and just run up here inside main app we have Navigator key static one and two colors and material app and just it defaults to login page now let me show you what common widgets I have I have loading holder that shows a loader while signing up or looking again and it takes is loading as Bull and child as a widget and returns a stack with children child and the floating container that has with high color and cappuccino activity indicator now to Bar the two bar that you saw on the emulator and user card you actually don't care about the user card what you care about is down here we have to add two buttons audio call button and video call button and we will add them in a while now aesthetic has static information model just show you screens I have three screens login and sign up and home screen the home screen is the one that depends on the build view from the Firebase service that shows all the users that we have and build the view upon them I will push everything to GitHub so you can have access on all of that all right there is an additional step that we need to make on the Firebase so go to console and open the project that you created go to Project settings and from there you can see that you have two apps one for Android and one for iOS now go to service accounts and click on generate a new private key it will download the new private key but I've already downloaded them so after you download them go back to the zigo cloud dashboard and you're inside your project go to service management then click on an app chat now this wouldn't be activated so activate it yourself and after you activate it there is one thing just you need to do just to click on the fcm add credentials select and select the file that you downloaded click upload okay and that's it that's the additional step that required to in order to make the app work all right now we need to set up the Android part so expand Android expand app and we click build the Gradle and in here you need to make sure that you'll compile SDK version as set to 33 and your main SDK version is set to 21 and then you need to add this line under release build type release you need to add this this line and after you add this line just create here a new file called same as their proguard Dash rules dot Pro and inside here you need to paste these two lines keep class 0 and keep a class 0.s now after you do that you need to expand up expand SRC expand Main and open Android manifest and paste these permissions all of these Access Wi-Fi record audio internet and all of these permissions must be defined all right now the last thing we need to do for Android we need to expand raise create a new directory here call draw and inside it we need to create keep.xml file and paste this inside it and that will help us in order to receive notifications and keep the notification going for iOS we need to go to the documentation once more and the recommendation that we specified before quick start with cool invitation scroll down a little bit until you find iOS video explanatory and it will guide you through it unfortunately I don't have apple developer account if you have one make sure to follow this video and then after you finish it just will require you to upload your AP and as Apple push notification service all right now we need to go back to perspect.tml and we need to add two libraries the first one is zigo UI get signaling plugin and the second one is ziggo UI get pre-built call and after you add them here and save pops back to tml make sure to run flutter pop get in order to get these dependencies all right now after it finished let's say close everything and let's go to the common widgets and create a new widget let's call it call invitation dot Dart all right in here let's create a stateless widget let's call it call invitation page and let's remove these two Imports instead let's import photo material all right now let's add some imports let's import static from command and let's import Z go UI kit pre-built call and the Google I get signaling plugin now after we import these let's add a widget called child understand username and make them required in order to call this page now instead of the container let's have zigo I get pre-built call with invitation and inside it we need to pass the app ID as static.app ID and app sign as static.app sign but make sure to change these as yours username I will just use user ID I will just use username and username with username and finally plugins here we need to pass the GUI get signaling plugin as one of the list and the soil as the soil and that's it for this widget this widget is actually needed in order to connect the call kit that this SDK provides and in order to get the app ID and the app sign you need to go to the dashboard and from the dashboard from the dashboard not overview click on project information and you can see the app sign is already here but wait a little bit to load and this is the app ID that you can copy and the upside you can copy it from here as well now to make use of this widget we need to go to home screen click on scaffold wrap with Widget and the widget is the widget that we created called invitation page and we need to pass username the username is Firebase service dot current user dot username and that's it that's how we make use of this widget all right there is one more thing that we have to do we need to go to the user card and we need to import first there you go UI get pre-built call and down below we need to create a method that returns zigos and call invitation action button let's call it action button it takes bull as video and Returns the egocent call invitation button now this button it takes is video call and we will make use of this bull as video then resource ID and this resource ID is basically for offline calls and then we have list of invitees so basically you can create a group call with it or one-to-one calls but with this tutorial in this tutorial we will cover only one-to-one calls so inside the invitees list we will have only one zigo user one zero new icat user and it takes ID and since we have the user model in this widget we will pass the username as the ID and then it takes name and this name is Widget the Chooser model name and now instead of having here comment about audio call Button we can say action button is video you as false and then under video call Button we can say action button to true and that's it that's all what we have to do in order to make this work now let's run the app to see if it will work or not all right the app is running on the first emulator but we need to run it also in the second emulator so type letter run and we actually need to run it on the second emulator so we'll select two from this list and while running we can log in on this emulator so I will type android1 gmail.com as and password as Android one and click sign in and I guess the second emulator ran all right so here we will sign in as Android 2 as gmail.com and password is Android 2. click sign in in here and this means the keyboard and that's it now let's try video call with this all right so video call is working just fine and let's try audio call now so if we click in here it's calling and or right now it's working okay so it's working as well all right I run the app on my real Samsung device and I'm screen mirror and get on the right side now so I created an account coding at gmail.com and the password is coding so now I'm signing in I want to test it on real device so I'm gonna try video call Android one and it's working um with you calling the first Android User the emulator and it's working and I'll also try to call from Android one to the real device but audio call and it's working so thank you guys for watching if you like the video make sure to like it comment down below and I will see you in the next video

Channel: Coding Orbit

Views: 8,256

Keywords: flutter, flutter tutorial, zegocloud, video call, audio call, video api, audio api, live video call, flutter video call, flutter audio call, video chat, flutter video chat, audio chat, flutter audio chat, call kit, flutter call kit, flutter video and audio call

Id: VTxf9h9jORk

Length: 15min 28sec (928 seconds)

Published: Tue Jan 17 2023