Huddle01 🛠 Supercharge your dApp with Huddle01's a/v infrastructure

foreign [Applause] [Music] we're glad to be one of the partners here at East Tokyo in this quick Workshop video I'm gonna be showing you all how you can supercharge your dab with real-time audio video experiences by using our development kit so before we get started I just want to point out that audio video is the future as you can see on the screen users retain 95 of a message over video as compared to the 10 over text so this kind of a no-brainer that you would want to enrich your dab with audio video capabilities infrastructure to power cross chain real-time audio video communication between users and now you Builders can use our sdks to integrate this infra into your dabs talking about why model 01 so not only is our internal reliable and efficient we also provide crypto primitive features to complement your audio video experiences using tool wallet logins decentralized identities looking gated meetings decentralized storage and also live streaming till date we have had over 150 projects built on our Tech these are some of the more standout ones so that's it for the introduction let's dive into our sdks and quickly build out a sample app so I'm here on our documentation website at docs.1001.com over here you can see that our main SDK is divided into three modules for the web we have a vanilla genius SDK and a react shares SDK and so when we also have a react native SDK besides these we also have an iframe for ECP embedding Hardware zero one video meetings on your website and a CLI tool to help you spin up a starter app using our SDK to top it all off we have an API with a few endpoints to complement the SDK you will get to all of just in a minute so let's get started and take a tour of the documentation I want to start with the iframe at CRI tool first and then it will dive into our main sdks so if I go to quick quick Integrations uh iPhone you can see this is what it looks like the iframe is the birthday solution to embed 1301 video meetings into your website so this is what it looks like in a real application you can also customize the iframe to match your website's branding and customize the theme colors and the size of the iPhone so I think comes in two forms the vanilla JS I think as a react I frame so the one in the JSI frame is essentially an HTML tag which takes in the following attributes and embeds a video call into your uh vanilla JS website so the srci attribute is the URL of the video call and after you have embedded if same you can also call a few methods to programmatically interact with the embedded video muting to use the methods listed over here you need to get the element uh get the acronym element from your dog and then call the dot post message function on it passing in the method mean and the type so these are the available methods uh you can always call during the video call so that was the one in the live stream we also have a react iframe which is essentially a react component uh that you can embed audio react app so it comes from the following package at title 013 live stream and you can install the package using npm Orion so after you've installed the package you can import the hardened iframe components of it and put it into your componentry just like this it takes in the config drop and this is what the config object looks like again we have a room URL over here which is the video which is the URL of the video meeting and you can also pass in height width and other style styling props well once you've added the component you can also call the instance methods that are provided by the package to interact with the video call programmatically these are the following methods that are available very similar to the vanilla iPhone and these allow you to interact with the video meeting programmatically so that was that uh for the icing up next we have the CLR tool so as United next uh clone a sample application which is basically a starter app that comes in with audio video capabilities out of the box and it allows you to tailor the application to video requirements uh to do this you can open your terminal and enter the following command in PX create Harden zero while and it will give you a give you the following options so it will ask you for the name of your project which you can enter over here after that it will ask you to pick an SDK whether you want the iframe or the core SDK after that you have to choose whether you want JavaScript or typescript and then also the act or react native and that's it or with G with just these four or five options you have already set up this complete and you have a starter application to uh start building so that was the cni tool and the iPhone uh let's dive into our main STDs so if I can get started on the home page uh first up we have the Core Concepts so the 161 SDK is built around a few Primitives Concepts uh including the concept of rooms lobbies and peers so we quickly walk through some of the definitions over here so our group is a hack Instagram meeting session it contains all the participants and their media streams after that we have a Lobby so the knobby is a pre-tool staging area uh and over here users can choose to enable or disable their VDS Fields before joining it after that we have up here so a peer is a participant inside of a room or you can think of it as an object containing all of the media streams of a participant these media streams may include an audio stream which comes from the user's microphone and a video stream that comes from the user's webcam each peer is represented represented by unique pair ID and is always associated with the rule so I've been talking a lot about media streams so what exactly is the media screen so it represents a stream of media content and it consists of several tracks Now tracks can be either audio or video after that we have a after that we have two main Concepts called produce and consume so producing is the act of sharing of participants media stream with other peers inside a room so say you're a user in a row and you have your camera enabled right now you want to share the camera stream to all uh the peers in the room so this is when you produce your uh bigger stream uh on the contrary we have consuming which is the act of receiving appears share Nvidia stream inside our room so when uh when one peer starts to produce the screen all of the other players will start to consume the stream and be able to watch the screen coming from the other player so those were a few main definitions uh last but not least I will talk about app States so there any foundation of the SDK we have four major states that your app can be in at any given point so the message written from the sdp are divided into these app States and can be called only from one particular App State so first we have the idle state so in this state the client has not been initialized yet and the only method you can call over here is the initialize method after that we have the initialized state uh where the client has been initialized and is ready for you to to invoke the join Lobby method so the early available method in this app state is the join Lobby method and we'll get to these methods and hooks in a minute so after that we have a Lobby and a roof so these are the four updates uh that your app can be in so after this we have the vanilla JS SDK uh over here you can see how to install the SDK using the script tag and our CDA and also using npm or yarn so after you've utilized the vanilla.js SDK you can call the available functions using Hardware client Dot and name of the function so if you go to methods over here you'll be able to see all of the methods that we provide and each of these methods serves uh its own purpose and you can also read what it does over here so the init method sets up the app State uh and it should be input first at all times similarly we have Lobby methods which include join Lobby in leave Lobby and we have room methods which include join room and leave row for the audio margin we have enable mic disable mic produce mic and stop producing mic so all of these functions also have the definition of what they do over here and for the video module we have and it will decide and produce Cam and stop producing crime we also have three methods to start and stop recordings and live streaming uh on your web app and we also have a few utility methods like changing the Avatar inside of a call or sending text messages or using your hair adding reactions and so on and so forth so these are the methods provided on the vanilla.js SDK and you can call them on your handle client uh to interact with the SDK so one last thing I'm going to talk about before we wrap up the vanilla chair SDK section are the events so we provided the best system that allows you to listen for specific events and execute callback functions based on them so these are the following events that are available within the SDK and you can call and you can execute different callback functions based on when these events were triggered for example we have the lobby joint event which is triggered when the lobby is successfully joined after calling the joint Bubby method the middle name we have events for camera bike Rule and recording and live streaming events so these are the events and that's it for the vanilla series SDK it comprises of different methods and these events like you can listen for and interact with the SDK after that we have the react.

js and the react native SDK both of these are very similar and the way they have been architectured is instead of instead of importing different methods we have different hooks so these are the eight available hosts that are imported from the package and each of these hooks provides different methods to interact with the SDK so to install the react SDK you need to install the package hidden zero one slash react uh using npm yarn or pnpn and after that you can initialize it by calling the use 1001 hook which provides an initialize function which you can then call to initialize your client so we'll get to all of this uh in a minute when we Bend out a sample application but the gist of it is that we have different Hooks and each of these hooks inputs different methods which you can call to interact with the SDK after these hooks we also have the events similar to the vanilla JS SDK over here the way you would interact with these events is using the use event list Network which is imported from the react package and then you pass in the event name and then the Callback version that you want to execute when the event has been triggered the events are similar to what we have in the vanilla jssd game and are concerned throughout all of the different sdks so the that's it for the react.js and the react native SDK we have different Hooks and then the events that you can listen for uh so after that we have the use cases section over here we demonstrate different use cases for our title Z1 SDK and inspire you to think of the next big idea that you can build out when using our sdks so that's it for the SDK section uh like I said we'll build out a sample app using the react.js SDK in a minute but after that we'll take a look at our API section so we have three main AP API endpoints that we provide and to get started with these apis you would need an API key which you can get from here by connecting your wallet and after you have an API key you can call uh these three endpoints so the first of the tank points is the create room API which allows you to create rules for hosting your video meetings it takes in the following parameters uh that are required the title of the room and the host wallets array which is a list of ethereum addresses that you want to set as hosts of the video call you also need to pass in your API key inside of the headers and if the API call was successful it would return the Google ID that you can use to join the call which has the two required parameters you can also pass in some optional parameters that are listed over here these are for additional consent of the video calls after that we have the token gated API which is very similar to the create room API but it provides the ability to create rules that are token URL so to join these rooms a participant must have the token in their wallet it is similar to the create room API but it takes in the following three additional required parameters the token type uh the chain on which it is minted and the contact address of the token again in the response you will get the row ID which you can use to join the call the lasting point is the meeting details API which allows you to fetch the details of a video meeting it's pretty straightforward you pass in the room ID and returns all the relevant details are listed over here uh so these are the three APA endpoints that we provide and these complements are SDK offerings so that's it for the documentation we have covered the iframes The cni Tool uh our main sdks and also the API reference now let's build out a sample application using our SDK all right so that was a lot of information at this point feel free to explore the documentation at your own pace and if you're comfortable let's dive into building a sample application in the following section we're gonna be building a very basic video conferencing reactor we will be using next two years along with the Harden zero and viag SDK let's go so for this tutorial I'm going to be following the walkthrough section in the react SDK docs which will allow us to go step by step in building a video conferencing app over here I have a sample next JS app already created for me uh and we'll start by installing uh the 100 SDK so over here in the walkthrough as you can see the first step to install our SDK would be to install the package using uh yarn so let's do that thank you okay so the factory was installed and I'll quickly open uh my local news server and get the app running by entering your own death so this is what the sample link stays at uh looks like uh so I'll get rid of all of this because we don't need a we don't need all of this I'll just create a div that says hello world and yes you can see that on well the website now so once we have installed the package The Next Step would be the initialization of the project so to do that we'll import the following hook or use iron01 and I'll do that over here and then we can call in the hook and it will return to us the initialize method that we want to call so so let's do that inside of a use effect so we want to initialize the app as soon as the page loads uh so we do that inside the use effect and over here we'll call the insurance and then we need to pass in a project ID over here so to get the project IDE we can go to the API Keys uh section of the docs and connect our wallet let me do that real quick and once the word is connected I'll be able to see my positivity over here so let's copy it and paste it inside of our code great so I will be new like the project has been initialized though so it Returns the hook also returns and is in shoulders Boolean which tells us that the project was initialized so if I go back to my SDK and walkthrough over here I can create a Dev which will if the project is initialized it will show and hit Refresh on my browser so as you can see it shows project please initialize for a very small amount of time and then in basically changes to hello world because our project was initialized uh so once a project was initialized we can head over to the next step which is joining the lobby so to join the lobby we need to import the use Lobby Hook from our package and when you call this socket will return to you a joint login method that you can call so to do that let's add a button uh and we'll add that over here and it will be disabled when joint Lobby is not callable the airplane method returns from the hook has a DOT respondible property on it which is a Boolean that tends to if it can be called or not and on the on clip after button we'll call the John Lobby method and pass in our room ideas argument so to get the room ID we need to generate it first using the create room API as we saw before so if I head over to the create room API endpoint and let's copy this endpoint and quickly call it using a thunderclient so I'll paste the copied UI logo here and this is a post request and for the headers we also need to add an API key header it shouldn't look like this well we'll get it from the API key section if I can I want it once again I'll use my API key and I can quickly copy it and add it over here after that we also need to add a the content type header and set it to application Json because we will be passing in our body done right so inside the body let's add the power parameters so we need to pass in a title and of course wallet so array over here and for the host wallets I'm just gonna add in my wallet address which I can quickly copy from metamask okay that looks like uh it's fine and that's fixing awesome so the roof was created successfully and we have received our ID over here if I go back to my code and add the new ID over here uh when I call The Joint Lobby method I need to pass my room ID and let's click on Save so if that works well we shall be able to see the join Lobby button over here so it doesn't look really good right now so let's give it some styling okay so once I've added inside of the button this is what it looks like and if I click on join Lobby I'll be able to join the knobby but we need to uh display some of the App State at the top to know uh if we were successfully if we if we successfully joined the lobby or not so to do that I'll create some components over here and I'll display this app State at the top so the state of the app is written from a different hook called use meeting machine and if I got it over here it returns to me the state of the app and at the top I can just SD dot value which will tell me uh if the app was initialized or not so over here another topic you can see it shows initialized not joined which means that the app was initialized but I have enjoyed the lobby yet now if I click on the join Lobby button it changes to joining Lobby and then after a while it changes to joined Lobby now it tells me that my current tab state is The Joint Lobby State and my bike and Camera are muted and off respectively all right so the joint lobbying method works after that the next step in in the walkthrough is to media devices so to do that we will use the US audio and the use video group imported from that package and these can return to us two important methods the fetch audio stream and the stop audio stream method and similarly the fetch videos theme and the stop video stream method for the video so once I've added them I can add two new buttons which will allow me to enable and disable by like I'll mail with you I like the bottom over here and if I save and go back to my app well again I need to add some star into these buttons so let's do that all right so now I can see the fetch audio stream and the fetch video stream icons over here now effective on join Lobby again I have joined the lobby and now if I click on fetch audio stream it asks me to allow access to my microphone and once I do that it shows me that my mic was a neuter and if I click on fetch video stream it will ask me to allow access to my camera and if I allow that as well it should be that my camera was turned on now my mic on camera have been done but I cannot see them over here so to do that I'll use the use event listener book return from my package at the top and I'll create our left using the user books from the act and when my Lobby cam on event was triggered that means when my camera was turned on in the lobby I'll change my video ref uh close to the camera screen return from my app State and once I've done that I can add the video element over here at the bottom all right so then if passed out to this video would be null initially but when my camera was turned on it will be set to the incoming media stream from the App State if I save that and go back to my app I need to refresh so let's join the knobby now and click on fetch video stream and now you'll be able to see my video stream has been fetched and it has been set on the video uh HTML element over here and if I click on fetch audio stream my Mac will be unmuted and my audio stream will also be enabled over here all right so that works well after that the next step in the walkthrough is to join and leave the room so now we have entered the lobby we have played around with our audio and mic controls now the time now it's time to join the room so if you do that I'll I'll call the use room for return from my react package and it will give me two important methods to join do and then leave room method so I'll add two buttons for both of them here at the bottom and again give them the same starting that I have given to multiple buttons of mine and if I go back to my ad and hit refresh now let's do it again if I join Lobby attachment video stream and now if I click on join Doom you'll be able to see that the state of the top change and it shows me that I joined the room uh it shows me at the appears in bedroom which is currently empty and it shows me that I'm not producing my mic and I'm not producing my video so even though I enable my video and my girl is the lobby I haven't started producing the videos yet so that's exactly the next step uh in our work too so now we need to send that media across to other participants uh if you remember we refer to the terms produce and consume at the beginning of the video in the concepts or section of our docs and now it's time to produce our newcastlings and I'll add the buttons to all start as well let's go to the bottom and add the backends it's all right so over here the US audio hook will also return my stream which I can rename as my extreme and the news with your book also returns my video screen which I'll rename to my or canceling okay so the buttons are added now if I go back to my app or hit refresh now I can join the lobby uh it changed to join Lobby I can fetch my video stream in the lobby now I can join the room and once I'm in the room I can start producing my cam so if I click on produce cam you can see that it shows me that my producing cam uh is set to true and now I'm producing my camera to other players in the room currently I'm the only people in the room so you won't be able to see uh the other pairs but let's finish off this app and open it in two distant app the tabs to join from a different uh before we do that uh the current state of our app is that it shows me only in my video right now what if I wanted to see what if I wanted to consume the uh video coming from other peers right so I would do that uh using the used PRS hook we should return to meet the different PR IDs of the peers in my room so once I've called my new sphere sock over here it returns to me an array of the peer writing as well as the peer objects themselves so once I have received that at the bottom over here uh I'll create a div and then I'll map over the peers and then I'll filter the appears that have the camera turned on and then render a video component for them I'll pass in the then media screen so when this is video component coming from though so our react package also uh exports a video component that we can use and it comes from Arduino open slash react uh Slash components so this video component can be used to display the media stream of other peers in the room and once I've added that I can save that and go back to my app now I've opened this uh localhost on two different in two different tabs now if I click on join Lobby over here uh fetch my video stream uh join the rules and if I go to my other Tab and do the same thing again Lobby are in the same room but they cannot see each other's video because none of them has started producing it so if I switch about back to my first Tab and start producing my can and come back over here you can see that I can now successfully see the producer screen or which I'm consuming over here and if I click on produce cam in this tab as well and go back to my previous tab you'll be able to see the see that my second tab stream is also being consumed over here so voila it works now I can now and essentially inside of the room I I can conceal and produce amount of video streams as I go back to the walkthrough uh that's it you're all set uh this was a basic video conferencing at uh technical over here well now if I uh click on leave room over here and in my second tab I'm the only one left and if I need the viewer as well I have left to do probably the tabs now so this is how you build a sampling app using bioteact SDK and uh in this tutorial we covered a lot of different Hooks and the methods returned from them so this is how you would create a Videocon sensing app using our SDK this was obviously a very basic version with very minimal styling uh you could take this a step further it to your required use case all right so that was the builder sample app section of our Workshop today I hope you enjoyed building the app and gained an Insight on how the Harden zero one sdks Power Audio Video Communication in depth to close it off you another few project ideas that you can build using our SDK at the hackathon you could build a web 3 multiplayer game and power the in-game comms using our SDK you could also build an all-in-one super app for daos where members and roles could be managed tokens could be tweeted and voting systems could be conducted real-time text audio and video communication would of course be handled using our SDK you could also leverage our token guided meeting system to create apps for users to conduct token graded watch parties and music streaming sessions last but not least you could build a clubhouse like audio spaces dab using our STV so that's it from my end you can follow us on Twitter at the following handle make sure to check out the website for more information we also have a Discord server so feel free to join should you need any sort of assistance thank you for watching foreign