Watching a livestream

Watch livestreams via WebRTC using the LivestreamLayout component. Features:

• Live indicator badge
• Viewer count
• Duration display
• Fullscreen toggle

Best Practices

• Ensure the call is live (not backstage) before rendering.
• Use humanizeParticipantCount for large viewer counts (e.g., 1220 → 1.2k).
• Configure floatingParticipantProps for screen share mode.

Preview in video mode:

And, in screen share mode:

Usage

import {
  LivestreamLayout,
  StreamVideo,
  StreamCall,
} from "@stream-io/video-react-sdk";

const client = new StreamVideoClient({ apiKey, user, token });
const call = client.call("livestream", id);
await call.join(); // Make sure to join the call before rendering the component

export const MyLivestreamApp = () => {
  return (
    <StreamVideo client={client}>
      <StreamCall call={call}>
        <LivestreamLayout
          muted={false}
          enableFullscreen={true}
          showParticipantCount={true}
          humanizeParticipantCount={true}
          showDuration={true}
          showLiveBadge={true}
          showMuteButton={true}
          showSpeakerName={false}
          floatingParticipantProps={{
            muted: false,
            enableFullscreen: true,
            showParticipantCount: true,
            humanizeParticipantCount: true,
            showDuration: true,
            showLiveBadge: true,
            showMuteButton: true,
            showSpeakerName: false,
            position: "top-right",
          }}
        />
      </StreamCall>
    </StreamVideo>
  );
};

Ensure the livestream is started and not in backstage mode before rendering.

Customization options

• muted - a boolean flag that indicates whether the livestream should be muted or not. Defaults to false.
• enableFullscreen - a boolean flag that indicates whether the fullscreen button should be shown or not. Defaults to true.
• showParticipantCount- a boolean flag that indicates whether the current viewer count should be shown or not. Defaults to true.
• humanizeParticipantCount - a boolean flag that indicates whether the current viewer count should be humanized or not (e.g.: 1220 -> 1.2k). Defaults to true.
• showDuration - a boolean flag that indicates whether the duration of the livestream should be shown or not. Defaults to true.
• showLiveBadge- a boolean flag that indicates whether the "Live" badge should be shown or not. Defaults to true.
• showSpeakerName - a boolean flag that indicates whether the speaker should be shown or not. Defaults to false.
• showMuteButton - a boolean flag that indicates whether the mute button should be shown or not. Defaults to true.
• floatingParticipantProps - an optional object that contains props that should be passed to the "Floating Participant" component in screen-share mode. They are identical to the props of the LivestreamLayout component props.
• floatingParticipantProps.position - a string that indicates the position of the "Floating Participant" component. Can be either top-left, top-right, bottom-left or bottom-right. Defaults to top-right.