Huddle01 🛠 Adding real-time audio/video in your React DApp using Huddle01 SDK

[Music] okay all right hey everyone so my name is Mizan I am a mobile engineer at h01 and I'm going to conduct this quick Workshop where I'm going to be showing you all how you can add realtime audio video communication to your react applications so I chose this because most of the hackers over here use react for their hackathon projects so how many of you are using react to build your projects in this hackathon okay nice that's nice that's a quite a good number so if you want to use Audio Video in your application uh you can use our SDK to do that and we also have multiple track prizes which I'll announce at the end of my talk you can apply for those bounties as well so to get started uh let me talk more about uh what hle 01 does so we follow something known as a three pronged approach the first one is our hardan app so it's a video conferencing platform just like Zoom or Google meet uh and we also have a mobile app and a web app for the same the second layer is our SDK and apis and this is what you are going to be using in this haathon so these sdks allow you to integrate audio video in your applications uh in as less as 10 lines of code that's all you need and fun fact we also built our web app and mobile app using these same sdks so they're available for you to use in this aaton so feel free to use them that's what I'm going to be talking about and the last layer is our drtc protocol that we are working on so what this allows allows us is to create a people powered network uh our protocol engineer is on our booth on the hardle 01 Booth you can come and talk more uh with him about this protocol so what you want to be Focus uh what you want to focus on in this hackathon is the SDK and that's what I'm going to show you all so quickly this is what our apps look like uh on the left you see the video call uh layout and on the right hand side you see the audio spaces and you could do all all of this in your own app uh using our sdks so we have this the multiple solutions that our sdks provide are plug andplay apis and recording you can also record your calls in your own application and you can also bring your own web3 identity so that means you can use NFD Avatar and your decentralized names inside the meeting uh using our SDK and we also have token gating so this allows you to create locked rooms which can only be joined if you have specific tokens in your crypto wallet and this obviously is done using the crypto wallet login we offer multiple login options as well and the last thing is the customizable iframe so we also have an iframe offering which allows you to embed video calls without much customizability but uh sadly that's not what you're going to be using this haathon for the bounties you have to use the sdks uh not the if frames so that's another solution that we offer so the the three sdks that we have are reactjs react native and vanilla JS we have flutter and Unity sdks coming soon but uh these three are available to use right now so let's get started uh I'll quickly show you a react app and a very simple video calling app how you can uh add how you can join a room and have multiple peers join the same call so to do that you need to install two packages is one of the first one is the hard one/ react package and the second one is the hard one/ server SDK package now the important thing is that we recently launched our Alpha versions of these sdks and that is what you want to be using for the saaton so your submissions will only be accepted if you're using the alpha STK so to do that when you install using npm or Yan you just need to add at Alpha at the end of the package name as you can see on the screen so the hard/ react package is the client Side Package it allows you to do all the important things such as joining a room and also sharing and re receiving video and audio streams and the second package server SDK is a utility package which allows you to log in and get access tokens for joining the rooms so that's a very small package and it you will use it only in the beginning but the most of the heavy lifting will be done using the react package so be sure to use the at Alpha while inst installing the packages so I have a demo app over here and if I go to my packages on it's a quite simple nextjs application and if you seen the dependencies I have the react and SDK installed which are the alpha versions of the same so once you have installed the application the first thing you need to do is wrap your app inside a provider so this is what will initialize your application and so at the top level in your app.js file you need to import the hardle provider from our package as you can see at the top those are the import statements and I hope it's visible uh so yeah we we expose a hle client which you can initialize like this and then uh you wrap your app inside the hle over huddle provider as you can see at the bottom so to do this you need to pass uh two options over here the first one is the project ID the project ID is the compulsory param and the second one is an options parameter which is optional so for the project ID you need to uh go to our documentation which is alpha. dos. hard.com so please make a note of all of this and once you go to the documentation website you'll see the get an API section over here uh at the bottom once you go there you have to connect your crypto wallet I'm going to be using metamask and once I connect my wallet uh two two Secrets will be generated for me here the first one is the API key and the second is the project ID I'll show you where you're going to be using both of them uh but like I showed you earlier the project ID this one the one uh at the bottom is what you're going to be using over here so when you initialize the app using the hardle provider you need to pass this project ID and this project ID is unique and secret to your own project so put it in your EnV file I do not commit it to GitHub and like protect it in that manner so once you've done that your huddle huddle client is initialized and you can like join rooms and get started with the audio video communication so once you do that the next thing you need to do is create an access token now like I mentioned earlier you have an API key also generated over here and this is what you're going to be using to uh get your access token so like I mentioned earlier the server hdk package allows you to create an access token and this is done on the server side so if you're using nextjs you can put this in an API route or you can put it inside your serers side rendering uh route like get serers side props or if you have a dedicated node server you can do this over there as well so I'll show you how how I have done it in this sample app in the sample app I'm using serers side rendering so over here in my nextjs index route I have this get server side props function over here and I'm initializing my access token over here now this access token is unique to every participant in a room and it allows you to join only one single room so you need to pass these two parameters over here API key is the one that I showed you earlier that is generated for you and the room ID now for the room ID you have to use something called the create room API so if you go back to our documentations uh documentation and you go to API reference you'll see a create room API over here so this can also be done from the server side as well as from the client side or you can also use Postman if you want a hard-coded room ID for all of your rooms so once you call this API out you'll get an you'll get a room ID so now you have an API key as well as a room ID and that's what you need to pass over here while getting your access token now this is done for every single peer and once you do that these are some additional parameters that you have to pass all of this this is the default this is what the default options look like so you can take a picture of this as well if you want or you can make a note of it but uh all of these are like detailed uh advanced stuff so if you want to know more about what happens when you change these uh parameters you can like visit me at the booth and I I'll walk you through all of that but uh to get started this is all you need these are the default parameters all of them are set to true as you can see over here and you can also pass a wallet address over here so if you're using cryp to log in in your application already you can communicate communicate with that uh layer and get the wallet address of the user and pass it over here to get that specific access token now once you've done that this token I'm sending it to my client side using server side rendering and I'll get it over here at the top of my next CHS page so I'm getting the token over here now that's done as well so now I have initialized my app and I also have an access token that's all you need now we can get to the good stuff so the next step would be obviously to join in a room where you can uh chat and like video call with other participants so all of our uh functions inside the inside the react SDK are available through hooks so for joining and leaving the room there's a hook called use room uh as you can see on the screen and this use room exposes two functions to you join room and leave room it's that simple and when you call these functions you'll obviously be able to join or leave a room so if I go back to my demo app I have this hook called over here it's use room and it returns to me join room and uh State and if I did that it would give me a leave room function as well I'm not using that function in this app so I don't need to import it but if you were doing that you could get it over here and this join room is a function that is callable so once I've got that I can scroll to the bottom and I've created a button over here which says join room and on click I've added the join room function that I'm getting from the hook now this function also accepts two parameters uh it's like one parameter and object and it takes two Fields the room ID and the token so token is obviously the one that we got from the server side the access token and the room ID is the same room ID that you use to generate the access token so if I entered another room ID over here you wouldn't be able to join that so that's how we ensure security and privacy so for every paer there's a unique access token and that token is unique to the room that that was used as well so this is what it looks like if I go to my app I have these buttons over here that I've added the first button is the join room button which I just showed you and when you call the join room function uh you'll be able to join the room so we'll quickly do that so over here at the top you can see something called idle so that is the state returned from the US room hook as well so the US room hook also returns something called the state which is the state of the room it can be either idle connecting or connected so once I click on the button you'll be able to see that it changes to connecting for a brief moment and then to connect it so once I click the button it changed from connecting and then to connect it which means that I have successfully joined the room and now I can share and receive audio video streams from other participants so once I have done the join room thing we'll move on to the next hook so once the join room is done we need to check out the video audio hooks right so in this application I'm just going to show you how to how you can fetch your own video and share it with other participants so the next Hook is something called use local video now use local video as the name suggest relates to your own video streams so local stands for your own video streams and it gives you multiple it returns multiple items here as well just like the use room hook so the important functions over here are enable video and disable video so these are the two functions that you're going to be using to turn on your video inside a meeting room and turn it off so again I've added a button at the bottom for both of those so I've added a button that says enable video and a button that says disable video and I'm calling the respective functions when I click those buttons so once I click on enable video over here you'll be able to see that that's me uh that's my video and that's my local video uh I can also click on disable video to turn it off and it's gone so that's how you would uh use the enable and disable video functions uh now those were for your own video right for a local video but what if there are multiple participants in a call and you want video audio streams coming from those as well so we'll move on to the next hook for that the next Hook is called use Pier IDs now what use Pier IDs does is returns it it RS only one thing which is an array of the peer IDs now these peer IDs are unique identifiers for every particip ipant in a room so what this will allow me to do is it will give me a list of all of the other participants excluding myself so once I get those participants what I can do is I can map over them and once I have mapped over them I can create I can render a video component for all of them so that's what I've done over here Pier ID it's a string and once I map over it I'm rendering this component of mine called remote pier and I'm passing the pier ID to that component so this is what the component looks like it's nothing it just renders a video component uh and I'm doing this for every peer ID in the meeting so inside the remote Pier I've got the peer ID and I know that this these are the participants inside the room now how do I fetch their video so like I use use use local video for my own video streams very similarly there's something called use remote video so you can see all of this symmetrical symmetrical nature between the two hooks so local stands for my own video and audio streams demote stands for other participants so once I'm rendering this video component for all of the participants I'm calling the use remote video hook and I'm passing that specific Pier ID to that Hook Once I do that it will again return me a stream which is the video stream coming from the other participants and once I get that I'm just rendering it inside a video tag uh a simple HTML video tag and yeah that should be it so once I go back to my app uh I am enabling my video again and this time I'm also opening uh the same uh server in the in in another Tab and you can see over here also the room is in idle streate right now so I'm joining the room from this tab as well and once I do that I can see the video stream coming from the previous tab uh again the room state says connected which means I'm in the room and now I can enable my video in this tab as well and that's me again I can disable it over here as well and enable it back if I go back to the previous tab it's the same you can see the the one at the top is the is my own stream and the one at the bottom is the remote stream coming from the other participant and similarly if I opened another Tab and joined as a third participant I would do the same I would do join the room and be able to see the other two participants and I could enable my video over here as well and it would just keep adding all of the pier IDs in the similar fashion so this is how simple it is to use uh R SDK the important hooks that you need to know are use room use local video use remote video and similarly if you wanted audio it's the same use local audio use remote audio so that's all you have to do you have to use these hooks to build our application I'm going to be at my booth and if you want you can come and chat more about your project and if you need any sort of help I'll be there to help you throughout the hackathon and yeah we have three different tracks we have started which we're going to be Distributing I believe at the exit of this room or maybe somewhere or you can even get it at our booth we also have merch for your all t-shirts and everything for grabs so come and take those as well and yeah these are our documentation so please please scan this this is very important you need to use the alpha SDK and the alpha documentation which you can get by scaning this QR code so quickly take a picture and and these are our socials the first one is our Twitter do tag us when you're building your projects and we will give you exclusive merch for that as well we have a lot of items in store for you and the second one is our Discord server so all of our development team marketing team everyone from the hardan team is actively available on Discord if you need any questions or any help and you cannot find us so drop a message on our Discord server and we'll be happy to help you