Passer au contenu principal
Commencez avec Livepeer Studio en créant un compte, une clé API, puis en utilisant le SDK pour lire une vidéo (par exemple, un actif que vous avez téléchargé dans le tableau de bord).

​
1. Créez un compte et une clé API

  1. Allez sur Livepeer Studio et créez un compte.
  2. Ouvrez le Développeurs zone et cliquez sur Créer une clé d’API.
  3. Stockez la clé d’API de manière sécurisée (par exemple, dans les variables d’environnement). Utilisez-la depuis votre backendlors de l’appel de l’API 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. Installer le SDK

Cet exemple utilise le SDK JavaScript et la bibliothèque Livepeer React : 
npm install livepeer @livepeer/react

​
3. Configurer le client

Ajoutez votre clé API aux variables d’environnement, puis créez le client Livepeer (par exemple, dans un contexte backend ou serveur) : 
import Livepeer from "livepeer";

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

​
4. Obtenir les informations de lecture

Utilisez le client pour récupérer les informations de lecture d’un actif (par exemple, un que vous avez téléchargé dans le tableau de bord). Vous avez besoin de l’identifiant de lecture de l’actif :identifiant de lecture: 
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. Diffusez l’actif

Utilisez le lecteur Livepeer pour diffuser la vidéo. Récupérez la source sur le serveur (par exemple, dans un composant serveur React ou une route API), puis passez-la au lecteur : 
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>
  );
}

​
Étapes suivantes

Last modified on March 1, 2026