React Broadcast

The @livepeer/react Broadcast component: browser-based WHIP live streaming with camera/microphone selection, screen sharing, and status indicators.

@livepeer/react provides a composable Broadcast component for browser-based live streaming. It handles WebRTC signalling, camera/microphone enumeration, and stream lifecycle.

npm install @livepeer/react

Basic broadcast

import * as Broadcast from '@livepeer/react/broadcast';

export function LiveBroadcast({ streamKey }: { streamKey: string }) {
  return (
    <Broadcast.Root ingestUrl={\`https://livepeercdn.studio/webrtc/\${streamKey}\`}>
      <Broadcast.Container>
        <Broadcast.Video title="Live broadcast" />
        <Broadcast.Controls>
          <Broadcast.EnabledTrigger>
            <Broadcast.EnabledIndicator asChild matcher={false}>
              <span>Go Live</span>
            </Broadcast.EnabledIndicator>
            <Broadcast.EnabledIndicator asChild>
              <span>Stop</span>
            </Broadcast.EnabledIndicator>
          </Broadcast.EnabledTrigger>
          <Broadcast.AudioEnabledTrigger />
          <Broadcast.VideoEnabledTrigger />
          <Broadcast.ScreenshareTrigger />
        </Broadcast.Controls>
      </Broadcast.Container>
    </Broadcast.Root>
  );
}

Broadcast.Root accepts an ingestUrl (the WHIP endpoint for your stream). Get the stream key from the stream creation API response.

Broadcast components

Root components:

• Broadcast.Root accepts ingestUrl and configuration options
• Broadcast.Container wraps the video preview and controls
• Broadcast.Video renders the local camera preview

Stream controls:

• Broadcast.EnabledTrigger starts and stops the broadcast
• Broadcast.EnabledIndicator renders conditionally based on broadcast state
• Broadcast.AudioEnabledTrigger toggles microphone
• Broadcast.AudioEnabledIndicator shows mic state
• Broadcast.VideoEnabledTrigger toggles camera
• Broadcast.VideoEnabledIndicator shows camera state
• Broadcast.ScreenshareTrigger starts screen sharing
• Broadcast.ScreenshareIndicator shows screen share state

Device selection:

• Broadcast.SourceSelect enumerates and selects camera/microphone devices

Status:

• Broadcast.StatusIndicator renders based on connection state (connecting, connected, error)
• Broadcast.ErrorIndicator renders on broadcast failure
• Broadcast.LoadingIndicator renders during connection setup

Source: livepeer/ui-kit packages/react/src/broadcast.tsx.

The video overview covers stream creation. The ingest and playback page covers RTMP and WHIP ingest configuration.