Livepeer 🛠 Building the future of video with Livepeer - Suhail Kakar

foreign [Applause] [Music] so hi everyone I'm sahal and I work as a developer Advocate at lifebeer and today I'll be leading a workshop on building the future of video with live peer and this Workshop we will be covering on what is live pure how who can use live pure what problem does it solve and how to integrate lifebeer into your application so before that we know that approximately 80 percent of the internet traffic is accounted by the video this means that the large majority of the content over the Internet is in the form of videos such as streaming video on demand video sharing on social media and also online video calls this is the reason why our blame our brain loves video because it is programmed to retain the visual content better than the page loaded with the words usually an average viewer remembers 95 percent of a message when it is watched whereas only 10 percent when it is red however there's the one catch to the video sharing it is very expensive we do the streaming and also transcoding can be very expensive to the applications who are building for the um building for the users and one of the main factor is the amount of data and the bandwidth that is required to transmit receive high quality and transcode their videos in addition to this the video is streaming and transcoding requires a specializer technology and infrastructure such as the powerful servers and high speed networking equipment and furthermore the video streaming transcoding can be a resource intensive meaning it could increase the cost of hosting and delivering the video content and yeah so it is very expensive and the solution to this problem would be Life beer lifebear protocol is a decentralized video streaming and video on-demand platform that uses blockchain technology to enable anyone to easily and affordably extreme live videos uh to the global audience it is built for developers and it aims to increase the readability of the live and on-demand streaming while reducing the infrastructure caused by up to 50 times who use this life beer like who's life before well the life of Life beers for developers who want to build application on top of Life beer and uses its broadcasting or live streaming feature or maybe on-demand feature to serve the video on a decentralized network or it is for users who want to stream the video of maybe gaming coding or any entertainment into your mobile phones using the live viewer unless it's also for broadcasters such as twitch or YouTube who have a very large audience and also very large creators that would it significantly decrease their bills and infrastructure costs and how does Life beer work uh well when you broadcast a video the the broadcaster sends the video to the live viewer Network and live peer Network transcodes the video uh using the nodes that has powered by the life peer and it is deployed on orbitron blockchain after that the video gets distributed on a global CDN and after that the users would be able to play with the transcoded version of the video so for those who don't know transcoding is basically a process in which the video gets transcoded into different formats for example if it's in a 4K the video would be transcoded into 240p 360p then 1000 ETP just to ensure that the video gets played properly on different devices internet connection and also browser Black Beer growth has been very tremendous this year we had over 2.7 million transcoding minutes per week and yeah so this was about life beer and we have both live pure apis which you can use and one of the best ways which you could interact with the live peer Network would be a live pure Stadium live pure residue is a open source dashboard for interacting with the live pure Network it is used to create and also manage developer API Keys assets and streams of course completely open source on GitHub and basically most of the manufactory video applications are currently powered by live peer for example hello01 beam length view bonfire stream 8.tv and many other application and yeah so this will just overview of live viewer on how does it works and how you can use it and now I'll basically go through a demo app on how we can basically integrate a lifebeer into a sample application well let me just come back [Music] yeah so I just go through a tutorial on how to use live pure and to your react application and for this we would be using live pure Js yeah so live prgs is a SDK built on top of live pure Studio API uh it is basically it provides the ready-made Hooks and also components to easily build applications with react or maybe next year and live beard so the first thing which we're going to do is open up the terminal and go to the directory where we want to create the application and I work if we want to create a folder name it for example eat India and then inside of the folder we want to create a react application so I'll just say in Peaks create a react app and then dot which would create it inside of this folder so this will create as a sample react application and until it's completed we can go to the live peer.cdu which I mentioned earlier and here you have to go ahead and create the account it's pretty easy and you would basically have a transcoding minutes of 1000 uh basically I think it is enough enough for many of the projects but if you go over it you can basically pay which is like very negotiable amount like 0.001 per minutes but yeah once you're here and the live view residue you can go to the developers and click on create the API key uh you want to name anything for your apiki and then also a low cars and here I want to allow from everywhere and also give a full API access to the API and then you want to create it and then copy the token ID uh here for now and now let's see if our app so now the react application is completed we can run we can open it in the weave code yep so this is our react application let's run it on a local div Network [Music] yep so now the application is running what we want to do is we want to install the live pure JS which you can do by running in PMI live pure slash react and this will basically install live purchase into our application until it's completed we want to do a little cleanup into our application so I would delete the app.

js app.css the test files the logo here and also here and index.js I would just remove the last port here and yeah that's it coming back to the app.js I would remove logo and up.css so we won't create a very simple react application and foreign [Music] we have updated the code to this one it's a very simple message basically for now but yeah so once the lifebeer.

js has installed in our application we can come to the index.js and basically create a client to do that we want to import create a react client and import it from live view react and also Studio provider Studio provider and at least you want to also import the live pure config live pure config so we have imported these three packages now and here we want to run cons client is equals to create a react client and here we would put a provider video provider and here you want to put our API key which we created here if I just copy it and then basically put the API key here API key yeah so once we have put the API key here let's close the bracket and yeah perfect now uh at last we have to basically remove the strike extract mode and also wrap application with live peer config life peer config and then the client would be and here we can import the app so yeah [Music] consequently just come here get started and Yep this is it called back the API key and then paste it here and yeah so now we have live purges integrated into our application and we can use the hooks components and everything just to test like if everything is working fine like if we have integrated successfully we have a hook named lifebeer provider so we can import that use live peer provider and here we can say cons provider is equals to use live pair provider and here we want to put our provider name so we say provider Dot basically get .com fake dot name and yeah once we save it here we should have live video yeah which means the integration now works fine and our application is integrated with live here and this demo application we want to basically create a very simple uh upload and transcode uh video so what we can do is we want to use uh first maybe let's put it let's create the input or let's first create the state const video is equal to set video [Music] yep yeah so and here we want to keep an input and this input would have a type file which on change it would be basically uh fit on the estate which we have the FED Video One and yeah that's it let's save it and now we have this file picker and for now we can keep it like that and then here we would have also a button like create asset and then on click for now we just yeah for now we can keep it like this yeah so we have a file input and also a button so here what you want to do is we want to basically import the youth create asset which is the asset to create a video on the live peer Network so we see const I mean is equals to use create asset and here we want to put our video so in my case it's going to be for example sources and in the sources you want to keep it like it's an array so since we have only one video so I'll just put it this way and here we adjust you have a name for example what would maybe we can keep this one video dot name and also Atlas you want to also put the file so we say file is equals to video dot name yeah so this would create an asset for us this hook and just to make sure that we get the correct responses you would also add a few um yeah we'll add a match with and we put it like on create asset and then we would also add a data that you'd get in response I will have assets this one and maybe progress if in case we need it and yeah so pretty much this is the hook which we want to use and here on the button click we can say if the video is not there you can disable it oops yeah now it's working maybe I can just come here use create assets so this is documentation which you can use like you can have all the assets and hooks which you can take a look and yeah so this is the code which we would be basically using it like there methane colon okay yep let me remove the type of script one save it and yeah so we have the button disable it and yep so now it should work just to see if the progress and everything we want to also add this one and error message and let's put this here and save the file cool so now if we have to upload this yep and now so let's come here click on choose file this will open up our video for us maybe I can find the video [Music] our weave.net okay [Music] okay we do have a demo video I don't have a demo video to upload it but basically it's once you choose a video uh okay yep got it so we have a video now uh once you have the video you can click on create effort and this would basically upload the video to the live peer Network and transcode it and once we have the video back it will basically show us here so currently it's been an uploading process we can come back here close this and go to assets yeah so this is how you'll be able to create an asset using live peer.js and one more thing which I want to like add to this workshop and that would be completed uh basically the player component the player component is like easy to use uh SLS player which you can use to play the videos on the live peer JS so for that we have a guide on how you can basically play back the ipfs and RV video as we know that both ipfs and Orvis are not cdns they are storage so in order to play the video properly without any buffering basically you would want to use live peer it would play back the transcoded version uh for us so we have already set this up and I think yeah so you don't want to go through that one but this is how you would be able to also uh transcode the videos from ipfs and or with uh just to show you an example uh we have a few I put some examples here like our weave and if I basically put the or with link here it would take a minute for the video to get transcoded and then save it into the Network and once it is then you would be able to basically play it just in the case I can also live here and then the store this is an example application so for example if I want to play this video the video would be played actually so this is how the life we are transcoded it would play the only type of video on either on ipfs and or with so this is an example with the orweave that any size it would be transcoded and then playback the most optimal version similarly like this one or this one so I think this is a bad turn it they don't play it but yeah it should work actually and yeah so this is regarding the live peer I hope you understand on how to use them and yeah let me know if you have any questions