Component

Pre-Call Lobby

A device-check panel displayed before joining a video meeting. Shows a camera preview, microphone level meter, optional device selectors for camera / mic / speaker, toggle controls, and a primary join CTA.

Basic

Camera on, mic on. Toggle each device with the icon buttons below the preview. Click Join to proceed.

Camera is off

Mic

Camera off

When cameraOn is false, the preview area shows an avatar placeholder instead of the camera feed.

Camera is off

Mic

With device pickers

Pass cameras, microphones, and speakers arrays to show device selectors. Use onDeviceChange to handle switching.

Camera is off

Mic

Camera

Microphone

Speaker

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { PreCallLobby } from '@refraction-ui/react'

export function MeetingPreflight() {
  const [cameraOn, setCameraOn] = React.useState(true)
  const [micOn, setMicOn] = React.useState(true)

  return (
    <PreCallLobby
      cameraOn={cameraOn}
      micOn={micOn}
      onToggleCamera={() => setCameraOn(v => !v)}
      onToggleMic={() => setMicOn(v => !v)}
      micLevel={0.4}
      joinLabel="Join meeting"
      onJoin={() => router.push('/meeting')}
    />
  )
}

Props

Prop	Type	Default	Description
`cameraOn`	`boolean`	--	Whether the camera is currently enabled.
`micOn`	`boolean`	--	Whether the microphone is currently enabled.
`onToggleCamera`	`() => void`	--	Called when the user clicks the camera toggle button.
`onToggleMic`	`() => void`	--	Called when the user clicks the microphone toggle button.
`micLevel`	`number`	`0`	Current microphone input level in the range [0, 1]. Drives the mic level meter.
`cameras`	`MediaDeviceOption[]`	`[]`	List of available cameras `{ id, label }`. Renders a camera select when non-empty.
`microphones`	`MediaDeviceOption[]`	`[]`	List of available microphones. Renders a mic select when non-empty.
`speakers`	`MediaDeviceOption[]`	`[]`	List of available speakers. Renders a speaker select when non-empty.
`selectedCamera`	`string`	--	Controlled value for the camera select.
`selectedMicrophone`	`string`	--	Controlled value for the microphone select.
`selectedSpeaker`	`string`	--	Controlled value for the speaker select.
`onDeviceChange`	`(kind: 'camera' \| 'microphone' \| 'speaker', deviceId: string) => void`	--	Called when the user picks a different device from any selector.
`previewSlot`	`React.ReactNode`	--	Node rendered inside the camera preview area when cameraOn is true (e.g. a <video> element).
`joinLabel`	`string`	`'Join'`	Label text for the join button.
`onJoin`	`() => void`	--	Called when the user clicks the join button.
`className`	`string`	--	Additional CSS classes to apply to the lobby card.