Build Youtube using IPFS

vasa -

This is a quick tutorial that will teach you how to:

Youtube using IPFS

You can check out the complete code for the tutorial here.

Install, Initialize, and Connect IPFS to Public Network

You can follow these instructions to install, initialize, and connect IPFS to public network.

Make sure that your API endpoint is open at port 5001. You can check that by going to below link in your browser:

http://localhost:5001/webui

You will see the following IPFS Status Page.

Note: The page may take a minute to load.
IPFS Web Console

In case you are stuck somewhere, let us know here.

Setting up our Youtube Webapp

Before we start working with IPFS, we need a user interface for our Youtube web app. Let's clone the following repository and move into youtube_on_ipfs:

$ git clone https://github.com/simpleaswater/ipfs.git
$ cd ipfs/tutorials/youtube_on_ipfs

Note: If you see "Uncaught DOMException: Failed to read the 'localStorage' property from 'Window': Access is denied for this document" error, then serving the web app using a web server like apache.
Using IPFS HTTP API in browser

Open the youtube_on_ipfs repo in your favourite text editor. Now, open the index.html file.

Here we have some basic bootstrap UI. We have an upload button with id=customFile and a div with id=videos where we will populate our videos.

In order to communicate with the IPFS peer running on our device, we will have to use ipfs-http-client, which interacts with the IPFS peer via the API endpoint to upload data on the peer.

Let's add a CDN script link in the <head> section:

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Youtube on IPFS - SimpleAsWater</title>
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
          crossorigin="anonymous">

    <!-- Import JS IPFS CDN Link -->
    <script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>


    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>

Now, we can access the ipfs-http-client from the browser.

Let's move to js/app.js. Here we manage all the logic for our web app.

As soon as a user will select a file to upload, we will convert the file Blob to an ArrayBuffer and upload it to the IPFS peer. But, in order to upload to files to the IPFS peer, first, we need to connect with the IPFS peer.

Let's do that by initializing the ipfs-http-client:

//TODO: Initialize IPFS HTTP API
const ipfs = window.IpfsHttpClient('localhost', '5001')

Here, as we are running our IPFS peer on the same device on which we are building our web app, we can access the IPFS API endpoint on localhost:5001.

Note: If you are running the IPFS peer on a different device, then replace localhost:5001 with the public IP and port of the remote device.
Uploading data to local IPFS peer

Now, as we have connected to the IPFS peer, we can add our videos to it. Let's do that by using ipfs.add:

//TODO: Upload Data to IPFS peer using IPFS HTTP API
const results = await ipfs.add(e.target.result)

When we upload a file to the IPFS peer we will get a response( results ) that will look something like this:

{
  "hash": "QmbL8GTmeCuAJeaQeRaZb8uqZJbRnpDoYpyW51hB43UdTt",
  "path": "QmbL8GTmeCuAJeaQeRaZb8uqZJbRnpDoYpyW51hB43UdTt",
  "size": 11989385
}

Here, path is the path of the file(which defaults to value of the hash in case we do not pass the path parameter), hash is the hash of the file uploaded, and size is the size of the uploaded file.

Using IPFS hashes to retrieve data and displaying it on browser

Now, as we have uploaded the video on IPFS, we need to retrieve it back and display it on our video list.

To retrieve the videos from the IPFS peer, we need the hash of the videos files. So, every time when we upload a video, we store details like name, hash, and size of the uploaded video in browser localStorage(in updateVideoList()).

Now, as we have the hashes, we will use the IPFS HTTP Gateway to retrieve the videos from the IPFS peer. The IPFS Gateway is an HTTP endpoint where you can pass the hash of the file to retrieve it. For example, below you can see a website with hash QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T using the IPFS Gateway.

http://gateway.simpleaswater.com:8080/ipfs/QmQToNGFsGMkQe76mRirCvRyk

Now, let's add the Gateway endpoint in app.js to display the videos:

//TODO: Retrieve the Data from the IPFS peer using IPFS Gateway
videoSrc.src = `http://localhost:8080/ipfs/${videos[i].hash}`

That's it. Now open index.html in your browser and upload video files by clicking the upload button.

Youtube on IPFS

Now, if you want to host this website on IPFS, checkout "Host a website using IPFS, IPNS, and DNSLink".

In case you are stuck somewhere, let us know here.