How to Build Zoom Video Calling App in Flutter | ZegoCloud (Full Tutorial)

in a world full of chat messages where emojis convey emotions and words Bridge distances adding a chat feature to your apps is a no-brainer but there's always been one important thing missing because it's complicated the face Toof face video call feature well today we're going to add this tricky face-to-face video call feature together with zoc Cloud making it super easy so what are we waiting for let's get started first of all we will open up our flutter project we will also Prov provide the source code of this starter project which you guys can download and then follow along with the tutorial now we have our project open let's move to the first step which is setting up a zoc cloud account for that head over to the zoc cloud official website and click here to create a new account it will take us to the new screen where we need to enter our account information such as your name last name your country your work email once you have entered your email you will receive an email that will consist of a verification code Cod that we need to enter here and lastly choose a strong password once you're done with all the information check both checkboxes and click on start your free trial it will take you to the next screen where you need to provide a little more information about your company which includes your company name website your job title type of industry and lastly your phone number and once you're all done click on continue and here you can see that we have received free 10,000 minutes that we can use without any changes now click on go to the dashboard button now we have our dashboard open where we can see all the details about our account like minutes left balance and many more now click here to create your first project with zgo Cloud here there are many use cases that you can choose from but in this tutorial we will focus on the video call feature after selecting the video call click on next here give a name to your project and scroll down to choose start with UI kits wait a little while until the project is created once the project is ready it is time to choose your framework we will select flutter here and then we will leave everything default scroll down and click here on Save and start to integrate it will take us to the configuration page where we can start integrating zoc Cloud within our app and also it provides us with an app ID and app sign that we will require later first of all click here on quick start it will take us to the document ation of zoc cloud make sure that you click here to go to the updated documentation and here we have the quick start guidelines and steps that we need to follow we will scroll down a little here you can see that the first step is to add zoc Cloud dependency therefore we will copy the command and open up our vs code and here within the terminal we will paste our Command which will add zoc Cloud dependency to our project and verify it we will go to our pubp do yaml file and here you can see that we have our dependency added now returning back to the documentation now we have to create a separate page for our calls therefore we will return back to our vs code here we will create a call page. do file within the pages folder and inside we will create a class call Page which is a stateless widget and here instead of a placeholder we will return this widget which comes from this package and it requires few properties such as app ID app sign user ID username and call ID let start from the beginning for the app ID and app sign we will go to our dashboard and here we will copy our app ID and app sign now returning back to our vs code to write clean and efficient code we will create a constant folder within the lib directly and inside we will create constant. do file here we will create a class app info and inside we will Define two static constant variables app ID and app sign now coming back to our call Page now now we have our app ID and app sign therefore we will access it from the app info class and assign it to the required parameters next we need to specify the user ID we want each user to have a specific ID therefore we will create a variable and use a random function from the math library to generate a random user ID and then we will assign it here and lastly we will convert it into a string same for the username we will access the user ID also now now for the call ID we will create a variable call ID and we will mark it as required within the Constructor basically the call ID we will get from the homepage when the user enters an ID within the text field for the config we will access the onetoone video call method from the zoo UI kit pre-built call config class with this we are pretty much done with the UI now let's get back to the documentation now the next step is to configure your operating system in this tutorial we are going with the Android therefore I will focus on Android configuration first of all we will go inside the Android folder then app folder and here we will open up this build.gradle file here we need to set the compile SDK version to 33 we also need to set the Min SDK to 21 then we will go to the build.gradle file of Android level and here we will change the existing cotlin version to 1.8 next we will go inside the gradal and then the wrapper folder and here we will make sure that this line of code is present here now lastly we need to add permission within our app so that the user can give permission to the app to use a camera microphone Etc therefore we will go to Android app and then the main folder and here we will open the android. XML file and here we will paste all permissions which we can get from the documentation next we need to create a separate file within the app folder with this this name and inside we will paste this line of code now the last step we need to add this line of code therefore we will go to Android app and build.gradle file and inside within the build types we will paste this line of code and with this we are all set now let's go to the homepage here when the user enter the app ID and press on the join button we want to navigate to the call Page therefore we will use Navigator do push and for the route we will use the material page route and inside Within the build method we will call our call Page and we will pass the call ID that user entered with in the text field using the text editing controller that we have created on the top and with this everything is good to go now let's run our app on two devices to see the results here on my device I will enter a call ID 1234 and I will click on join here you can see that I am already within a video call now I will share the call ID with my friend and he will also enter the same ID within his phone and when click on the join call here you can see that he joined the same video call with me and I have full control over the video I can change the camera I can mute myself I can turn off my camera and many more well there you have it guys we've successfully integrated video calling into our flutter app using zoc Cloud now if you're interested in developing apps websites or backend servers using flutter hey flutter is the perfect solution with over seven years of expertise and a track record of crafting numerous applications and websites we've got the experience you need simply go to heyf fl.com app and let's begin building together

Channel: HeyFlutter․com

Views: 1,599

Keywords: Flutter, dart, flutter and dart, flutter video call app, flutter call, flutter calling app, flutter video call, video call app in flutter, flutter video call feature, flutter development, flutter zego cloud, flutter zego cloud app, flutter calling with zego cloud, flutter and zegocloud, flutter zegocloud integration, video call in flutter, video call fluter, voice call flutter, flutter tutorail, flutter apps

Id: 7I3VAWGvOEw

Length: 7min 47sec (467 seconds)

Published: Sat May 18 2024