React Broadcast

Documentation Index

Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt

Use this file to discover all available pages before exploring further.

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 components

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

• 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

• Broadcast.SourceSelect enumerates and selects camera/microphone devices

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