Getting Started

Livepeer React UI Kit is a set of prebuilt and customizable UI primitives for building live or on-demand video experiences.

​

Installation

Install Livepeer React UI Kit using your favorite package manager.

npm i @livepeer/react

​

Build with the primitives

You can use Player primitives to build a media playback experience, and Broadcast primitives to build an in-browser broadcasting experience.

Below, we create a simple player and broadcast experience with minimal controls. The player only includes a play/pause button, and the broadcast has a start/stop streaming button.

• Player.tsx
• Broadcast.tsx

​

Integrate with Studio

Now that we’ve started using the primitives, we need something to play or broadcast! We can integrate with the Livepeer Studio API to start playing media.

The below example shows the use of the livepeer JS SDK, but any other language’s SDK can be used to fetch the playback info or stream object.

• get-source.ts
• get-ingest.ts

// this is a server function, which uses the API key
// on the backend
import { Livepeer } from "livepeer"
import { getSrc } from "@livepeer/react/external";

const livepeer = new Livepeer({
  apiKey: "YOUR_API_KEY"
})

export async function getSourceForPlaybackId(playbackId: string) {
  const response = await livepeer.playback.get(playbackId);

  // the return value can be passed directly to the Player as `src`
  return getSrc(response.playbackInfo);
}

Want to learn more? Continue reading the documentation for more details.