Component props
The rendered DevicePreview component
Use DevicePreview when you need a complete pre-join lobby experience - showing users their camera feed and microphone level before they join a meeting. It includes built-in device selection dropdowns and an optional "Join" button.
When to use DevicePreview vs DeviceSelector:
Key Features:
Audio Level Indicator: The audio level meter changes color based on volume:
Internal Device Management: The component internally creates and manages its own MediaDeviceManager. You don't need to provide one - just use the component.
Resource Management: Media streams are properly cleaned up when:
Basic pre-join lobby:
import { DevicePreview, SelectedDevices } from '@hiyve/react-ui';
function PreJoinLobby() {
const [devices, setDevices] = useState<SelectedDevices>({});
const handleJoin = () => {
// devices.videoInput and devices.audioInput contain selected device IDs
joinRoom(devices);
};
return (
<DevicePreview
onDeviceChange={setDevices}
onReady={handleJoin}
showAudioOutput
persistSelection
/>
);
}
In a dialog (like App.tsx example):
<Dialog open={showPreview} onClose={() => setShowPreview(false)}>
<DialogTitle>Test Camera & Microphone</DialogTitle>
<DialogContent>
<DevicePreview
onDeviceChange={setDevices}
width="100%"
height={300}
showAudioOutput
persistSelection
/>
</DialogContent>
</Dialog>
With custom styling and labels:
<DevicePreview
labels={{
microphoneLevelLabel: 'Mic Level',
readyButton: 'Join Meeting',
errorMessage: 'Camera access denied',
}}
colors={{
videoBackground: '#1a1a1a',
progressBarLow: '#22c55e',
progressBarMedium: '#eab308',
progressBarHigh: '#ef4444',
}}
onReady={handleJoin}
/>
With render props for custom audio level display:
<DevicePreview
renderProps={{
renderAudioLevel: (level, defaultContent) => (
<Box>
{defaultContent}
<Typography variant="caption">
Level: {level.toFixed(0)}%
</Typography>
</Box>
),
}}
onReady={handleJoin}
/>
DevicePreview provides a full pre-join screen for testing camera and microphone.