Livestream from browser

Broadcast live from the browser using WebRTC and the Livepeer Broadcast component or custom WHIP.

In-browser broadcasting sends live video from the user’s device to Livepeer over WebRTC (e.g. WHIP), without OBS. It is optimised for low latency by default.

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

With @livepeer/react, use the Broadcast primitives and the stream ingest URL:

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>

Replace STREAM_KEY with your stream key.

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.

STUN/TURN are required for in-browser broadcasting. The Broadcast component and lvpr.tv broadcast page use Livepeer’s servers.

See Playback and Optimise latency.