# Video preview

`VideoPreview` shows how you appear to others before joining a call. Ideal for lobby scenarios. Handles video starting, playback, and error handling automatically.

Customize what displays when:

1. Video is starting
2. Video is disabled
3. Camera not found

## Best Practices

- Use in lobby/preview screens before `call.join()`.
- Provide custom `DisabledVideoPreview` to match your app's design.
- Use `mirror={true}` (default) for natural self-view experience.

## General usage

```tsx
import { Call, VideoPreview, StreamCall } from "@stream-io/video-react-sdk";

const MyVideoPreview = () => {
  let call: Call;

  return (
    <StreamCall call={call}>
      <VideoPreview />
    </StreamCall>
  );
};
```

## Props

### `className`

| Type                    | Default     |
| ----------------------- | ----------- |
| `string` \| `undefined` | `undefined` |

Additional CSS class to add to the component container.

### `mirror`

| Type                     | Default |
| ------------------------ | ------- |
| `boolean` \| `undefined` | `true`  |

Enforces mirroring of the video on the X axis.

### `DisabledVideoPreview`

| Type                           |
| ------------------------------ |
| `ComponentType` \| `undefined` |

Component rendered when user turns off the video.

![Default component for DisabledVideoPreview](https://getstream.io/docs-assets/images/3841ffdda1e7.png)

### `NoCameraPreview`

| Type                           |
| ------------------------------ |
| `ComponentType` \| `undefined` |

Component rendered when no camera devices are available.

![Default component for NoCameraPreview](https://getstream.io/docs-assets/images/f45bbb3323a4.png)

### `StartingCameraPreview`

| Type                           |
| ------------------------------ |
| `ComponentType` \| `undefined` |

Component rendered above the BaseVideo until the video is ready (meaning until the play event is emitted).

![Default component for StartingCameraPreview](https://getstream.io/docs-assets/images/460fcf26c874.png)

## Customization

If the [built-in props](#props) don't provide enough flexibility for you, you can create your own video preview component.
You can rely on the state and API provided by the [`Camera API`](https://getstream.io/video/docs/react/v2/guides/camera-and-microphone/).

---

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