# HostLivestream

Host-side livestream UI component with minimal setup. Features:

- **Full livestream UI** - Host and stream video content
- **Duration display** - Real-time duration with live indicator
- **Viewer count** - Live status and active viewer count
- **Controls** - Start/end stream, pause/resume audio/video

![Host Livestream Start](https://getstream.io/docs-assets/images/723e5811a42c.png)

![Host Livestream End](https://getstream.io/docs-assets/images/a85a372da9d4.png)

## General usage

Show `HostLivestream` UI:

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

const VideoCallUI = () => {
  let call: Call;
  // your logic to create a new call or get an existing call

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

## Props

### `hls`

Enable HTTP livestreaming

| Type      | Default |
| --------- | ------- |
| `boolean` | false   |

### `HostLivestreamTopView`

Component to customize the top view at the host's live stream.

| Type                          | Default Value                                                                                                                                                                     |
| ----------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`HostLivestreamTopView`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/HostLivestreamTopView.tsx) |

### `LivestreamLayout`

Component to customize the live stream video layout.

| Type                          | Default Value                                                                                                                                                          |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`LivestreamLayout`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamLayout/LivestreamLayout.tsx) |

### `HostLivestreamControls`

Component to customize the bottom view controls at the host's live stream.

| Type                          | Default Value                                                                                                                                                                        |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ComponentType`\| `undefined` | [`HostLivestreamControls`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostLivestreamControls.tsx) |

>
> **Note:** To add screen-sharing to livestream, include the exported [`LivestreamScreenShareToggleButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamScreenShareToggleButton.tsx) in your custom `HostLivestreamControls` component.
>

### `DurationBadge`

Component to customize the duration badge on the viewer's livestream top view.

| Type                          | Default Value                                                                                                                                                     |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`DurationBadge`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/DurationBadge.tsx) |

### `FollowerCount`

Component to customize the follower count indicator on the viewer's livestream top view.

| Type                          | Default Value                                                                                                                                                     |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`FollowerCount`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/FollowerCount.tsx) |

### `LiveIndicator`

Component to customize the live indicator on the viewer's livestream top view.

| Type                          | Default Value                                                                                                                                                     |
| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`LiveIndicator`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamTopView/LiveIndicator.tsx) |

### `HostStartStreamButton`

Component to customize the host's start/end live stream button.

| Type                          | Default Value                                                                                                                                                                      |
| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`HostStartStreamButton`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamControls/HostStartStreamButton.tsx) |

### `LivestreamMediaControls`

Component to customize the host's media control(audio/video) buttons.

| Type                          | Default Value                                                                                                                                                                          |
| ----------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `ComponentType`\| `undefined` | [`LivestreamMediaControls`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/Livestream/LivestreamControls/LivestreamMediaControls.tsx) |

### `onStartStreamHandler`

Handler to be called when the Start Stream button is pressed.

| Type                        |
| --------------------------- |
| `() => void` \| `undefined` |

### `onEndStreamHandler`

Handler to be called when the End Stream button is pressed.

| Type                        |
| --------------------------- |
| `() => void` \| `undefined` |

### `ScreenShareOverlay`

Component to customize the screen share overlay, when the screen is shared by a user.

| Type                          | Default Value                                                                                                                                          |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `ComponentType`\| `undefined` | [`ScreenShareOverlay`](https://github.com/GetStream/stream-video-js/blob/main/packages/react-native-sdk/src/components/utility/ScreenShareOverlay.tsx) |

---

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