User Video Control

The UserVideoControl component provides a comprehensive camera control interface that includes camera toggle functionality, device selection, and optional video preview. It integrates with the Pipecat Client SDK to automatically manage camera state and device selection.

import { UserVideoComponent } from "@pipecat-ai/voice-ui-kit";

<UserVideoComponent
  onClick={() => console.log("Toggle camera")}
  availableCams={[
    {deviceId: "cam1", label: "Built-in Camera"},
    {deviceId: "cam2", label: "External USB Camera"},
  ]}
  selectedCam={{deviceId: "cam1", label: "Built-in Camera"}}
  updateCam={(deviceId) => console.log("Selected:", deviceId)}
  isCamEnabled={true}
/>

Component Variants

UserVideoControl

The UserVideoControl component is the connected variant that automatically integrates with the Pipecat Client SDK. It must be used within a PipecatClientProvider context.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl />

UserVideoComponent

The UserVideoComponent is the headless variant that accepts all camera state and callbacks as props. This allows you to use it with any framework or state management solution.

import { UserVideoComponent } from "@pipecat-ai/voice-ui-kit";

// Example with mock data
const mockCams = [
  { deviceId: "cam1", label: "Built-in Camera" },
  { deviceId: "cam2", label: "External USB Camera" },
];

function Demo() {
  const [isCamEnabled, setIsCamEnabled] = React.useState(false);
  const [selectedCam, setSelectedCam] = React.useState(mockCams[0]);

  return (
    <UserVideoComponent
      isCamEnabled={isCamEnabled}
      onClick={() => setIsCamEnabled(!isCamEnabled)}
      availableCams={mockCams}
      selectedCam={selectedCam}
      updateCam={(deviceId) => {
        const cam = mockCams.find(c => c.deviceId === deviceId);
        if (cam) setSelectedCam(cam);
      }}
      activeText="Camera is on"
      inactiveText="Click to start"
    />
  );
}

render(<Demo />);

Usage Examples

Basic Usage

The UserVideoControl component automatically manages camera state and device selection.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl />

Custom Text Labels

You can customize the text displayed when the camera is active or inactive.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl
  activeText="Camera is on"
  inactiveText="Click to start camera"
/>

Different Variants

The component supports different visual variants to match your design system.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<div className="flex gap-4">
  <UserVideoControl variant="primary" />
  <UserVideoControl variant="outline" />
  <UserVideoControl variant="ghost" />
</div>

Different Sizes

You can use different sizes for the video control.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<div className="flex gap-4 items-center">
  <UserVideoControl size="sm" />
  <UserVideoControl size="md" />
  <UserVideoControl size="lg" />
  <UserVideoControl size="xl" />
</div>

Without Device Picker

Hide the device selection dropdown for a simpler interface.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl noDevicePicker />

Without Video Preview

Hide the video element for a minimal camera button.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl noVideo />

Disabled Video State

Show a disabled state when video functionality is not available.

import { UserVideoComponent } from "@pipecat-ai/voice-ui-kit";

function Demo() {
  return (
    <UserVideoComponent
      noVideo={true}
      noVideoText="Camera not available"
      isCamEnabled={false}
      onClick={() => {}}
    />
  );
}

render(<Demo />);

Custom Video Configuration

Customize the video element appearance and behavior.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl
  videoProps={{
    className: "border-2 border-primary",
    style: { borderRadius: "8px" }
  }}
/>

Custom Device Dropdown Configuration

Customize the device dropdown behavior and appearance.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl
  deviceDropDownProps={{
    menuLabel: "Select Camera",
    placeholder: "Choose a camera...",
  }}
/>

Custom Styling

Apply custom CSS classes to different parts of the component.

import { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl
  classNames={{
    container: "border-2 border-primary",
    button: "bg-primary text-white",
    videoOffContainer: "bg-muted/50",
    activeText: "font-bold text-green-600",
    inactiveText: "text-gray-500",
  }}
/>

Features

• Camera Toggle: Click to enable/disable camera input
• Device Selection: Built-in dropdown for selecting different camera devices
• Video Preview: Optional real-time video preview display
• Loading States: Automatic loading indicators during connection setup
• Accessible: Includes proper ARIA labels and keyboard navigation
• Responsive: Adapts to different screen sizes and container widths
• Theme Support: Integrates with the Voice UI Kit theming system
• Flexible: Available in both connected and headless variants

Integration

The connected UserVideoControl component uses several hooks from the Pipecat Client React SDK:

• usePipecatClientMediaDevices for device management
• usePipecatClientTransportState for connection state
• PipecatClientCamToggle for camera control

This means it must be used within a PipecatClientProvider context to function properly.

The component will automatically:

• Fetch available camera devices
• Display the currently selected camera
• Handle device selection changes
• Manage camera enable/disable state
• Show appropriate loading states during connection setup
• Update the Pipecat Client's camera configuration

Visual States

The component displays different visual states based on the camera status:

• Inactive: Shows camera off icon with inactive styling and placeholder text
• Active: Shows camera on icon with active styling and video preview
• Loading: Shows loading spinner during connection setup
• Disabled: Shows disabled state when video is not available

Device Management

The component includes a dropdown menu for device selection that:

• Lists all available camera devices
• Shows the currently selected device
• Allows switching between devices
• Can be hidden with the noDevicePicker prop
• Integrates with the DeviceDropDown component

Video Preview

The component can display a live video preview when the camera is enabled:

• Shows the local camera feed using PipecatClientVideo
• Automatically adjusts container size based on camera state
• Can be hidden with the noVideo prop
• Supports custom styling through videoProps
• Displays placeholder text when camera is off or disabled