Video & Audio Calling using Flutter WebRTC | Whatsapp Clone Flutter Part 7

hello everyone i am smart and this is part 7 where we are creating a whatsapp loan application in flutter if you have missed the previous parts then worry not i have already mentioned them right here as well as in the description box as well in today's video we are going to integrate firebase in our flutter application we are going to integrate web rtc to make video and audio calling to other users and we are also going to integrate firebase fcm messaging so that whenever we call a user then the user can get notification for accept or decline so that the user can accept the call and then we both can chat using web rtc that we are going to develop in this video so if you're interested in this video then make sure to subscribe my youtube channel as i will be uploading more of these amazing videos in future so with that being said let's dive in hello everyone so we are on our laptop and let me just open up my android studio and now as you can see this is the complete project i have added some new folders that we'll talk about in a moment all right but first and for the most i should run the app so that we can see what is happening in ui also what i'm gonna do is that i'm going to run the emulator so that you guys can also see the screen what is happening right great so i'm gonna put this right here and i'm gonna wait till the app is completed yeah so as you can see our app is completely installed on my android phone and you can see that on my emulator as well so this is our whatsapp loan app what we have created till now awesome now what we can do is that in this video we are going to create this video calling and audio coiling feature so what basically it will happen so let me just open up paint and let me explain what is the procedure we are going to follow in this video okay so suppose this is your mobile phone okay and this is your friend's mobile phone that you want to audio call or video call awesome now what you have to do is that inside this flutter app in both the apps we'll be running webrtc right awesome in both the app so basically what we'll do is the your phone will create a room in our database so for example we have a database right here so your phone is going to create a room right here in the database and then your phone is gonna call the firebase fcm i'm gonna talk about that in a moment so whenever you click on this audio call button that you are having right here then we are going to initialize our webrtc plugin we are going to create a room in our db in our database and then we are going to send a notification to firebase saying that you have to send notification to my friend to accept the call so what i meant by that is we call firebase and our api so basically i have created a api using python here okay so okay so i have created a rest api here and that rest api will call firebase we call firebase fcm now that firebase fcm what it will do is that it will trigger the notification inside my friend's phone saying that uh i am calling and you can accept or decline the call so it will be available in the notification okay now whenever my friend accepts the notification and and the app opens on the video calling page then with the rest api i am also going to pass the room id so whatever i have created room so for example i created a room and saved in the database then that that same room id i'm going to pass it via the rest api and fcm and then use that to join that particular room from the database right so in this way once the web rtc connection is successful then these two phones can communicate simultaneously right so in this video we are gonna do how we can create a video and audio chat app using all these things inside flutter so till now i have created this basic ui and now first what we have to do is that inside your perspective.yaml go here and i have added some packages that we are going to need firstly i have added firebase modules these are needed the firebase database cloud firestore and we'll also be needing firebase messaging so the database that i talked about is nothing but we are going to use the firebase database and the fcm that we are going to use is firebase messaging okay then i am going to import the uu id package as well okay so it is nothing but the id of the mobile phone that we can fetch from this package another package i'm using is the awesome notification this i am using to show the notification to accept or decline the call so whenever i call someone that someone will receive a notification with accept or decline the call which i'll show you in the demo at the end of the video and then i'm using the main flutter web rtc package after importing these what you have to do go to the android folder go to app src main and inside androidmanifest.xml you have to add these permissions as well why we have to add these because we are going to use web rtc so we will be needing the camera permission the audio permission the bluetooth permission and the internet and all of these permission that i've copied from the documentation so we have to paste these as well after doing that what you have to do is [Music] first let's create a firebase account so head over to your browser and here you have to go to the firebase console i'm going to open mine here great so my firebase console is opening and as you can see we can create a project so i'm going to click here you can follow the exact steps that i'm doing now i'm going to create a project name so i'm going to call it whatsapp read this okay what's up redesign then i'm going to hit continue i'm going to hit continue select the default account and this will create a firebase project so this project i'll be using for all the messaging the notification part and for the database as well so it's completed and i'm going to click continue and my project is set up successfully now what i'm going to do is that i'm gonna click on android now i'm going to pass the application id okay so mine is this one which you can find inside android apple dot gradle is that whatsapp clone redesign after then you have to install the google services.json okay now go to android app and inside here you have to pass the file that we just installed okay like this okay it's not completed i have to do it again all give me a minute i can copy this from here [Music] and i can paste this now i can remove this and change the name to google services.json and click ok ok now after then i have to click next and then add this line inside my build.gradle so we have to go to the project level dot gradle and then we have to add this line right here okay after then we have to add the dependencies and the plugin for the google services inside app level build.gradle so firstly add these two lines and also have to add this line here after then click next and click continue and above whatsapp application is set up now what you have to do is that go to build go to the firestore database so we are using cloud firestore so we are going to set up that also in the console so create database i'm going to use test mode here click next and let's set that and click enable [Music] yep and our database is successfully configured so that's it that's how we configure firebase with flutter now i can use it to for the database and for the firebase messaging as well now let's talk about inside the flutter code how we are consuming firebase messaging and how everything is happening so inside our main dot dot as you can see i have all the imports which are not that important then i am having a user model with variable name as user so this is hard coded me so all of the data that i am needing for the settings page i am fetching from here profile page then i'm having a rick so this is the person that i wanted to video call now in the real time application real life application we are not going to hard codedly pass these variables but we are going to fetch that from the api as json and create object from that but for currently we are just going to use this hard coded rig here and then i'm going to call that awesome so basically inside the user model i have created three more fields here basically two added a uu id that means the unique user ident id that i am passing and a firebase token so what firebase token is is that let me open paint again if you know what it is then you can skip this part ahead as well so basically this is our phone again and this is our phone again now each of these phones has a different token so for example this is this phone's token and this token is this one okay now with the help of these tokens we can call the firebase messaging api so basically we have this firebase messaging api and tell it that we have to send a notification to this particular user having this id and then it will automatically send that particular notification or data to that user having that particular token okay so in this way we have this structure so that with the help of tokens we can send some data and messages even if the app is terminated or in the background then also it will work so for that i added a uuid and firebase token inside our user model so inside the user as you can see this is my firebase token that i'm passing and this is a random user id that i'm passing here same i'm doing with rick this firebase token is from another phone which i'm having right here which i'll show you with the demo and then this is also a random user id then we are having this function which i'll talk about in just moment but before that we are having in our main function awesome notification dot initialize so here we are basically initializing the notification the awesome notification plugin that we are having then i'm initializing the firebase and after then we have firebase messaging dot on background message so this line is important whenever we receive a message and the app is in background either terminated or in the background then this function that i just skipped this function will be called okay what it will take it will take a remote message and then we can use that message and fetch data from here like the room id the caller name user id house video and all these things that we are having so i'm going to get back here after a while then it will make much more sense after this after initializing the background message what will happen in the background message occurs we have having our basic app which we have talked about in previous videos but what i have created is that inside our views inside call page i have a calling page so this is where all of the good stuff is happening first i created a enum here so basically the status of the call if it if it is calling if it is accepted or it is ringing right calling this for example person a is calling to person b then on mobile a's phone the calling status will be set to calling if b accepted a is called then inside a phone the cost status will be accepted and if b is ringing is phone then the a call status will be ringing right so these three status i have applied here then inside our call accept decline page we are having our user call status and room id which we can get from other widgets and here the user is required and the call status we are fetching whatever that might be and the room id as well after then i am having the call status which i'll assign in the init state that is why i added late here we have a bottom sheet icons so basically we have a mute icon a speaker icon a microphone slash icon a video icon a bluetooth icon etc then this webrtc logic class i'm going to talk about in a while and basically the the this is the class where all of the you can say main functionality is written lying like accepting the call hanging up the call assigning the webrtc renderers and then calling the database to store the room id so all of this is happening inside our webrtc logic class so i've created an object from there then i have created a local renderer and remote renderer for the video calling for audio calling we don't have to show the local and remote renderer okay and then we are having a room id so basically inside the init state i am call passing the call status if we are passing then widget dot call status else call status will be calling after then i am initializing the web rtc so initialize webrtc right here and we have local renderer dot initialize and remote renderer dot initialize after then i am simply passing on add remote stream so basically whenever a user is added or is connected so for example i call person b so whenever person b is connected with person a then this function this callback will be called where we are getting this so src object of the person b and we are setting that value from the stream so that we can show the remote renderer if it is video calling we are setting this after then we are using the open user media function which is nothing but if i'll talk about that in the moment also but in a nutshell we are basically accessing the audio and video part of so basically here we are passing the audio and video as parameters so i can simply open that and in nutshell we can pass what media devices permissions we have to access and show for example video can be true and audio can be true as well okay after then if the calling status is calling that means the user is calling the somebody else then we are going to create a room which will return a room id and then we are going to send notification request to friend to accept call so basically we are calling our rest api that i have written in python flask and we are passing a room id and widget dot user else if the user is not calling if the call is accepted or if it is ringing then we are simply going to get the room id from widget dot room id and then we are going to join the room so in the init state if the calling status is not calling then we are going to join the room with that particular room id after then the main question is what is happening in the api if i call it here you can see that i am passing some of the important information to this api that user dot uid the phone number the name and the firebase token and room id as well after then i am doing a post request right here for that particular api url to send a notification to that particular firebase token got it so basically whenever a notification is sent from the api our background my background message handler will trigger and then this will receive the message so for example if a called b then all of the details of a with the room id will be shared with the person b as a notification data so i am fetching that here the room id the caller name the user id has video etc and then i'm going i'm using the awesome notification package to create a notification and here i am in the action buttons i am passing the title body channel key and id of the notification as well inside action buttons i am passing decline or accept so the user can accept the call and decline the call the important part here is that the key so as you can see in the decline the key is recline but in the accept the key is accept then we have a hyphen and after then i am passing the room id here okay so whenever the user clicks on accept or decline we have to listen that as well so for that i am doing this part inside our root page dot dot so as you can see in the init state i have created listen this listen is nothing but i have created a stream subscription right here known as action stream subscription and in that i am listening to all of the messages that is occurring so for example if i if i click the button accept then it is checking if the button key press starts with accept then we are going to navigate to the call accept decline page and i am going to set the call status to accepted and room id from the button key press that we are having so i am passing the room id here also right wait a minute so as you can see except hyphen room id so that is why i am replacing the accepted underscore with the empty string so that it will just the room id that is remaining if it is declined then we can simply decline the call and remove that room from the database and then notify person a as well that the person b has declined the call but i have not created that functionality yet in the app i am going to work on that as well so basically it will navigate to the call except decline page here awesome so in the init state we have talked about all this in the disposed method i am passing local rendered or dispose remote renderer.dispose and then webrtc dot hang up the local renderer so it is going to hang up that particular user it will end the call now in the get body i am basically creating the uf for calling for accepting and for ringing if there is any other status in future then i'll add that as well so for calling and accepted it is completed and these are almost same so for example for calling i am passing height of 100 so let me show you the ui as well if i click on the mobile button you can see the ui something like that let me hot reload as well so as you can see the ui looks like this i'm going to change the ui as well so for example i want to call william david then it will show calling and it will show all these buttons right here like to end the call to mute it to set it on bluetooth to our speaker and all of these buttons that we are having i'm going to change the icons and a ui also in this page to improve that as well so inside if this status is calling then i'm passing height as 100 and am creating a column here with 150 width and height as box shape dot circle which you can see right here the image after then height of 16 with a heading of widget.user.name the name of the particular user then i'm passing the size box height and then calling and that's it in the accepted instead of saying calling and i have basically created a count up widget so what this will do is that this will start to count up like a countdown but instead of going down it will go up like zero second one second two seconds so it will represent how much time is being taken on the call with the chat of person a and person b okay so i'm passing all this right here great so this is the ui part for this as well so let me show you a demo how it's working so i have configured a rick rollins right here so i'm going to click on here and i'm going to call this particular user so as you can see the ui looks like this right here and from here we can see that status success that means that our message is successfully sent to rick roland to the phone and if i show you the screen recording or i am going to pass a screenshot as well you can see this notification appearing right here that rick rolland is calling pickup right and we have two buttons green button as accept and decline as well so if i accept the call you can see that i am directly opening it's directly opening the app and now i can hear my own voice from the two phones and it's echoing right now so i'm going to put a phone away and the audio chat is perfectly working the buttons right now so i'm going to go back to hang up the call and now it's hung up and my original phone is nothing saying right now and the call is hung up so this way i we have successfully created a flutter web rtc app where we set up the audio calling for the video calling it is pretty easy we have already done all of the things right here we have the local renderer and we have the remote renderer as well we just have to show these renderers in the ui and that's it also i wanted to show you the back end part the python part so inside this whatsapp application i created a folder right here known as api and inside main.py we have this send notification right that i am calling inside our api dot dart file right here so this api url and send notification endpoint so this is nothing but we are calling this send notification inside flask python and if the request method is post that we are calling a shitty video post then we are getting the json whatever json we are passing that means all of these details and then we are going to send notification with that particular data and then we are going to return status success so if i search here as well the log is removed but you can see that it is successfully returned if i go to the send notifications i have inside the modules folder i have firebase functions.py right so basically here is where you have to add your database url and here you have to create a certificate known as service account key dot json so i am going to make a separate video on how to send notification from python and firebase admin so if you're interested in that then do let me know in the comments below as well i'm going to make a detailed video how we are sending the notifications from firebase using python but in a nutshell we are simply calling this function right here to send our notification so that is it right we have created a webrtc application with audio implemented the video is not implemented yet but while pushing the code to the getter for this part i'm going to implement the video as well i just have to add that in the ui so that is it for this video that i wanted to show you in the next part what we will be covering is that these two buttons are completed right this button is completed as well what is left is the messaging part which i am not going to touch right now the main thing that i wanted to do is the profile screen the ui first right so i have to create this ui whenever user clicks here or the profile photo i'm going to create the ui for that and also i wanted to create the ui whenever for the edit profile as well so these profile uis i have to create first and then i have to update some of the us screen as well so i guess that one or two videos we have to make more on covering the ui inside this application and then we can move on to the messaging the main part of this chat thank you so much for watching my video i hope you've enjoyed it and if you do then make sure to give thumbs up also i've upgraded my gears in this video like tripod like mic and green screen then if you have any suggestions for me then make sure to drop below that as well in the comments and i'll read them out as well so amish peace out even when you feel low you can still go even when you feel slow you can still go even when there's no hope you can still go i never answer the know man i still go go go go go go go go

Channel: Yash Makan

Views: 11,173

Keywords: flutter clone, flutter ui, flutter ui tutorial, flutter ui design, flutter tutorial, python flask, flutter app development, whatsapp clone app, flutter tutorial for begineers, flutter project, flutter responsive ui, flutter, flutter whatsapp app, flutter speed code, flutter dark mode, flutter api, flutter github, python and flutter, python, flutter tutorial for beginners, whatsapp clone flutter, whatsapp clone, flutter for beginners, dart

Id: TQ7n9p8aWpQ

Length: 39min 17sec (2357 seconds)

Published: Sat Jul 02 2022