Camera

​

Features

• Controls the video input state and conditionally renders based on video input on/off status, customizable with the matcher pattern
• Keyboard hotkeys and adheres to WAI-ARIA design patterns
• Handles all common browser APIs, and old WebKit/Firefox APIs (see caniuse)

​

Anatomy

Import the components and piece the parts together.

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

export default () => (
  <Broadcast.Root>
    <Broadcast.Container>
      <Broadcast.VideoEnabledTrigger />
      <Broadcast.VideoEnabledIndicator />
    </Broadcast.Container>
    <Broadcast.Container>
      <Broadcast.Controls>
        <Broadcast.VideoEnabledTrigger />
        <Broadcast.VideoEnabledIndicator />
      </Broadcast.Controls>
    </Broadcast.Container>
  </Broadcast.Root>
);

​

Props

​

VideoEnabledTrigger

Accepts all props for a typical button element.

​

VideoEnabledIndicator

forceMount

A boolean that, when true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries.

matcher

A prop intended to define the circumstances under which the VideoEnabledIndicator should be visible. It can be a boolean that corresponds directly to the audio state or a function that provides custom logic for visibility determination based on the audio state.

​

Data Attributes

​

VideoEnabledTrigger

​

data-livepeer-controls-video-enabled-trigger

Serves to identify the component’s role within the broadcast interface.

​

data-enabled

Indicates the current video state, "true" when video is enabled and "false" when it is disabled.

​

VideoEnabledIndicator

​

data-livepeer-controls-video-enabled-indicator

Identifies the component’s role as a visual indicator of the video state within the broadcast interface.

​

data-enabled

Shows the current video enabled state, "true" when video is enabled and "false" when it is disabled.

​

data-visible

Reflects the visibility status of the indicator, with "true" meaning it’s currently visible based on the matcher or video state and "false" denoting it’s not visible.

This is often used for dynamically applying enter/exit CSS animations.