How to Make a Video Calling App With Agora - Android Studio Tutorial

hey guys welcome back to a new video this video is actually sponsored by agora what is aguero aguero is a platform that offers solutions to make stuff like video calling audio calling live streaming real-time messaging it makes that stuff really easy on android and also in other platforms but i will show you that on android today we will actually make a simple video calling app here using the agora sdk so let's actually first take a look how this will look like in the end here we have a very simple text field in which we can enter a room name so we can create a room um to join and then we can have a video call in that room with our friends so let's call that development for example to discuss some development work we click join here there we go that is the default emulator webcam but if i also take my phone here and join that room as well you can see hello there here i am so the video calling feature works just fine and that is what we will do in this video so that will actually be very simple with agora so here i am actually in google chrome this is the agora website so you can simply check that out by going to aguero.io i'm currently on the product page so here you can just just see which product secure offers you can see video calling um a voice calling actually video calling live streaming real-time messaging and some more so it's a really cool platform what we will do here is or what you should actually do is to go to agora dot io slash en if you want the english website and you want to click on get started and then you want to create an account there so that's free i'm already logged in here because i already have an account if you have finished that and if you probably also confirmed your email then you will see this dashboard screen here what we need to do here to make agora work in android is to create a new project here if you're familiar with firebase for example then you will know this process it's basically just creating a project for your app i already have two projects here but i'll show you how you can create another one you need to give it a name let's call it agora youtube we can select a use case which is education in my case you of course select your purpose and well we could choose ideal authentication that is a little bit more secure way but since we don't have a lot of time here we will just use the testing mode and use a simple app id that we will include in our android app so we can then click submit there we go here is our new project agora youtube and here you can see there is an app id we can simply click on this closed eye icon here to show it and it will automatically copy that into our clipboard so we can paste that in our android app so back in android studio here let's actually create a little constant for that private const val actually let's make it a public cons variable so we can access it from other classes and i'll call it app id and i will simply paste what i created here in agora that a secret you shouldn't share that with anyone else um i won't blurt here because i will just uh destroy the project after this video but yeah that's secret and for real app you should also choose that more secure way of authentication however you will get the initial dependencies here and the initial project setup from my github repository down below which will essentially contain the dependencies that i already included here so that is the agora ui dependency um it's important to mention here this ui kit makes it super easy for us to do video calling um as you've seen here it just comes with this ready to go view basically and we don't need to implement this on our own however of course agora also offers an sdk that allows you to have much more fine-grained control over how your ui looks over how you integrate it into your project but for time-constrained reasons i will just show you the simple version here using this agora ui kit and we also have some compose dependencies curitin's just the basic kotlin stuff here it's important to also increase the minimum sdk because aguero requires that to 24 so we just want to increase that number here and click synchronize now and then we are already good to go i think it's worth mentioning as well that in settings gradle i also include included this jetpack url here so that it actually finds the repository from agora but other than that if you have done that we can actually jump right into the project and start coding so the app will consist of two simple screens on the one hand we have a room screen which consists of a text field to join a room and the other screen is just the simple video screen let's actually start with the room screen creating a new outline class of file here in our root package and calling this room screen we select file here yes i want to add that to git and we can create a composable called room screen that will take two parameters actually on the one hand it will take an on navigate function so when we actually click join and we want to join a room then this will be triggered to so we can actually navigate in our navigation composable which we will create later and it will create and it will need a view model here which we don't have yet so let's leave that empty for now well let's actually start with that actually because then we can we can directly implement the whole room screen so again in our root package i will just just create a kotlin class called room view model will be a class and that will inherit from viewmodel and here we will need two states on the one hand for the text field so that we save the current text and for that i will actually create a utility class so again in our root package new kotlin class i will call it text field state which will be a data class and it will on the one hand contain the text of the text field which is empty by default and we will have the option to pass an optional error so if the room is for for example empty we want to show an error so in here i will create a new state with my shortcut um you will probably need to type that by hand i will call this room name that will be of our text field state class of tab text field state remove that and we will actually have a shared flow here for the on join event so when we actually successfully join a room then we will send an event into this shared flow so we can actually navigate to the corresponding next screen um that is actually immutable shared flow of type string so we will send strings in that which is the room name we actually want to join let's create a public immutable version of that on join event without an underscore and that's just on join event dot s shared flow then we will have two functions here on the one hand when we type something into our room text field so function on room enter we have a name and all we want to do here is we want to update our state so room name value is room name value dot copy and the text will be just our new name and then we will need another function to actually join a room so function on join room doesn't take any parameters here we can do some validation work for example we can check if the room name value text is actually blank so that means we didn't enter a room and we want to basically emit an error here so we say room name value is room name value dot copy and this time we say the error is the room can't be empty then we can say that after that we return so we don't want to actually join the room if it's empty if it's not empty we can say we launch a crew team and view model scope and we say on join event emit and we basically just emit the room name value that text so the room name we actually want to join that's already it for this room view model the next step would be to go to room screen and implement that so in here we will have our review model reference now which is a room view model and equal to not health view model actually just normal view model this one here i don't know why it includes that long package name but it seems like it needs that then we need a launched effect block to actually listen to these events we sent from the view model to our screen here so we want to save view model um on join event dot collect latest which will give us the room name and when we receive that join event we actually want to navigate to that corresponding screen so we want to say video screen and we pass a navigation argument which is our name so far so good let's implement our actual ui here that will in the end just be a column that consists of a text field and a button modifier will be modifier filmmak size we can set the vertical arrangement to center and the horizontal alignment to actually alignment end and well as i said in here we will just have our text field the value will be viewmodel roomname value.txt let's move that into separate lines and the on value on value change function then we will trigger our view model on room enter function we can also give it a little bit of a modifier and give it a width basically so fill max width and we can give it a placeholder so the placeholder will be text that just says enter a room name so far so good for our text field then below the text field if we actually have an error we want to display that so view model room name value error that let so if if that error is not equal to null we actually want to display that below below our text field so we can say the text is it and the color will be our error color so material theme colors era and we can also highlight our text field if we have an error so i think it's is error yep here we save your model room name value error and if that is not equal to null we know we have an error and we want to mark that in our text field and then all that's really missing here in this room screen is a little bit of space so we can add a little spacer of atp so it's atp high and below that we will have our button that when we click that button we will actually show the video screen so we can say view model um actually on join room and it consists of a text that says join so far for our room screen here the next step would be to implement the video screen and the video view model first let's go to our root package create a new kotlin class i call that video view model that will be a very light class the only thing we actually need that for is to store two states if we actually have permission to record audio and to show our camera so i will create a state here has audio permission that will be a boolean and false by default we will do the same thing for pass camera permission also boolean and also false by default and then we just need a function to be able to actually toggle these booleans so function on permissions result i will call it and we can pass to booleans accepted audio permission and we can pass another one which says accept it uh camera permission also boolean and then we just say has audio permission.value is accepted audio permission and has camera permission that value is accepted camera permission so far for the viewmodel let's implement the video screen so in aguero ui kit in our root package creating a new kotlin class video screen selecting file enter and we will create a composable called video screen it will actually need the room name we want to join it will need an on and navigate up function here actually because we want to override that here in this screen because when we actually navigate up and go to the previous screen we also want to make sure that we leave the current call so that we that we don't stay in it because that would be the default behavior and we need a reference to a review model video view model this time and that's also just equal to viewmodel let's first make sure that we actually request the permissions and then compose that works with the activity results api which i also included a dependency for so we can create a permission launcher and that is equal to remember launcher for activity result and here we need to pass such an activity result contract that also exists in xml just a little bit different than here in compose we need to pass a contract here so we need to we need to tell it what kind of activity result we're looking for we're looking for permissions so we want to request multiple permissions activity result contracts we choose therefore request multiple permissions and in on result so when we when we get the result of that activity then we can we actually know if we accept that if we accepted the permissions or not so here we get the permissions in form of a map and we can say view model on permissions result accepted audio permission will be if we have an entry in the permissions map that we get with the key record audio here if that's actually true we know the audio permissions were accepted we can do the same thing for accepted camera permission and we swap this out with camera and that's already it then we have the state of the ad in our view model and we can make use of that when will we actually launch this launcher so when we will we start to request the permissions well we will just do that initially when we open our video screen so we will simply have a launch defect block here passing true for the key so it's actually only executed once and in here we can then say permissions launcher dot launch and we need to pass an array of the permissions that we actually want to request so that will be manifest permission record audio and the same for camera that's very easy we already did that now so we will request the permissions i won't do the real proper permission handling here to also show rationale if we decline stuff like that just for time reasons as well and now how do we integrate agora into into our ui here agora currently does not have a compose integration here in android but we're using compose luckily there is a view to easily migrate um an x in l view to a compose view and that is just using the android view composable so we can say android view that is a composable and we need to pass a factory here um that factory is in the end a lambda function which gives us access to the context and with that context we now need to describe how we would create our xml view here and the xml view we are actually interested in is the agora video viewer so we want to create that using our context and we also want to pass the so-called connection data so that is agora connection data and it will contain the app id here that we actually need to pass so that it actually knows which account belongs to you and here i'll choose main activity that's actually not my activity just app id like this we can also add the annotations here that we that that are suggested to be added like this and that is already our agora view here we can also add a modifier to fill the whole size modifier dot film exercise like this and format that a little bit and then we're actually good to go one final thing that's missing here is that if we click the back button in the screen we actually want to leave the session we want to leave the channel and not stay active in there for that we need to override the on back press behavior which we can compose do with the back handler here this is a composable and that will be triggered when we actually click back so all we really want to do here is we want to on the one hand say on navigate up so we want to get to the last stream the last screen on our backstack but we also want to leave the session how do we do that because we have the view reference in here so we would actually need to call a leaf channel here but here in the back handler we don't have that reference so we can simply create a reference up here which is var agora view which is an agora video viewer let's make it nullable and set to null initially then here in our android view composable after we created that we can say that also and just assign the the currently created agora video viewer to our agora view so a guru view is equal to it and then here in our back handler we can say agora view make a null check and we can say a leaf channel and that is really it here for the screen the really last thing we need to do here is to implement navigation between our two screens which is very simple we can create a navigation composable or we can actually also just do that in main activity because we don't have anything else in here so we can say we have a nav controller here that is remember nav controller you don't need to pass navigators here and then we can say we have a nav host composable we pass the nav controller and we would also like to have a start destination let's also format that a little bit here like this so the start destination is the destination that will show up first so the first screen which will be our room screen then in here we can have different composable blocks basically one for every single screen the first one will just be our room screen so we pass that as our route and we can then have the room screen composable in here the on navigate function that we need in the room screen just comes from the nav controller so we can say nav controller double colon navigate the other composable will be our video screen so let's call it like that and that actually needs a navigation argument so we want to pass that here in curly braces and we will name this room name then we also need to kind of register that here in the arguments list which is a list of nav arguments so we have a list of a nav argument the name here will be room name needs to be exactly the same as here and when you did we need to declare a type for this that's in the end just a string so we choose a nav type that a string type then here in this composable we will have our video screen which needs the room name um how do we get that now well we have our nav backstack entry here which contains our navigation arguments so that is what we will do we will say val room name is it that argument arguments get string and we just pass the argument name here which is room name and if that's actually now we can just return here because then we don't want to navigate we can also get rid of this warning pressing alt plus enter and adding this annotation to our class and i think no that's not it yet we also want to oops as on navigate app which is our nav controller double color navigate up but that should now be everything we need to do let's let's just add a little bit of padding to our root surface here modifier is modifier heading of let's say 16dp and import tp now one thing actually that i forgot is implementing the permissions so in our manifest we want to make sure that we actually have our permissions that we need on the one hand that is internet and record audio and finally the camera one and down in our video screen we only actually want to show this android view if we have permission so we can check if our viewmodels state our has audio permission if that's true and if our remodel state has camera permission is also true only if we have these two permissions we actually want to show this android view and then here in this also block something that i also forgot is we also want to just make sure that we join the channel uh the room with this name so we can say um yeah we can just say it dot join and we can just pass our room name that's really as easy as that we we just call join passing the name it will automatically create that that channel if it's not existing and if it is existing it will join the current one let's now relaunch that on our emulator and i will also relaunch that on my phone and then i'll see you back all right there we go let's actually try this out and enter a room name let's take development again we want to join um now it asks us for permission yes we want to accept that we also want to accept recording audio and there we go there's our camera which is the emulator camera here right now so i will now join this using my phone development i'll join and hey there we are hello how's it going and it seems like it's working perfectly fine i can also switch my camera and you can see my setup here here so everything seems to work fine if i go back we leave the session in the room so pretty cool stuff here so i hope you like this video if you want to make a similar app or an app that requires live streaming audio calling uh real-time messaging then you should definitely check out agora using the links below so take a look and uh just explore that a little bit try it out in your apps as i said for testing it it's totally free so yeah do check it out thanks a lot for watching and i'll see you back in the next video bye bye you

Channel: Philipp Lackner

Views: 6,214

Keywords: android, tutorial, philip, philipp, filipp, filip, fillip, fillipp, phillipp, phillip, lackener, leckener, leckner, lackner, kotlin, mobile

Id: 0siVVtQEOFM

Length: 24min 51sec (1491 seconds)

Published: Sat Nov 06 2021