Skip to main content

Bundlr + Livepeer

Livepeer is a decentralized video protocol for transcoding video content. For projects involving both live and recorded video, Livepeer combined with Bundlr allows you to optimize video delivery for each unique client.

We also have a full working demo of this code in our WebBundlr Basics project and in the associated GitHub repo.

Transcoding​

Transcoding is the process of converting between video file format types. When streaming video, it's important as it allows you to optimize video delivery based on factors such as a client's device size, preferences and the quality of their internet connection. This allows you to upload a high-resolution 4K video file, and then deliver formats optimized for TV streaming, tablets and mobile. You can even allow clients to specify lower-quality formats to help economize bandwidth charges.

Setup​

To get started, you'll need to create an API key first.

If you're working with React, you can install the Livepeer React SDK with:

npm @livepeer/react

Transcoding A Video Stored On Arweave​

Video files can be uploaded to Arweave via Bundlr using our CLI, SDK or any of our web-based uploaders.

Using the <Player> tag from the Livepeer SDK you can embed an Arweave URL, the URL format can be either ar://aqvPK_xi-EDcmAHPAPpDcaYyGekp-06T16ElvNTnJNk or https://arweave.net/aqvPK_xi-EDcmAHPAPpDcaYyGekp-06T16ElvNTnJNk. The first time Livepeer encounters the URL it will transcode the file, the transcoded versions are then stored in an account tied to your API key. Transcoded files are kept for as long as your account is active.

<Player
    title="Bundlr SDK For NodeJs"
    src="ar://aqvPK_xi-EDcmAHPAPpDcaYyGekp-06T16ElvNTnJNk"
    autoPlay
    muted
/>

In order to properly transcode your video, the <Player> component must have access to a Livepeer client that contains a valid API key. Best practice is to use the provider pattern and the <LivepeerConfig> component.

For example, to make the client available to all child components in your app, you would structure your index.js file as follows.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { LivepeerConfig, createReactClient, studioProvider } from "@livepeer/react";

const livepeerClient = createReactClient({
    provider: studioProvider({
        apiKey: process.env.LIVEPEER_API_KEY,
    }),
});

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
    <LivepeerConfig client={livepeerClient}>
        <App />
    </LivepeerConfig>,
);