# 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:

![Preview of the UI](@video/react/_assets/ui-cookbook/watching-a-livestream/normal-mode.png)

And, in screen share mode:

![Preview of the UI](@video/react/_assets/ui-cookbook/watching-a-livestream/screenshare-mode.png)

## Usage

```tsx
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`.


---

This page was last updated at 2026-07-10T16:05:24.780Z.

For the most recent version of this documentation, visit [https://getstream.io/video/docs/react/ui-cookbook/watching-a-livestream/](https://getstream.io/video/docs/react/ui-cookbook/watching-a-livestream/).