Diffuser en direct depuis le navigateur

​

Flux

1. Créez un flux via l’API et obtenez une clé de flux.
2. Ouvrez une connexion WebRTC vers l’ingestion Livepeer en utilisant cette clé (STUN/TURN requis).
3. Capturez la caméra, le microphone et/ou l’écran dans le navigateur et envoyez-le via WebRTC.
4. Les spectateurs regardent via le flux ID de lecture dans le Livepeer Player.

​

Utilisation du composant Broadcast

import * as Broadcast from "@livepeer/react/broadcast";
import { getIngest } from "@livepeer/react/external";

const streamKey = "your-stream-key";

export function DemoBroadcast() {
  return (
    <Broadcast.Root ingestUrl={getIngest(streamKey)}>
      <Broadcast.Container>
        <Broadcast.Video title="Live stream" />
        <Broadcast.Controls>
          <Broadcast.EnabledTrigger />
        </Broadcast.Controls>
      </Broadcast.Container>
    </Broadcast.Root>
  );
}

​

Diffusion intégrable

<iframe
  src="https://lvpr.tv/broadcast/STREAM_KEY"
  allow="autoplay; camera; microphone; display-capture"
  frameborder="0"
></iframe>

​

WebRTC personnalisé (WHIP)

1. Envoyer “HEAD à “https://livepeer.studio/webrtc/{STREAM_KEY} et suivre les Location redirection pour l’URL d’ingestion.
2. Créer RTCPeerConnection avec des serveurs ICE provenant de cet hôte (STUN/TURN).
3. Créer une offre SDP, collecter les données ICE, envoyer l’offre à l’URL d’ingestion, définir la réponse comme description distante.
4. Ajouter les pistes multimédias et envoyer. La fin de la diffusion est détectée lorsqu’il n’y a plus de paquets ; aucun DELETE n’est requis.