Saltar al contenido principal
Empieza con Livepeer Studio creando una cuenta, una clave de API y luego usando el SDK para reproducir un video (por ejemplo, un activo que subiste en el panel de control).

​
1. Crea una cuenta y una clave de API

  1. Ve a Livepeer Studio y crea una cuenta.
  2. Abre el Desarrolladores área y haga clic en Crear clave de API.
  3. Almacene la clave de API de forma segura (por ejemplo, en variables de entorno). Úsela desde su backendal llamar a la API de Livepeer Studio.
CORS-enabled API keys are not recommended and will be deprecated. Make requests to the Livepeer Studio API from your backend and never expose your secret API key in the browser.
Use separate accounts or projects for development and production to keep environments isolated.

​
2. Instalar el SDK

Este ejemplo utiliza el SDK de JavaScript y la biblioteca Livepeer React: 
npm install livepeer @livepeer/react

​
3. Configurar el cliente

Agregue su clave de API a las variables de entorno, luego cree el cliente Livepeer (por ejemplo, en un contexto de backend o servidor): 
import Livepeer from "livepeer";

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

​
4. Obtener información de reproducción

Use the client to fetch playback info for an asset (for example, one you uploaded in the dashboard). You need the asset’s playback ID: 
import { getSrc } from "@livepeer/react/external";

const playbackId = "f5eese9wwl88k4g8"; // replace with your playback ID

export async function getPlaybackSource() {
  const playbackInfo = await livepeer.playback.get(playbackId);
  return getSrc(playbackInfo.playbackInfo);
}

​
5. Play the asset

Use the Livepeer Player to play the video. Fetch the source on the server (e.g. in a React Server Component or API route), then pass it to the Player: 
import { PauseIcon, PlayIcon } from "@livepeer/react/assets";
import { getSrc } from "@livepeer/react/external";
import * as Player from "@livepeer/react/player";

export function DemoPlayer({ src }: { src: Src[] | null }) {
  return (
    <Player.Root src={src}>
      <Player.Container>
        <Player.Video title="Video" />
        <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>
  );
}

​
Next steps

Last modified on March 1, 2026