> ## Documentation Index
> Fetch the complete documentation index at: https://docs.livepeer.org/llms.txt
> Use this file to discover all available pages before exploring further.
# Root
> The `Broadcast.Root` component is the React Context wrapper for Broadcast.
This is a comprehensive example of how the Broadcast elements can fit together
to build an advanced in-browser streaming experience. This does not only show
the Root Broadcast, but how the Root can be used to provide a state store to
all of its children.
## Features
* Pure React Context provider to pass the broadcast and media state store to all
components
* Automatic SDP negotiation with a
[WebRTC WHIP](https://www.ietf.org/archive/id/draft-ietf-wish-whip-01.html)
endpoint
The Broadcast component utilizes WebRTC for streaming and consistently employs
STUN/TURN servers for the WebRTC connection. This setup facilitates
broadcasting despite corporate firewalls or port restrictions. The component
adheres to WHIP/WHEP standards for ingest/egress SDP negotiation, making it
compatible with any WHIP/WHEP ingest endpoint.
## Anatomy
Import the components and piece the parts together.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
import * as Broadcast from "@livepeer/react/broadcast";
export default () => (
{/* All child components which use the state store. */}
);
```
## Usage
The `Player.Root` component is a React Context wrapper which passes the player
state store down to all of the child components. It is responsible for creating
the [Zustand](https://github.com/pmndrs/zustand) state store which is consumed
by the children, and listens for media/browser events and keeps state in sync.
The Player automatically handles different source types, such as WebRTC, MP4, and HLS.
These are seamlessly integrated so that playback has low latency under all
network conditions.
It is compatible with WebRTC WHEP endpoints, HLS (and low latency HLS), or
typical media file playable by an HTML5 video element (MP4, WebM).
## Props
### `ingestUrl`
Configures the WHIP WebRTC ingest URL for the `Broadcast` component. You can
create the `ingestUrl` by passing
[`getIngest`](/sdks/react/broadcast/get-ingest) a string (interpreted as a
Livepeer Studio stream key or URL), Livepeer Studio stream data, or Cloudflare
stream data. `Broadcast` is compatible with all WHIP playback endpoints.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `aspectRatio`
Specifies the aspect ratio of the content. Recommended for an optimal
broadcasting experience to minimize
[Cumulative Layout Shift](https://web.dev/cls/). The default value is `16 / 9`.
Set to `null` to disable the aspect ratio container (see `Container`).
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `forceEnabled`
Determines whether the WebRTC stream should start immediately after the user
allows access to their video/audio input. The default is `false`, which previews
the video first, then streams media to the server upon activation.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `audio`
Controls whether audio is enabled initially for the broadcast. The default is
`true`. Set to `false` to start the broadcast without requesting an audio track.
This can be an object that adheres to the structure of
[`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints),
which will constrain the audio track used in the broadcast.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `video`
Controls whether video is enabled initially for the broadcast. The default is
`true`. Set to `false` to start the broadcast without requesting a video track.
This can be an object that adheres to the structure of
[`MediaTrackConstraints`](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints),
which will constrain the video track used in the broadcast. This is usually used
to limit the resolution of the video and improve bandwidth usage.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `hotkeys`
Enables keyboard hotkeys for controlling the broadcast. Enabled by default
(`true`). It's recommended to follow ARIA guidelines by keeping this enabled
unless you're implementing custom hotkeys or there's a conflict with existing
ones.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `creatorId`
Sets the creator ID for the broadcast, useful for metrics and viewership API
integration.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `onError`
An optional callback for handling broadcasting errors. It's called with `null`
when the previous error is resolved. The callback receives the parameter:
```ts theme={"theme":{"light":"github-light","dark":"dark-plus"}}
type PlaybackError = {
type: "offline" | "access-control" | "fallback" | "permissions" | "unknown";
message: string;
};
```
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
console.log(error)}>{...}
```
### `timeout`
Sets the timeout duration for playback before switching to the next source,
including SDP negotiation for WebRTC, waiting for WebRTC to play, and server
responses. The default is 10000 milliseconds.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```
### `storage`
Configures the storage option for saving persistent states like volume and video
quality. The default is `localStorage` in the browser. Set to `null` to disable
storage.
```tsx theme={"theme":{"light":"github-light","dark":"dark-plus"}}
{...}
```