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).


  • 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.


Import the components and piece the parts together.

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

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


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


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


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