User Screen Control

The UserScreenControl component provides a user interface for controlling screen sharing. It displays a preview of the shared screen and a toggle button to start/stop screen sharing. It automatically integrates with the Pipecat Client SDK.

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

<div className="w-64">
  <UserScreenControl />
</div>

UserScreenComponent

The UserScreenComponent is a headless variant that accepts all screen sharing state and callbacks as props. This allows you to use it with any framework or state management solution.

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

function Demo() {
  const [isEnabled, setIsEnabled] = React.useState(false);
  
  return (
    <UserScreenComponent
      isScreenEnabled={isEnabled}
      onClick={() => setIsEnabled(!isEnabled)}
      variant="outline"
      size="lg"
    />
  );
}

render(<Demo />);

Button States

The button automatically adapts based on screen sharing state:

• Active: When screen sharing is enabled, button shows active state
• Inactive: When screen sharing is disabled, button shows inactive state
• Loading: Shows loading spinner during screen share operations
• Disabled: Button is disabled when not connected to a session

Screen Preview

When noScreen is false:

• Shows a video preview of the shared screen when active
• Displays a placeholder when screen sharing is inactive
• Uses PipecatClientVideo component with trackType="screenVideo"

Integration

The connected UserScreenControl component uses:

• usePipecatConnectionState hook to check connection status
• PipecatClientScreenShareToggle component for screen share state management
• PipecatClientVideo component for screen preview

It must be used within a PipecatClientProvider context to function properly.

The component automatically disables the button when not connected to a session.