Huddle01 🛠 Power your dApp using Huddle01 Video SDK

foreign [Applause] [Music] good afternoon good evening depending on where you're calling from um we have actually here from huddle01 who's doing a workshop for power your dad using idle01 video SDK if you have any questions they can go into the zoom chat and actually we'll be more than happy to answer them and with that being said I'll pass the mic off to our speaker yeah so hello everyone uh this is akshep I'm a full-time developer at cuddle 01 and I read the front end team over here and I am one of the sounding developers as well so lately my work revolves around building the sdking which you'll be using in this hackathon and it Powers the Huddle zero one web platform as well so uh what is title zero one so Hydro zero one is a communication toolkit for web3 so we it's built upon three pillars so the first pillar is the harder zero one tab uh in through which you can uh do uh web 3 video conferencing and uh it's basically for Taos and Nifty communities and it feels right at home for the web 3 native person so you can schedule a token created calls use nfts as efps and do a lot more along with it and then we have our SDK infrastructures which are Plug and Play SDK toolkits for you to integrate inside your app and Empower your tabs with the how to install and then we have our drtc protocol which is called diverging which we are still uh which is still in the works uh it gives you the power to perform peer-to-peer communication uh through audio and chat so I'll be giving a quick overview of the web app now yeah so this is the ideal01 web app and if you a connective wanted over here then you will be able to use your nfts as tfps if you own any nfps on the ethereum on the polygon chain those will show up here right now I'm going to test one it so there aren't any yet but otherwise if you don't own any nfts then we also have options for default avatars so I'm giving a quick overview of the web app so you will understand the sdks better as well because our sdks power the heart of zero one after so once you join the meeting so this is what it looks like and then you have other streaming options that's been so you can record your meeting you can even live stream your meeting via live peers or to YouTube or twitch uh us from here so this is a basic overview of 301 web app and if you'd like to uh if you'd like to create token gated meetings for your nft community or a web3 dial Community then you can do that via the dashboard uh title dashboard so uh if you go to dashboard.0 file it will prompt you for a uh wanted sign in and once you do that this is the interface that will show up and you can go to the meetings Tab and create a new meeting and once you create a new meeting you can then select token gated meeting and select whatever nft or token you want to uh token create the meetings with so it supports both the 3D driven polygon chains and you can just paste in the token address and create a token created call so this is a basic overview of how import Hydro 01 offers and now we'll be going further into the sdks okay so this was the 100 open web app which I just showcased you can even install the 1001 mobile app on Android or then these are the features um which r201 offers talking native meetings nfts proper textures and live streaming and we even store the meeting recordings on ipfs and fightcoin so now we'll go over the sdps so our SDK is aim to solve audio video for your dabs uh in minutes so if you wanna integrate a video and audio in your application then you don't have to go through any of your custom State Management Systems we have that all part built into our sdks so you don't have to worry about any re-rendering problems or State Management problems building your app we have uh created a resistance store inside our sdks which gives you access to all the peers and the metadata related to the meetings inside the SDK itself then you have features like recording and nice streaming um built in as well so you can use that not stps then you have an FPS as pfps and the basic audio video communication that rst is offers so this is the SDK architecture of the harder zero one pin stop so this is our header web app and the hardware web app is powered by the hotel parent in-game package and the 100 Point npm package talks to the media servers uh that has missed so uh the Huddle planning package was an internal package at first and then we open sourced it and published it to npm which now you can leverage to build your own dabs and then we also have another uh npm package called the hurdle 019 so it should like a little to no customization inside or dab and you do not want to post the uis from scratch you can just use r201 iframe and pin package and install it in your dab and customize it according to yourself according to your tab and uh you can even use the CLI Tool uh create title01 to generate uh applications based on the how to define package and the iframe package so we'll be going over those uh in the Hands-On tutorial so these are the three AMPM packages we have CLI tool Hai 15 and the web SDK so our cni tools uh gets you a very very easy to use commands just to generate simple apps which you can then use for audio video communication so we'll be going over the iframe SDK first so if you head over to npm you'll start finding this package under the hurdle zero one organization called Hardy 0193 it's a tight straight package so if you'd like types you can even use and you can even import those so these are the CLI commands for iframe and we'll be going over these on the CLA now okay so I've created this indirect records Fields work for this tutorial and you can just type in in pxp801 and it will prompt you uh asking for what type of project you want so uh first it will have prompt you for the name so you can just name this whatever you like so I'll just call it iframe then you can select iframe or the client SDK so for now we'll go ahead with the iframe SDK okay if you want to use type stream then you can say yes so it will generate enough for you in seconds once you enter this tab you have to install the dependent fees with the package manager of your choice so I'll be doing so with the package manager for yarn because I have the yarn block generated over here so it took one second and once I run this app this is what it looks like so what you can do is that you can embed a nice lap inside an I3 and then call triggers from outside of that app to have customized security so say I joined the sweeping and I wanna enablement that comes from outside of the iPhone I can simply do so by calling um the methods inside on the hard display on the hardware light stream so I just click on enable webcam from outside of the app then it will work and I can do so and I can even use reactions from outside of the app once you install the package so I'll quickly go over how the code is also working so all you have to do is um you just have to import Hudl iframe um from the hydro ice cream npim package and once you do that you can just render out the hard live stream inside your jsx so if you check out here these are all the buttons that we had created and if you check the how do I frame component this is all you have to do to render out the hard life name if you want to add customizability uh to you know do methods as I showed before like sending reactions from outside of the app or pawning enable or disable the fan or start the recording then you can do so via the methods that that are provided by the lifetime app instance which is also imported from the headlight frame and frame package so this is how it's working and so if you even head over to the hydro 01 website and go to slash talks you'll find the photo documentation for this um over here in the iframe section so if you're using on the vanilla if you're not using react or if you're just using when in html.js then you can simply copy paste this stupid over there otherwise you can and the ways you can use this from npm I'll install this and this is how you can just import it just as I showed before just import a hard light frame from the package and render it out on the um on the jsx and then you can call instance methods using this hard life free map instance so it just States the method name so these are all the methods that you've been called and these are all the allowed emojis and you'll be able to fully control the hydro app from outside of the hard live stream so this is how it's working so I frame a Hands-On with what we just take and if you wanna I'll just really real quick go back to the slide and if you uh don't wanna go with the interactive command and just want to generate the app and just say just a single command you've been passing dash dash name tags and the dash tool tag to generate the app in one go so that's how it that's working and these are some iframe SDK examples that we saw in previous hackathons so this was a pretty good use case in which we had a created economy and this person used to use type theme app to token it calls based on that is uh based on the artists holding so you can check that out on this link then we had this uh integration with meet with wallet so they used a customized version of the iframe to have this dark and light mode uh using the iPhone so it doesn't look like the hurdle app is being uh integrated here but uh they embedded the harder and supporters of their own website and use the hard lab in between so this was pretty creative and we're hoping to look for uh projects like these then we had this on which example they did a similar thing they uh used the hard live frame uh on the site where they used a transparent background and used a custom background on the back of their website to give it a better feel so now let's move on to the private SDK so if you go to the npn in Pim store then you can find the hurdles client package and this is also a tight strip package so if you want types you'll get those as well yeah so the Huddle plane packages are divided into four modules so one is store the other one is Hooks and we have mutants and then schema so if you're using typescript and then schema will come in handy as it includes all the types for your uh fan package then we have the store so store uh includes all the state and the store management that I talked about before so you don't really have to create your own custom State Management solution you can just use the SDK stored management it contains all the metadata relating to the meeting app so once you join the app all those States will be reflected inside the store so it will run the iscamp host is my post and the peers better data will all be populated inside the store then we have certain hooks that we've implemented to make your terms react implementing it in react much more easy and we have some utils has been uh so um all the functions that we thought were being used a couple of times we bundled that up into a utensils package so all uh all these sub modules are intega are a part of the hardware plant npm package and those are powering the hardware web app so the store management is basically a wrapper around there's a stand store if you'd have heard of it so it's a Redux alternative which is Patrol optimized so we're using that and we have a huddle client context which uh you need to wrap around which you need to wrap around your web application in order to get access to the hotel state so we'll be looking into that over in the code as well then we have a certain line methods as we saw in the iframe as well for any evening what is happening your audio video in the room or sending reactions or sending messages and so on and uh as a part of the hard Driveline context we also give the store management there so it's very easy to implement it if you have a fresh installation of react and like if you have a an app already built and you do not want to start from scratch you can just go to npm and uh install the display in package and then call the method of join uh this way so this is the random room ID that is provided you can enter whatever you'd like here and if you wanna Implement your own um Bonnet authentication you can do that as well and pass in that authenticated wallet address into the join function in order to authenticate the user so we'll be going over this in the code as well now this is just an overview for it then we have certain books so we have this use hurdle store book uh to get all the states so if you're if you've used Redux and this is very similar to use uh use selector hook uh through which you can just select certain items of the state and uh get access to the particular State inside it so this is how we've accessed the iscampo state this returns you the character state of your peer so then we have this email types so the in these are all are included inside the sub module of the schema which I described before so these are the room State uh this is the room State type which you'll also find in the schema so let's get started with the demo so these are the CMI commands for the Huddle client uh okay so we've repeated a slide here I'll just go over it uh on the entire screen share so if you want to create um a client package saying what you can do is go ahead and type in 3801 and it will prompt you again for the project name and you can say like that and then you can select whatever tool you want to use so we are using type for now then you can say yes or no for typescript well we have it here so once we enter this line tag you have to install the dependencies so we'll do that with yarn and that's done and once you fail yarn Bell it will run the app on your looping machine and this is what it looks like so we've even given some instructions on the left side for you to use the app so you can just click on enables webcam and it will prompt you for your web camera and then you can join the room about and if you join someone at the tab then you can join from the other side so uh if you uh if let's just go and Report oh so if you're implementing it uh on an existing project what you have to do is you'll have to install the hard reply package coming in and follow the guide given in the docs so let's just go to the docs real quick foreign project and you have to just follow this guide simply so if you're using the hardware blind package then you'll have to get your API key so you can see this is over here and if you head on over to get your API you can just connect your wallet and it will prompted for the API key and you can just copy this and add it to your project then once you install the package on your app then you have to add your API key inside here and this will give you an instance of the hardware client and then you can use this idle client instance to call in methods pertaining to it so as we saw over here inside our slides so this is the first maker that we have to call in order to join the rule so once you add the zoom ID over here and the one data result you can simply call that join method on the hard drive client instance to join a particular room so if you see here you got the adult Knight instance using this method and then you can call certain methods like Hardware fan.join over it to join the rule so in order to get access to the hydraulic plant inside all your react components you'll have to wrap your app inside a hydrophone provider as well and gets access to that replay to whole to the whole of your app and then you can just get your Hardware plane very easily inside any component and con methods on it so we can simply call it using this and if you would like to get even more insights on what those methods are there you can deep dive into the docs and you'll find store States over here what all streets are there uh all the types for it and even you'll get hooks for using it and we have the client methods over here as well so it will show all the methods that will be required for you to create a meeting at using the hardware SDK so uh this is how it all wraps in and then if you would like to uh generate a hurdle app using just using the single command then all you have to do is type in the uh type in the tags for it so as we did anything before so you can just type in dash dash mean buy up and then you can say that ruled by and add PS black and it will generate another app for you in a single line so you won't have to go through the prompts and you'll see that you have this my app over here so natural easy it is so that was the Hands-On tutorial and we have seen like multiple uh hackathon projects uh from the hardware client SDK and these were really good so this was the consultantly app uh which used uh which used SDK and as well as it used money streaming so it charges the user for the number of minutes it depends you and uh based on the number of minutes they've consumed the amount from their wallet gets deducted so this was a pretty cool project which we saw in the eth Indian hackathon and this is need three Club so it's a sort of a Omega loan and it uses the herd and SDK to match random people um inside uh like in the project then this was another very cool project um it was uh it was built in one of the hacks and it uh in this the two people could play chess while having video audio video conference with each other then these are one of our clients of paradox so they have created this uh this now which uses the Hardware paint as well so it is a metaverse of sorts in which you can roam around and uh have uh how do you have meetings as well uh so they use the chat module inside a hotel Trend as well they've used a hardware fan for audio video and they even used it for live streaming so this was also a pretty cool project you can check this project out on this particular link mind zone.io so these are the ideas that we have for this hackathon so uh let me just reshare splice stream real quick so the first idea is a video conference video conferencing platform uh that uses decentralized storage to store meeting transcripts and making them easily searchable and accessible so uh right now the hardware find SDK provides you with audio tracks so using those audio tracks you can generate meeting transcripts and uh store those meeting transcripts onto the files Point Network and if you can make them easily searchable and accessible via retrieval that would be a really good use case over uh fpm 1001 so we are looking forward to seeing projects like those then we have a decentralized reader conferencing platform built on filecoin that allows for real-time collaboration uh like Google Sheets so if I head over to the next slide this is in reference of what Well we'd like to see so say and there are people on the meeting and they are collaborating on this platform and they are also having audio video calls and the metadata goes over to the Spy coin Network and can be indexed very easily so this is something we'd like to see then a Marketplace for a Marketplace platform for renting out video conferencing and live streaming event recordings so uh this this would be also a pretty cool project so to see a lighter Marketplace or a detailed all of sorts uh where people can share their recordings and uh have a data Centric approach where they are incentivized to store those recordings of particular type of recordings and even uh consume them then we'll also like to see some social media platforms uh so this also revolves around the idea of data does uh as you can see like in-depth three social media is not working out so good but uh with the adminton data tiles and this could really have um this could be pretty cool so we'd like to see something built around the data house uh and hydro zero ones sdks so that could be pretty cool so yeah so these are uh some stats so we have 50 plus projects built on the Hado zero one infra in the past three months we've had like three hackathons so far and we've seen a lot of create projects and we're looking forward to seeing beautiful uh collaborations between the fcm and 100 and STK projects and uh these are some of the projects that stood out inside our hackathons so it's spear code space me podcaster spaces and Fitness in these projections were really cool and you can even check these out and get some inspiration from those and uh Happy hacking so this is our Hydro zero one team our teamwork 23 members and yeah feel free to reach out to the hotel team pardon me and see you awesome um thanks so much actually for taking the time to do this workshop for uh space War um always great to have you here and thank you for everything you for tuning in to this Workshop um like action subscribe if you have any questions for him or the idle01 team definitely feel free to reach out on Discord or email um or anything and with that being said I hope everyone has a great rest of your day I think there are some questions I'd like to address uh is that all right of course okay and I use it as a class rule type yes you can definitely use it as a classroom typer um does it charge to use no there are no charges as of now so you can definitely go ahead and test it and you can even fetch uh nfts and nfts on the pony one or the ethereum meaning so that's not an issue okay does the SDK integrate with low code tools like ionic framework um not as of now like if you have if you have uh like the sdks only work on the JavaScript runtime so if you can install it on there then it will work um can I use it on ipfs and other storage Tech yeah definitely like the sdks are meant to provide you with the audio video communication so if you can build something on top of that using ipfs or other storage Tech like fpm smart contracts uh then that will be pretty cool okay um any other questions okay all right turn next question awesome cool yeah we'll end this Workshop here and um of course feel free to reach out anytime during uh the hackathon for any other questions we have a great day every lunch delivery yeah thanks for having me