Quickstart

First, go to Livepeer Studio, if you haven’t already, and create an account. Once you’ve created an account, you’ll be able to create an API key by clicking on the “Create API Key” button on Developers page.

You can now use this API key in Livepeer SDKs and APIs in order to authenticate your requests and start building.

In this example, we will use Javascript and React to upload a video. Make sure to setup a React app first.

​

Install the JS SDK and React UI Kit

We install both the NodeJS SDK (which works in all JS environments with fetch) and the React UI Kit library, which provides composable React primitives for building video apps.

npm install livepeer @livepeer/react

​

Set up the SDK

Add a API key to the environment variables, and construct a new Livepeer SDK client.

import Livepeer from "livepeer";

const livepeer = new Livepeer({
  apiKey: process.env.YOUR_PRIVATE_API_KEY,
});

​

Retrieve playback info

We can now use the SDK on the backend to fetch the playback info for our asset.

This asset was uploaded using the dashboard, but this can also be an asset created from an application.

import { getSrc } from "@livepeer/react/external";

const playbackId = "f5eese9wwl88k4g8";

export const getPlaybackSource = () => {
  const playbackInfo = await livepeer.playback.get(playbackId);

  const src = getSrc(playbackInfo.playbackInfo);

  return src;
};

​

Play the asset

We can now use Player component from the SDK to play a video. In the below example, we style the elements with Tailwind, but you can use any styling solution:

import { PauseIcon, PlayIcon } from "@livepeer/react/assets";
import { getSrc } from "@livepeer/react/external";
import * as Player from "@livepeer/react/player";
import { vodSource } from "./source";

export const DemoPlayer = ({ src }: { src: Src[] | null }) => {
  return (
    <Player.Root src={src}>
      <Player.Container>
        <Player.Video title="Live stream" />

        <Player.Controls className="flex items-center justify-center">
          <Player.PlayPauseTrigger className="w-10 h-10">
            <Player.PlayingIndicator asChild matcher={false}>
              <PlayIcon />
            </Player.PlayingIndicator>
            <Player.PlayingIndicator asChild>
              <PauseIcon />
            </Player.PlayingIndicator>
          </Player.PlayPauseTrigger>
        </Player.Controls>
      </Player.Container>
    </Player.Root>
  );
};

​

Start building

Check out the SDKs and API Reference pages to learn more about how to use the SDKs and API to build your application.

You can also refer to the Guides section for more in-depth tutorials on how to use the SDKs and API to build specific applications.

Don’t know where to start? Check out these four tutorials:

• Learn how to create a livestream
• Learn how to listen a asset events