Livestream from browser

​

Flow

1. Create a stream via the API and get a stream key.
2. Open a WebRTC connection to Livepeer ingest using that key (STUN/TURN required).
3. Capture camera, microphone, and/or screen in the browser and send over WebRTC.
4. Viewers watch via the stream playback ID in the Livepeer Player.

​

Using the Broadcast component

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>
  );
}

​

Embeddable broadcast

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

​

Custom WebRTC (WHIP)

1. Send HEAD to https://livepeer.studio/webrtc/{STREAM_KEY} and follow the Location redirect for the ingest URL.
2. Create RTCPeerConnection with ICE servers from that host (STUN/TURN).
3. Create SDP offer, gather ICE, POST offer to ingest URL, set answer as remote description.
4. Add media tracks and send. End of broadcast is detected when packets stop; no DELETE required.