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 { UserVideoControl } from "@pipecat-ai/voice-ui-kit";

<UserVideoControl
  isCamEnabled={true}
/>

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 />);

Integration

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

• usePipecatClientMediaDevices for device management
• useMediaState for loading and error states
• 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 and error states based on device availability
• Keep the device picker accessible across connect/disconnect cycles once camera permission is granted
• 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 device initialization
• Unavailable: Shows disabled state with specific error messages (e.g., "Camera blocked", "Camera in use", "No camera")
• Disabled: Shows disabled state when video is deliberately disabled via noVideo

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