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

Greetings. This is Silas from Livepeer, and in this seminar we'll go over what Livepeer is, who can use it, what problems it solves, and finally, how to integrate Livepeer into your application. Approximately 80% of internet Approximately 80% of internet traffic is video. This means that the vast majority of data transmitted and received over the Internet is in the form of video content, such as streaming video, online video, online video calls, and video sharing on social networks. However, this process is very expensive.

A key factor is the amount of data and bandwidth required to transmit and receive high-quality and transcoded video, which requires specialized technology and infrastructure such as powerful servers and high-speed network equipment. Additionally, video streaming and transcoding can be resource-intensive processes, which can increase the cost of hosting and delivering video content. For example, transcoding video from one format to another requires a large amount of switching power, storage space, which can increase the cost of hosting and network delivery. And for this, Livepeer is the solution. Livepeer Livepeer is the solution.

Livepeer is a decentralized video streaming platform that uses blockchain technology to allow to allow anyone to easily and affordably broadcast live video to a global audience. It is built for the developer and appears to increase the reliability of live and on- demand video streaming while reducing infrastructure costs by up to 50 times. To easily interact with Livepeer, you can use Livepeer Studio, which is an open source toolbox for interacting with the Livepeer network, creating and managing API keys, live streams, and video assets from an easy-to- use dashboard. And yes, this is about Livepeer, and I will integrate Livepeer into a web 3 application example. So, in this workshop, we will be using Livepeer.

js, which is the JavaScript key for Livepeer. This makes creating a project using Livepeer much easier. If your project is not built using the React framework, you can easily use Livepeer's API, a REST API. It can be used with any used with any language or framework you want. And so.

So now for Livepeer.js, the first thing you need to do is set up the Next.js application, which we'll do now, and then install the library. You can open a terminal and then navigate to the directory where you want to add the application to create it. In my case, it's the desktop.

And here we can create NPX, create a Next application, a Livepeer application. And this will create a Next.js application. And we don't need TypeScript, we need ESLint. Until the Next.

js application is complete, you will also need to go to Livepeer Studio to create an account and get an API key. And yes, you should go here from here. You should see a sign up button here. You can register using your email address and password. 1000 minutes of transcoding are completely free, so you don't need to pay for the first 1000 minutes.

But once you get here, you'll see a toolbar, and you can go to the "developers" section and click " and click " create API key" and specify the name of the API key. In my case, it will be an FVM workshop. You can also enable codes if you want, but it's not necessary unless you're using it on your frontend. Once you get it, you can take this API key and save it in some place as you will need it later. Now, back here, to the Next.

js application here, to the Next.js application , it is installed, and we can go to the Next.js directory where the Livepeer application is located and install the Livepeer package. Here we can also open the application in VS Code, but you can use use any other VS Code editor you like. Yes.

The Livepeer package is now installed. And yes, it would be best to follow the Livepeer guide, and from there you have everything you need to do to set up your Next.js application. And the first thing Next.js application.

And the first thing you need to do is launch the client. So here in pages and then inside app.js we can create a const client which is equivalent to creating a React client creating a React client , and finally you need to insert your Studio API key here. You also need to import the React import the React client and Studio Provider, as well as the Live Pure configuration. With app live pure via React.

And finally, we need to wrap our application with a Live Pure configuration. We can do it like this . And finally, move this component here. Save it. And so, that's it.

Now Live Pure is basically integrated into our application and we can now use Live Pure in our next JS application. So, the first thing you need to do is this . Open a terminal and run yarn dev to run the following JS program. And then you can go to localhost 3000. And so, here's an example Next.

js application example Next.js application that we'll now use to add our Livepeer code to it. But you need to completely clean up this code. And just make one Livepeer program. Yes.

It works. You can also delete this imported data from here for now. Uh, you can also remove the styling. Oh yeah, we can leave it at that for now. But yes, we have the Livepeer app here .

So let's get back to styling. I know that in order to check if Livepeer is successfully integrated or not, we can simply use useAsset to check if everything is successfully integrated or not. Now we can say useAsset hook. And here you need to specify the resource ID. Once you have uploaded a resource, whether through the API, Studio, or SDK, you will receive a resource ID, and then we can use that to retrieve the resource.

In my case, I want to get this resource. This is his ID, or you can even use this one . And here we need to point this out here. And finally, we can just say console.log asset or we can just print it here.

Let's do it here. JSON.stringify asset. And if you go back to the program, you'll see that program, you'll see that printed here. This is the resource ID, hash, download method, creation time, and finally creation time, and finally , the playback URL.

So, this means that we have successfully integrated Livepeer.js into our application. Now we will look at how to upload videos to Livepeer. To do this, we will use use create, which is very similar to use asset and use create asset. Here you can import use create asset from this Live View React.

Here we can name our resource. The input type will be text, and then place an order. Enter a name. Here we can also create multiple states to store values ​​from the input data. We can name them like this can name them like this : set name is equals for use state.

Make sure you import use a state from React. Here we will also have another input, and it will have a file type. It will accept video, and finally we can make a change here as well. Once the person selects the video, we can retrieve the file. And set.

Let's create another one here. Constant video sets the video using set using set , and here we can say "set video file". We should also add an "on change" command here to save the input value to the state. Once it is entered, it should look like this. We won't focus too much on styling for now.

Simple styling should work. Indented 10. And finally, here we need to add a button. This will "create a resource will "create a resource ". This should work.

And here we can say "on click, process the download". And here we can create a new function " new function " constant loading processing". Let me zoom in a little bit . And yes, that's all. We have declared some states here for the name and for the file, a function that will be used to handle the loading of media files, and finally two input components and one button.

First, we can console.log both the name and the video to see that both are saved successfully. And once we have that, we'll use the "use create asset" command. So, here I'll type something and select a video file, click "open" and "create resource." You see, we have both a name and a file, which means everything is working fine.

Now we need to use the use create asset function. We can add it here. And const is equal to use create asset. Inside use create asset we can pass in the video. So, to see if there is a video, we need to pass the sources.

It should be in the form of an array, and you can also upload multiple videos if you want. In our case, we only want to download one video. So, we can say that name will be the name, and finally file is equal to video. And if name video is not there, we can just display null. And inside we can add create asset.

We can get data from it. After loading the resource, we can also get the status, progress, and finally the error, if any. And finally, now, on the load descriptor, we can call the create asset function. Now let's refresh this page. Let's give it a name, for example, test video.

Click "Choose File", upload the video you want, and then click " then click " Create Resource". Now this should create a resource for us. Now let 's go back to Livepeer Studio, go to the resource. You can see that this is a test video that is currently being processed, but this means that the video is now uploaded to Livepeer. And yes, this is how you will want to upload videos to Livepeer.

And in the Livepeer JS documentation you can also look at different examples with different tweaks such as resource usage resource usage , metrics, resource update usage and many other options. And yes, this was an example of how you want to upload a video to Livepeer. And another example of how you can play a video already stored in IPFS using Livepeer Player. So, the Livepeer Player web player provides an easy-to- use component for displaying both video and audio. I think it will be very simple.

So, let's first remove all the code we already have here. But, yes. This is the code that you need to use to download the video we saw here. And I think you can see that the video is also loaded and can be played. The video I uploaded is in really bad quality because I just wanted to upload it really fast, but you can upload whatever you want.

This was just an example video. Yes. Now, to use the player, we can just remove all this code here. And just add a div tag. Instead, you can add a player from and that player will be imported from livepeer/ imported from livepeer/ react.

And now in this live player you can play the resource that is already stored in livepeer studio. You can reproduce the IPFS hash. You can reproduce Arweave transaction hashes and from other places. So, if in this example if in this example , maybe we have this video. If we can play it using the play ID, then here we can just give it a play ID and then put the play ID here.

We can also give it some styles, names, command, etc. But for now, we can ignore that. So, let's come back here. And now you see that we have a video player. And if we click the play button, it should play the cat video that we see here.

And yes, it was recreated. Now, to make it a little smaller, let's make it a little smaller. We can say that the style width will be probably 70%, and yes, that's normal. And this is the Livepeer player. Now, the resource you are currently playing is already saved in Livepeer Studio.

But if you want, you can also pass the IPFS hash here and that should work too. For example, this would be IPFS.dot.slash, and this is where you will want to put the IPFS hash. It doesn't matter if your video is stored in IPFS, W3 Storage, or W3 Storage, or anywhere else, it will automatically play.

For example, if you go to storage, and here we have some videos that I have stored in both IPFS and Arweave. For example, this video. I can just copy the IPFS hash here and go back to our application and put the hash here. Save this, and now if you go here, the video should play. And so.

Let's recreate it. And yes, you can see the video playing. And you can also play. And yes, that's all. Thank you very much.

But yes, this is a pre- recorded seminar. If you have any questions or anything else, feel free to send me a private message on Discord or join us on Livepeer Discord. You can ask questions to CD support.