# LivestreamPlayer

The `LivestreamPlayer` plays a WebRTC livestream given the call ID and type. Uses [`LivestreamLayout`](https://getstream.io/video/docs/react/ui-components/call/call-layouts/#livestreamlayout) under the hood.

## Best Practices

- Use `joinBehavior="live"` if viewers should only see the live stream (not backstage).
- Use `joinBehavior="asap"` for waiting rooms where viewers join before going live.

## General usage

```tsx
import {
  LivestreamPlayer,
  StreamVideo,
  StreamVideoClient,
} from "@stream-io/video-react-sdk";

export const MyLivestreamScreen = () => {
  let client: StreamVideoClient; // init the client
  return (
    <StreamVideo client={client}>
      <LivestreamPlayer callType="livestream" callId="my-call-id" />
    </StreamVideo>
  );
};
```

## Props

### `callType`

The call type. Typically, `livestream`.

### `callId`

The call ID.

### `layoutProps`

A list of props that can be passed to the `LivestreamLayout` component. You can read more about it [here](https://getstream.io/video/docs/react/ui-cookbook/watching-a-livestream/).

| Type                                   | Default Value |
| -------------------------------------- | ------------- |
| `LivestreamLayoutProps` \| `undefined` | `undefined`   |

### `joinBehavior`

Determines when the viewer joins the call.

`"asap"` behavior means joining the call as soon as it is possible (either the `join_ahead_time_seconds` setting allows it, or the user has a the capability to join backstage).

`"live"` behavior means joining the call when it goes live.

| Type                 | Default Value |
| -------------------- | ------------- |
| `'asap'` \| `'live'` | `asap`        |

### `backstageProps`

Props forwarded to the backstage layout that is shown before the livestream goes live.

| Type                                  | Default Value |
| ------------------------------------- | ------------- |
| `BackstageLayoutProps` \| `undefined` | `undefined`   |

### `onError`

Callback invoked when the player fails to join or play the livestream.

| Type                                  | Default Value |
| ------------------------------------- | ------------- |
| `(error: any) => void` \| `undefined` | `undefined`   |


---

This page was last updated at 2026-08-10T16:01:04.496Z.

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