Hiyve Components - v1.0.0
    Preparing search index...

    Interface DevicePreviewProps

    Props for DevicePreview component

    interface DevicePreviewProps {
        audioDeviceId?: string;
        colors?: Partial<DevicePreviewColors>;
        defaultAudioProfile?: AudioProfile;
        defaultMicrophoneBoostDb?: number;
        height?: string | number;
        labels?: Partial<DevicePreviewLabels>;
        layout?: "stacked" | "side";
        onDeviceChange?: (devices: SelectedDevices) => void;
        onError?: (error: Error) => void;
        onMicrophoneBoostChange?: (db: number) => void;
        onReady?: () => void;
        persistSelection?: boolean | DevicePersistenceConfig;
        readyButtonLabel?: string;
        renderProps?: DevicePreviewRenderProps;
        selectorIcons?: Partial<DeviceSelectorIcons>;
        selectorLabels?: Partial<DeviceSelectorLabels>;
        showAdvanced?: boolean;
        showAudioLevel?: boolean;
        showAudioOutput?: boolean;
        showControls?: boolean;
        showMicrophoneBoost?: boolean;
        showRefreshButton?: boolean;
        showVideo?: boolean;
        styles?: Partial<DevicePreviewStyles>;
        sx?: SxProps<Theme>;
        videoDeviceId?: string;
        width?: string | number;
    }
    Index

    Properties

    audioDeviceId? colors? defaultAudioProfile? defaultMicrophoneBoostDb? height? labels? layout? onDeviceChange? onError? onMicrophoneBoostChange? onReady? persistSelection? readyButtonLabel? renderProps? selectorIcons? selectorLabels? showAdvanced? showAudioLevel? showAudioOutput? showControls? showMicrophoneBoost? showRefreshButton? showVideo? styles? sx? videoDeviceId? width?

    Properties

    audioDeviceId?: string

    Selected audio device ID

    colors?: Partial<DevicePreviewColors>

    Custom colors

    defaultAudioProfile?: AudioProfile

    The profile used for the preview's microphone and shown as selected when the user has not chosen one — pass the room's current profile.

    'voice'
    defaultMicrophoneBoostDb?: number

    The boost used by the meter and shown when none is remembered.

    0
    height?: string | number

    Height of the preview (default: 300)

    labels?: Partial<DevicePreviewLabels>

    Custom labels for i18n support

    layout?: "stacked" | "side"

    'stacked' (default): video, meter, then the controls, top to bottom. 'side': video + meter on the left, controls on the right — for wide, short containers, where a stacked preview with the Advanced section open would not fit. The video stretches to the controls' height (height is its minimum).

    'stacked'
    onDeviceChange?: (devices: SelectedDevices) => void

    Callback when devices change

    onError?: (error: Error) => void

    Callback when an error occurs during device enumeration or selection

    onMicrophoneBoostChange?: (db: number) => void

    Called with the boost in dB as the slider moves. The preview adjusts its meter's gain in place — the camera and microphone are not re-opened.

    onReady?: () => void

    Callback when user is ready to join

    persistSelection?: boolean | DevicePersistenceConfig

    Enable persistence of device selections across sessions. When enabled, selections are saved automatically and restored on mount.

    • Pass true to enable with default storage key ('hiyve-selected-devices')
    • Pass a config object to customize the storage key
    // Enable with defaults
    <DevicePreview persistSelection onReady={handleJoin} />

    // Custom storage key
    <DevicePreview
      persistSelection={{ storageKey: 'my-app-devices' }}
      onReady={handleJoin}
    />
    readyButtonLabel?: string

    Label for the ready button (default: 'Join') - deprecated, use labels.readyButton

    renderProps?: DevicePreviewRenderProps

    Render props for advanced customization

    selectorIcons?: Partial<DeviceSelectorIcons>

    Icons to pass to nested DeviceSelector

    selectorLabels?: Partial<DeviceSelectorLabels>

    Labels to pass to nested DeviceSelector

    showAdvanced?: boolean

    Show the selector's Advanced section (capture profile). The preview opens its own microphone with the chosen profile's constraints, so the level meter shows what the room will send.

    true
    showAudioLevel?: boolean

    Show audio level indicator (default: true)

    showAudioOutput?: boolean

    Show the audio output device selector.

    false (DevicePreview focuses on camera/mic, use DeviceSelector directly for full control)
    showControls?: boolean

    Show device selector controls (default: true)

    showMicrophoneBoost?: boolean

    Show the microphone boost slider (passed to DeviceSelector); the preview's meter reflects the boost.

    false
    showRefreshButton?: boolean

    Show the refresh button to re-enumerate devices.

    true
    showVideo?: boolean

    Show video preview (default: true)

    styles?: Partial<DevicePreviewStyles>

    Custom styles

    sx?: SxProps<Theme>

    MUI sx styling prop

    videoDeviceId?: string

    Selected video device ID

    width?: string | number

    Width of the preview (default: 400)

    Settings

    Member Visibility

    On This Page

    Properties