Skip to main content
This tutorial is based on Livepeer React version 3.9 or earlier, which is now deprecated. Please ensure that you use Livepeer React version 4 or later, with the new Livepeer JavaScript SDK. The integration process may appear different, but the underlying concepts remain same.
IPFS is a decentralized peer-to-peer network that allows anyone to store and share files. Unlike traditional centralized storage systems, IPFS stores data across a network of distributed nodes, making it impossible to tamper with or lose data. 4everland makes it very easy to upload, store, pin and fetch files from IPFS. When combined with Livepeer, users can build decentralized video applications, archive videos, create video NFTs, and more. In this tutorial, you will learn how to use Livepeer to upload, transcode, and playback videos on IPFS using 4Everland and Livepeer.

​
Prerequisites

Before you start with this tutorial, make sure you have the following tools installed on your machine:

​
Setting up Next.js App

First, let’s create a directory for your project and initialize a Next.js app using the following command in your terminal: 
npx create-next-app .
This will create a new Next.js app in the current directory and install all the necessary dependencies. Next, let”s install the @livepeer/react, library which we will use to integrate Livepeer: 
npm install @livepeer/react dotenv

​
Adding TailwindCSS

Tailwind CSS is a utility-first CSS framework that enables you to rapidly build user interfaces. We will use it to style our app. First, we need to install the tailwindcss, postcss, and autoprefixerdependencies. These dependencies are necessary for TailwindCSS to work properly in a Next.js app. Run the following command to install them: 
npm install --dev tailwindcss postcss autoprefixer
Once the dependencies are installed, we need to initiate the Tailwind CSS. This will create the necessary configuration files and allow you to customize the default Tailwind CSS styles. To do that, run the below code in your terminal. 
npx tailwind init -p
The above command will generate two files named tailwind.config.js and postcss.config.js. These files contain the configuration for Tailwind CSS and PostCSS, respectively. Next, open the tailwind.config.js file in code editor of your choice and replace its contents with the following code: 
module.exports = {
  content: ["./pages//.{js,ts,jsx,tsx}", "./components//.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};
The above code tells Tailwind CSS which files to process. At last, add the tailwind directives for each of Tailwind’s layers to the ./styles/globals.css file. 
@tailwind base;
@tailwind components;
@tailwind utilities;
You can also check if Tailwind CSS is integrated successfully by updating the code inside of the pages/index.js file, with below code. 
<div className="flex flex-col justify-center items-center h-screen font-poppins">
  <h1 className="text-9xl font-bold text-slate-900 text-transparent bg-clip-text bg-gradient-to-r from-[#00A660] to-[#28CE88]">
    Livepeer x IPFS
  </h1>
  <h3 className="text-xl mt-6 text-slate-800 w-[50%] text-center">
    Upload, stream, and transcode video on the decentralized web with Livepeer
    and IPFS.
  </h3>
</div>
Save the file and run npm run dev to start the next.js app.

​
Integrating Livepeer

Livepeer is a decentralized video platform that allows users to upload, transcode, and serve video content. The Livepeer React SDK provides a set of ready-to-use hooks that make it easy to integrate Livepeer into a project. To get started, navigate to https://livepeer.studio/register and create a new account on Livepeer Studio. This will give you access to your Livepeer dashboard, where you can manage your account and access your API keys. Once you have created an account, in the dashboard, click on the Developers on the sidebar.
Livepeer Studio, API key page
Then, click on Create API Key, give a name to your key and then copy it as we will need it later. To use Livepeer React in your project, create a new directory named clientin the root directory, and add the following code to index.js 
import { createReactClient, studioProvider } from "@livepeer/react";

const LivepeerClient = createReactClient({
  provider: studioProvider({ apiKey: "YOUR_API_KEY" }),
});

export default LivepeerClient;
Make sure to replace the YOUR_API_KEY with the key which you just copied from the Livepeer dashboard. And also replace the code inside of _app.js in the page directory with the below code. 
import { LivepeerConfig } from "@livepeer/react";
import LivepeerClient from "../client";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
  return (
    <LivepeerConfig client={LivepeerClient}>
      <Component {...pageProps} />
    </LivepeerConfig>
  );
}

export default MyApp;
And that is it, you can now use Livepeer to upload and transcode assets.

​
Create IPFS Bucket

We will be first using 4everland to upload videos to Arweave and then playback the transcoded version using Livepeer’s Player. The Livepeer player automatically triggers video transcoding to ensure smooth playback. This can be useful for ensuring that your videos are of high quality and that they are accessible to a wide range of viewers, regardless of their device or connection speed. Head to the 4everland website and sign up for an account. Once you’ve created your account, navigate to the “buckets” section in the sidebar and click on “create bucket”. Give your bucket a name and select IPFS as the storage option. You can then use the 4everland dashboard or the API to upload your videos to IPFS. Then you can either use the 4everland dashboard to upload your videos to IPFS or the API.

​
Playback Videos from IPFS

Once you have uploaded the video, you can add Livepeer Player to playback the video from the IPFS. 
{
  arweaveId && (
    <div className="mt-6 w-1/2">
      <Player.Root src={"IPFS_CID"}>
        <Player.Container>
          <Player.Video />
        </Player.Container>
      </Player.Root>
    </div>
  );
}
And that is it. The player automatically transcodes your videos to ensure that they playback smoothly and without any issues. This can be useful for ensuring that your videos are of high quality and that they are accessible to a wide range of viewers, regardless of their device or connection speed. Visit 4everland to learn more about its capabilities and the service on IPFS.