Huddle01 🛠️ Building Powerful Communication Dapps - Akshit Gupta

foreign [Music] and today I'm going to be presenting a workshop on building powerful communication apps and tailoring dap experiences with iframes and opengating so we'll be going over two sdks today so one is the client SDK and the other one is the iframe SDK so before going ahead with the workshop first I'll discuss about the importance of Audio Video in the future these days we see a lot of short video from platforms such as Instagram and Tick Tock where there's a very grave importance for audio and video where people communicate with each other and users you know tend to retain 95 percent of the message when they listen it on video instead of text so audio video is the future and it's really important and that's what you power at hurdle so if you're not familiar with the adult01 web app this is the and this is what it looks like so once you enter the adult01 web app um this is what you get you can have a chat you can put your nfts as pfps you can even like stream live sphere or even live stream it to YouTube twitch Etc and we also have a mobile app which you can install on either iOS or Android so it would be a really good if you you know go ahead and try it out and before going into the sdks because the the r201 web app is one of the examples of the sdks itself because it uses it and once you get familiarized with the platform it will be much easier for you to understand how the SDK works so I will strongly recommend to go ahead and check it out so at hurdle we followed a three-pronged approach where we are relying on the DAP which I just showed you and we have our infrastructure which are which is our sdks and our protocol so our dap is a progressively decentralizing meeting platform with all the web 3 native features like token getting nfts spfvs and much more and our infrastructure our Plug and Play sdks are also there which are supported for multiple platforms or web uh in which we have support for multiple languages and then we have our protocol side which we are still working on and we've recently made quite the development of the crypto economic side as well go ahead and check it out on Twitter so yeah so at the end of this Workshop you'll learn how to do two things which is mostly customizing your live streams to White Label your dab according to your Dows or it is nft communities needs and then you can even token get your communication and Implement Access Control to your dab so first of all we'll be going ahead and customizing our ideal eye extremes and I will first quickly go over the docs and show you a quick work through then we'll do a shortcode along and see what we can do with the iPhone sdks so I'll go head over to the 1301 Docs so you can head over to airtel01.com stocks and this is what you'll get to check out the iframe part you can head over to the quick integration and select ice cream here and this is what you get so these stocks are we have support for vanilla as well as react and you can hand over to vanilla and check out the code it's pretty simple you can just include a CDN script and go ahead and use this so what is possible in the iframe app will show you real quick so I've hosted this example app which you can check out here I've also placed into Linksys so you can head over to this link to check it out and this is the link for the docs for the iframe and you can even scan the QR portal Google to there so once you you know use the iframe um what is achievable is this something similar to this so this is meat with wallet and they integrated added over my frames and they had full customization as to what they can set as background if they can white label their logo and so on so over here what he has done is that he's made the background transparent and is toggling uh his um dark mode and light mode so it looks really good and blends really good with the platform so we're hoping to see some customization relating to the same and this was uh like we entered this in a closed way before we shared it with some clients internally and tested it out now we have it out for you as well and you can customize your frames using the iframe SDK so let's see how we can do that so this is an uh like frame after cryptember so as you can see you have a lot of customization here you can head over to this link and you know play around with it so you can have support for different wallets so if I say all then you know these many wallets which you can customize then you can maybe unselect some if you want just meta masks it so you can just check on metabolask and you'll have it there so this is how you can you know customize your iframe as well and if you want to set the background on the iframe what you can do is that I'll copy and they go uh so this is a background that I'll add this is one this is from the board apps website so if you say you wanna build a metaverse sort of a thing for importance what you could do is that you could set a background here and you know customize the feel for body holders and then you can you know even set Avatar URLs for your pfp strong head then once you enter that app then you you'll have some more customization so I'll connect my wallet here and I start painting So once I'm in the meeting I have the option to you know mute myself so as you can see now I'm muted like unmute then even I can like share my screen so it will look like this like that I'll share real quick and show you so this is how it works so you can uh and like control the idle01 web app from the parent app where the extreme SDK is installed and control it that way then I'll disable the share and then if I can even add you know a redirect URL after the meeting ends so say you want to you know redirect it somewhere to your own website so I'll you know put in the address website link so this is the r101 website and if I put this on the redirect URL and save this so now what will happen is once I click on end meeting for all it will redirect the Google application to 1001 I'll show you that and I can even send reactions from there so you can select a penny reaction and send it so this is how you can control the Hado 01 like frame from outside of the outside of the idle app and once I click on end meeting for on see it redirected Network idle01.com so this is how uh The Frame Works once you've implemented it now we'll be you know delving into how to code this using the iframe sticker so if you're using the vanilla for you to get access to methods for you know controlling the meeting you'll have to include the CDN script inside your app and you have to render out the site frame and once you do that you'll get access to this h i its name object on which we have this iframe API method so using this you can set different parameters so like over here we've said the initialize function where we've entered the background so you can do that and you can you'll have access to different methods over there so for today we'll going we'll be going over the react time frame and see how it uh how it can be implemented on a react app so yeah so the first thing would be to set up a react application we can quickly do that using next.js and then the second step would be to install the ism SDK onto your the map and once you do that you can just import the header live stream react component and paste in the URL for the for the meeting link and uh you can even give it you know class names so it has full CSS support here as well and once you do that you will have access to instance methods from the extreme API which you can directly import from the SDK and we can then call methods such as initialize and on in the initialize you can send an object where you have different attributes that you can set as we saw before on this application like you have these different redirect URL only if and background so these are all the attributes that you can set to the object so this is how it works and let's head over to the port so this is what the code looks like so this is a basic react page in next years we have set up a simple next steps project and this is the same port as the one I just showed you this one so what we're doing here is we're just importing the metal is frame they are component from the SDK and rendering not in that markup and we've pasted um the iframe dot handle.com link here so that you can just host any meeting so if you'd like to you know have a specific room ID you can even do that you can hand over to iframe.

rz1.com and like if I show you this so this is iframe.01.com and one say this and you know create a meeting so now that this meeting is created I can simply paste this URL in my code as well so if I paste this in my code right here that will also work so it will redirect me to the URL uh inside the iPhone so this specific room idea will be able to join so this is how it's working and then we have a couple of other things such as iframe API so if you check this out uh we have this initialize method being called on the iframe so if I just remove all this comment in this for now and if I press and press Ctrl space I have access to these properties so you can mention a background here so I have added this pixel photos URL which you know generates a random image whenever it's called so that's what you see here in the browser okay yeah so as you can see we have this random image popping up here every time we refresh so this is where the pixel photos API so we just paste this as a background URL and it works really good then you can even specify a different wallets that you want so if you if I go ahead and type this so you have access to one you have access to on the I'll show you in code yeah so if you select wallets here and press Ctrl space so you'll have access to different wallets which you want to show so if you specify start here it will show all the wallets that we had so it will show something like this and if I select a specific wallet then it will show me that particular wallet so say I said metamask so it will just show me this meta Mass thing over here so this is how you can customize the wallets and you must be thinking what this you use event listener part is so we have different events inside the event listener so I'll show you how that works so if I head over back to the browser and the talks we have different events that you can listen to so say you want to do a particular side effect on a particular event so if you want to do you know um an alert when the room is joined so you can listen to this room joined event in this format you can import the use event listeners on the iframe SDK and paste the room joint event here and put whatever side effect you want inside the Callback and you'll be good to go so in our code what we're doing is where uh we're waiting for the lobby to be initialized so if you head over to the hurdle application whenever um you enter the application what happens is you see a loader in before the lobby so that look at that time the wallet is being initialized and other things are happening so once the lobby is initialized and that loading stops that's when this event gets fired and you can listen to that event using this username listener and in the Callback we've also like put the iframe dot initialize function where when the lobby is initialized you can simply initialize the background one it's another customization in the login so that's what this is for so we are hoping to see you know really good use cases of this and this is all uh we have for the iframe this is very simple to do if you just head over to the docs and try it out it should be pretty simple but we don't want you know just clones that we that we saw so we saw the example app see so we don't want that uh you just clone this up and you know use just do minimal customization that's it we're hoping for some really good use cases uh so there is our we have different apis as well so if you head over to the API reference you can see we have an iframe room API so maybe you can utilize this to create rooms you can you know token get your meetings as well so if you see uh you can even create token rated meetings for iframes so if you head over to the Token gated API you can do that as well so we're hoping to see good use cases maybe you can create a like create a meeting platform for ape coil holders where if you own an nft a ba y c and FD then only you will be able to enter that meeting or something related to the same but we we are hoping to look if you're using the ice cream we're hoping to look for really good you know innovative ideas here so yeah so let's head over back to our slides and yeah so that that was all for ifreams and if you like have any doubts related to the iframes or anything you can you know join that Roman Discord and uh stare or even the eat Global destroy as well so now we'll go we will go ahead and head over to the client SDK and Clyde SDK is for the users for the developers who you know want more customization than the iframe so the iframe you know limits you to uh what you can see in the i201 web app and it's good for people who just want a white enabled solution and don't want to you know code the code the web app from scratch and just want customization in the web app and have a meeting so you get everything done for you but if you want more customization and you want things to look and feel and the way you have your design in the web in your own web app and uh you want more of this one like you want to move your viewports around and have a chat move around something like that so if you want more customizations client SDK is the way to go so we'll we will go ahead and see how that works so the hardware and SDK profiles offers multiple things so if you want to bring your own wallet and have your own identity management you can do that as well we'll see how that works on on in the news and then we have different we have a state management solution built-in in the headlow and SDK so you don't have to you know build your own State Management entitle the state for different peers and all that we handle all that for you and you have features like recording and live streaming so you can record like record a particular instance of your web app so if you want that you want to record um from time T1 to time T10 then you can record that particular Moment by entering a bot so that can be done programmatically we even have a video out for that we link it somewhere down and then you have communication which is the basis of the SDK so you can have audio video communication you can have one too many communication you can have many too many communication and so on so we'll be delving into how we can do that so to understand the SDK before going to the code I'll first explain how the architecture of the SDK works so these states that you can see the the Bold ones so idle initialized not joined joining Lobby these are all the states of the application in which it can be so you can listen to these states so just remember these so at one point of time only one state is possible so if it's an idle State uh it can't be initialized so if you are in idle State and you call the initialize function it will go to the initialized state and in that particular initialized State we'll have this not join State and then in that particular initialized State you can you know call different methods to move around from the states so say you're in the not join State and you call the join Lobby method so it will pop you over to the joining Lobby and once the lobby is showing it will pop you over to the Joint Lobby State and then if you call the leave Lobby function over there then it will you know get you right back to the north right state so it's all based on a state machine so you can move from one state to the other and you can't simply you know jump up a state so if you're maybe in non-joined state and if you want to join go into the joint wrong State you can't directly go there you'll first have to enter the joint Lobby State and then move on to the giant one so it's based on state machines and it is very closed so you have to follow proper structure to get like navigate between different states so this is how it works so I think it's pretty clear from the idle to initialize function that you just have to call the initialize and to call the initialize function you'll also need to supply it with the project ID so I'll show you that as well so if you head over to the docs and you head over to the API key section you can just connect your wallet here and once you connect your wallet so you'll have access to the project ID then API key and a white string domain so if you're working on local you won't really need to you know use the Y testing domain so you can just skip that so you can copy your project ID and use it in the initialize function so if I show you how the initialize function works so you can head over to the user login hook in which you can get the initialize function and this is how it works so you can just import user201 from the react SDK and once you get the initialize function you can call it inside a use effect and put a project ID there which you get from the API Keys section so this was the API key section and if you want to you know use the create room API or maybe a token getting API and we saw one for iframes as well so you for that you'll require an API key so if you if you want any banking that is also provided here so you can just copy the API key from here and use it in your app and call different apis so this is how this works so once you initialize your dap with the project ID the next step is to join a meeting room so for joining the meeting room first you have to join the lobby and to join the lobby you'll need a room ID so to get a room ID you have to you have to call the create room API route which is called using the API key itself so I'll show you how that works so over here what you can see is that we have this API note zero one route and we were calling the create room so in the create room you have to specify your API key in the headers so it looks something like this you can just use x API key authentication and provide the API key value here which you get from the docs we saw on before and once you call this you get this room ID back so using this room ID you can join a Lobby then join a particular road so if we head over to the docs as you can see in the use lovely phone method you can still find the join Lobby method here and in that join Lobby you have to specify a role 90 so this room ID is the one that you get by calling the insomnia route and to you know you have to call this route um on your back end so I'd suggest you call this on your next CS um server side and that will be great because you don't want to expose your API key on the front end if you do that then like your API key will be exposed and someone might you know use your API key and exhaust balls so I'd suggest you use an xjs server to call this API API call and get the room ID and then you can communicate the room ID back to your front end so this room ID is then used in the join open method to join the lobby and then we enter the join Lobby State and in the join Lobby State then you can you know talk on your cam your mic then fetch your video stream and all that so we also have an example app out for that I'll show you that second that minutes can take your others yeah so you see head open here this is the example app for the ACT uh next years and you can you know use this to test it out and how the functionality is working so it's based on the state machine itself so right now initially we are in the idle State and to get to the initialized state you can provide the project ID which you'll get from the talks so I'll do this again and once I have the project ID I can supply it over here in initialize so as you can see now we're in the initialized north joint state which is this one so we are initialized but not tried so to join the room what you'll have to do is you have to paste in the room ID which you created using the same project ID so you put in the um put in the room ID and join the lobby and as you can see you were in the joining Lobby State and now you're in the joint Lobby Street so you have access to different methods over here so you can fetch the video stream fetched audio stream and all that right now I won't be going ahead with that as this meeting is being recorded and my camera is being accessed elsewhere so it won't work so I'll just join the room directly and as you can see now we're in the joint room State and in this joint room State you'll have access to different other different methods so if you would have you know enable the audio stream before you would have access to produce Cam and if you've enabled the mic before then you don't have access to produce bike which basically means like sending your video and audio over to the other peers so this is how that works and you'll have also have access to the start recording method so this is how the flow works and this is the basic overview of why you need the client SDK so as you can see this is all customized you don't have any UI this is all just sample code so you can just code out your own uh web app from scratch and have full customization towards what you want to do so these are some really good client SDK examples we've seen so these this is one of our clients called Parallax and they've created this video meeting tab using the client SDK itself so as you can see they've customized the whole UI here and you know they even have chat and um they they like created the whole UI from scratch and use the client SDK and they even have a live stream option where you can live stream so yeah these are some these are a couple of ideas that we have okay one idea is missing over here so I'll quickly paste that in rotate yeah for now you can check out these ideas so a metaverse where a coin modelers can join you know a token needed call which I mentioned before so if you're using the ice cream SDK then we can do pretty cool things with this and for um we'll also be seeing um what you can do with the client SDK using the oauth package so let's go over that first so if I head over to the SDK code so let me give a quick walk through Target working with that so as you can see um we've installed the hello and react package here so if you check out the Imports this is done at low and react and you can even you know clone this app using using the CLI tool so if you just type in npx create title01 you'll have access to all these example apps so you can just uh import user01 from l01 react and then um what you can do is you have the initialize function as we showed before and this is how the code flow looks so one cool thing over here is that in your jsx what you can do is you can do conditional Things based on the methods so if I check out any button in my uh okay let's change this button out so if you have this set display name function so each and every method in the hello van SDK has a at renewed card is callable so if you have you can just check the is callables value if it's true then under function would be callable so you can you know toggle States based on that show a different UI if you want so as you can see joy and drone also has this is callable property so you can use this to you know conditionally render uis and do a lot of stuff so this is one thing and I think we went over all the flow for initializing and joining Lobby and then eventually joining the room so you can do that using leave room as well like you can leave the room of using this method once you've joined the role then we also have event listeners placed so as we saw before in the iframe SDK as well you have access to these events which you can you know use to have side effects run so I'll also head over to the talks and show you that so over here if you go to events then you have access to all these events inside the um react SDK so you can just listen to this Lobby joined event in this way you will have this username Lister and you can just paste in the event here and call whatever side effect you want inside this callback function so this is how it's working and let's also go over how you can you know have a token gated meeting using the react SDK or the Thai SDK if you're using vanilla we also have support for that or even if you're using react natives for Mumbai Labs you can even use that so what we'll do is I'll refresh this and we are going to create a token gate in Chrome so I'll head back over to insomnia and progress here we will create a tokenated row so in this you can call this create room route and you know have this um have these attributes here so here what we've mentioned is a title so I have Apache penguin Apache little budgie bullet head and greatly show you that so if I go to nfts okay I'll switch this and now I hope there is okay yeah so I have this nft and so we're gonna use this nft to token get the call so if you check here you can find the contract address of this nft you can even use a different API and share the browsers you can play yeah so as you can see um in my metabones I have different nfts so we're gonna token get the nft token in the room using this nft you can find the contract address over here and using this contract address you'll be able to tokenate the meeting so it will head back over to the insomnia and here you'll you can see we'll mentioned the contract address so this is the contract address of the nft and you can then use um you just send the chain which you want to do it and yeah you also have to send the token type so this particular nft is an ERC 721 so where we've scored the token type here and now you can you know tokenate the call and if you want to you know fetch your nfts you can even use um I'm using an ft Port over here so you can just send this out and you know paste your address here and get access to the nfts inside your inside your wallet so you can even use this so for now we'll use this nft so now we have this room ending over here and you can use this room ID um inside your web app where you're using the client SDK so I'll head back over to info example lab so this is the example app I've pasted in the room ID here and if you use the project ID it'll go over ahead and paste in my project ID again so once I get the project ID and paste it here and initialize so in right you have this access token field here it's well so if you want to you know Implement like right now I I didn't connect my wallet to this tab so there is no way of knowing that if I am authorized or not so if I try to join the lobby it will show me an edit if I do this now it says join Lobby field that is because um because I didn't like specify an access token and it is a token gated meeting so it threw me an error so if I try to you know if I want to generate um access token for myself uh using my wallet you can head over to this odd simulator I'll quickly show you that so this is an npm package yes so you can go ahead and install this package and using this package you'll be able to you know authorize your user to authorize your user to the hardware SDK so it's very simple to use you just have to install the auth package then you'll get access to these methods from the hot package and once you get the wallet address of the user you can then use that wallet address to generate a message and once you have the message you can then sign the message um using whatever you want so we have implemented bark new over here so you can just use sign message and sign the message and once you do that you get a signature back and using the signature you can get an access token by calling the get access token so to simulate how this works I'll show you an example app so if you head over to the hot simulator you can connect your wallet here and disconnect this because it's connected to the wrong wallet so this is some other wallet I'll connect it to my main account yeah now we're connected to another main account and once I click on get message you get this message and you have to sign this message using the sign message method and once you do that a metamask notification will pop up and you can sign this and once you do that you get the signatures and you can use the signature to get an access to open bar so once you have the access token now if you head over to your tab and paste in the access token and join Lobby now you'll be able to join floor b c now you've joined the lobby as this room was tokengated so using this access token um like this access token was created using my wallet which had that particular contract address that's how I was able to join this token gated meeting otherwise I won't be able to so this is how you can Implement token getting on your dab choosing the hardware sdks and we are looking forward to seeing really good use cases of this I think it's a really powerful way to documented calls and you know this could be a really good use case for different meta verses as well so if you create a metaverse where you want to token get a particular area you can use this where people can join a particular area only when they have access to nnft and you can then share the audio video of that particular group of people if they own the nft or not so this is how it works and I hope you've understood uh all and it was a little too much I believe but if you have any doubts um you can head over to the Discord and ping us whenever you want and we'll get we'll try to get right back at you and yeah that was all for the code along part 10 map to the sides and these are a couple of ideas which you can see so a meta verse where you know incoin owners can join a token get it called and interact in them interverse then you can even have a Marketplace starts on renting out video conferencing and live streaming event recordings using FM so that's a really good use case as well then you can even build a social media platform which is you know built on file coin maybe and you can allow for real-time collaboration file sharing and private communication so it will be really good use case for data does as well so yeah we miss missed the second Point went that sound right you can check these out then these are some uh really good projects that we saw in a couple of hackathons before so if you see check this out be like this is a customized iframe where uh you have a different background there and we can we like to see some use cases such as this then like we have different other Integrations this was a client SDK integration so this is really cool as well so we'd love to see projects like which utilize in an Innovative way rather than just cloning the apps and changing a few things we'd like to see some really good Innovative use cases of how the analystic case can be used and where you can conduct audio video calls and have people communicate with each other's autonomously so okay so let's connect if you have any doubts or if you want to connect with me here are um here are my socials so feel free to connect with me anytime so that was all for today and I hope you learned something and we hope to see really good projects coming out of hack FS kudos