About Livepeer

Livepeer is a decentralized video infrastructure protocol built for developers. It aims to increase the reliability of live and on demand video streaming while reducing infrastructure costs by up to 50x. Learn more at livepeer.org/primer

About Livepeer Studio

Livepeer Studio is an open source dashboard for interacting with the Livepeer network. Create and manage developer API keys, livestreams, and video assets from an easy-to-use UI. Get started at livepeer.studio/register

About Livepeer.js

Livepeer.js is a JavaScript SDK that allows you to easily interact with the Livepeer API and add live or on demand video experiences to your application with just a few lines of code. The SDK includes a themeable HLS player, typescript types, tests and ready-to-use hooks. Check it out at livepeerjs.org

Start building with Livepeer

Install Livepeer.js

• Using yarn

yarn add @livepeer/react

Get an API Key

• Create an account at livepeer.studio/register
• Open Developers > ****API Keys from the menu
• Create an API Key and click on “Reveal Key” to copy the API key

Create a Livepeer client

Create a Livepeer Client instance using createReactClient and pass a provider to it.

import { createReactClient, studioProvider } from '@livepeer/react';
 
const client = createReactClient({
  provider: studioProvider({ apiKey: '<STUDIO_API_KEY>' }),
});

Wrap app with LivepeerConfig

Wrap your app with the LivepeerConfig component, passing the client to it. This is typically included in _app.js for Next.js or App.js with Create React App, so that the LivepeerConfig React Context is available across every component.

import {
  LivepeerConfig,
  createReactClient,
  studioProvider,
} from '@livepeer/react';
 
const client = createReactClient({
  provider: studioProvider({ apiKey: '<STUDIO_API_KEY>' }),
});
 
function App() {
  return (
    <LivepeerConfig client={client}>
      ...
    </LivepeerConfig>
  );
}