As you can see in the above example, the component will request permissions for video/audio input - so it prompts the user for access to their microphone and camera upon component mount.

The getUserMedia browser API used to get the video/audio is only available in secure contexts (HTTPS).

​
Features

  • Synchronizes state with the HTML5 video element
  • Keyboard hotkeys (B to toggle whether the broadcast is enabled, L to toggle audio, V to toggle video, D to broadcast display media, C for next video source, M for next audio source)
  • Adheres to WAI-ARIA design patterns
  • Handles all common browser APIs, and old WebKit/Firefox APIs (see caniuse)

The Broadcast above will work with only keyboard shortcuts, without any custom controls.

​
Anatomy

Import the components and piece the parts together.

import * as Broadcast from "@livepeer/react/broadcast";

export default () => (
  <Broadcast.Root>
    <Broadcast.Video />
  </Broadcast.Root>
);

​
Props

The component accepts most props suitable for a HTML5 video tag, except for src and poster which are managed internally or provided explicitly through props.

​
Data Attributes

​
data-livepeer-video

Serves to identify the component’s role within the Broadcast.

​
data-enabled

Indicates the enabled state of the broadcast, "true" when broadcasting is enabled and "false" when it is not.

Was this page helpful?

ContainerEnable