Video
The Video
component is a container for previewing broadcast video content.
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.