Мітки

SimpleAsWater Tutorial: Building Youtube using IPFS in 5 mins

 

Youtube On IPFS in 5 mins

By
 
vasa 
Medium
4 min
View Original

    SimpleAsWater Tutorial: Building Youtube using IPFS in 5 mins

    Receive curated Web 3.0 content like this with a summary every day via WhatsApp, Telegram, Discord, or Email.

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

    • Setting up IPFS on your local device
    • Using IPFS HTTP API in browser
    • Uploading data to local IPFS peer
    • Using IPFS hashes to retrieve data and displaying it on browser

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

    Youtube on IPFS
    Youtube on IPFS

    If you want to check out more tutorials on IPFS, Ethereum, Libp2p, Filecoin, IPLD, Multiformats, and IPFS Cluster, or just want to learn the basic concepts, then head here:

    Install, Initialize, and Connect IPFS to Public Network

    You can follow these instructions to install, initialize, and connect IPFS to the 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 Status Page
    IPFS Status Page

    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:

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

    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 APIconst 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 APIconst 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 browserlocalStorage(in updateVideoList()).

    Now, as we have the hashes, we will use the IPFS HTTPGateway to retrieve the videos from the IPFS peer. The IPFS Gatewayis 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/QmQToNGFsGMkQe76mRirCvRykJSiRB1JPpRLumyMN7N67T/

    Now, let’s add the Gatewayendpoint in app.js to display the videos:

    //TODO: Retrieve the Data from the IPFS peer using IPFS GatewayvideoSrc.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.

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

    This article was first published on our open-source platform, SimpleAsWater.com. If you are interested in IPFS, Libp2p, Ethereum, Zero-knowledge Proofs, DeFi, CryptoEconomics, IPLD, Multiformats, and other Web 3.0 projects, concepts and interactive tutorials, then be sure to check out SimpleAsWater.

    Thanks for reading ;)

    Learned something? Click the 👏 to say “thanks!” and help others find this article.

    Hold down the clap button if you liked the content! It helps me gain exposure.

    About the Author

    Vaibhav Saini is a Co-Founder of TowardsBlockchain, an MIT Cambridge Innovation Center incubated startup.

    He works as Tech Lead and has worked on several blockchain platforms including Ethereum, Quorum, EOS, Nano, Hashgraph, IOTA, etc.

    Want to learn more? Check out my previous articles.

    Say me hi on Twitter: @vasa_develop

    Просмотры:
    Мітки:

    Коментарі

    Дописати коментар

    Олег Мічман в X: «Donations and support for media resources, bloggers, projects, and individuals. https://t.co/HPKsNRd4Uo https://t.co/R6NXVPK62M» / X
    https://twitter.com/olukawy/status/1703876551505309973

    Популярні публікації