IPFS-based HLS Video Streaming Service for Web 3.0

This web application is an IPFS-based HLS video streaming service for Web 3.0. This system is structured as hybrid P2P because there is a web server for advertising videos and encoding the videos into several chunks and encryption. The goal of this project is providing fast video streaming service as a Web 3.0 streaming service using IPFS.

It contains JS-IPFS, HLS.js, and HLSjs-IPFS-Loader modules.

Contents

• Prerequisites
• Quick Start
• Functionality

If you want to run IPFS-based HLS streaming example on localhost (don't want to setup server side), you can refer this sample that lets you experience IPFS-based HLS video streaming running on localhost.

Prerequisites

HTTPS Set Up

You need to setup SSL for running HTTPS service. The web page to playback the videos in this project requires HTML file from web server. However, if you run web server on HTTP or localhost, the contents may be blocked by web browsers, such as chrome, safari, firefox, and brave, because there is a security policy in libp2p. Fortunately, you can build HTTPS using simple ceritifications.

Follow the instruction in ssl folder:

$ openssl ecparam -out rootca.key -name prime256v1 -genkey
$ cat rootca.key
$ openssl req -new -sha256 -key rootca.key -out rootca.csr
$ cat rootca.csr 
$ openssl x509 -req -sha256 -days 999999 -in rootca.csr -signkey rootca.key -out rootca.crt

Before you install mkcert, you need to install brew or homebrew first.

$ brew install mkcert
$ mkcert -install
$ mkcert localhost

Web3.Storage

This app uses Web3.Storage, a Filecoin-backed Pinning Service, for uploading HLS chunks to IPFS network. If you want to activate video uploading functionality, you need to set up Web3.Storage API in .env file. Here is an instruction for setting up your Web3.Storage API.

# .env
Web3Token=eyJhbGc...

Quick Start

# install NodeJS modules
$ npm install
# run the web app
$ npm start

Functionality

Upload

It provides video uploading function, which encodes the video using HLS protocol. Users can upload their videos by contacting the top-right button.

Select a video file and a image file for thumbnail, and click submit button. When it finished the processing, it reloads the main page and updates video lists. The video lists is in public/video-list.csv.