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

    Interface DeviceSelectorProps

    Props for the DeviceSelector component.

    DeviceSelector provides dropdown menus to select camera, microphone, and speaker devices. It supports both the Hiyve MediaDeviceManager and direct browser APIs.

    Features:

    • Lists all available media devices
    • Separate selectors for video, audio input, and audio output
    • Automatic device enumeration on mount and change
    • Compact and full display modes
    • Horizontal and vertical orientations

    Basic usage:

    import { DeviceSelector, SelectedDevices } from '@hiyve/react-ui';

    function DeviceSettings() {
      const [devices, setDevices] = useState<SelectedDevices>({});

      return (
        <DeviceSelector
          selectedDevices={devices}
          onDeviceChange={setDevices}
        />
      );
    }

    With MediaDeviceManager:

    <DeviceSelector
      mediaDeviceManager={client.getMediaDeviceManager()}
      selectedDevices={devices}
      onDeviceChange={setDevices}
      showAudioOutput={false}
      orientation="horizontal"
      compact
    />
    interface DeviceSelectorProps {
        compact?: boolean;
        defaultAudioProfile?: AudioProfile;
        defaultMicrophoneBoostDb?: number;
        disabled?: boolean;
        icons?: Partial<DeviceSelectorIcons>;
        labels?: Partial<DeviceSelectorLabels>;
        onDeviceChange: (devices: SelectedDevices) => void;
        onError?: (error: Error) => void;
        onMicrophoneBoostChange?: (db: number) => void;
        orientation?: "vertical" | "horizontal";
        persistSelection?: boolean | DevicePersistenceConfig;
        selectedDevices?: SelectedDevices;
        showAdvanced?: boolean;
        showAudioInput?: boolean;
        showAudioOutput?: boolean;
        showMicrophoneBoost?: boolean;
        showRefreshButton?: boolean;
        showVideo?: boolean;
        sx?: SxProps<Theme>;
    }
    Index

    Properties

    compact? defaultAudioProfile? defaultMicrophoneBoostDb? disabled? icons? labels? onDeviceChange onError? onMicrophoneBoostChange? orientation? persistSelection? selectedDevices? showAdvanced? showAudioInput? showAudioOutput? showMicrophoneBoost? showRefreshButton? showVideo? sx?

    Properties

    compact?: boolean

    Use compact mode with smaller controls (default: false)

    defaultAudioProfile?: AudioProfile

    The profile shown as selected when the user has not chosen one — pass the room's current profile so the Advanced section reflects it.

    'voice'
    defaultMicrophoneBoostDb?: number

    The boost shown when none is remembered — pass the room's current value.

    0
    disabled?: boolean

    Disable all selectors

    icons?: Partial<DeviceSelectorIcons>

    Custom icons

    labels?: Partial<DeviceSelectorLabels>

    Custom labels for i18n support

    onDeviceChange: (devices: SelectedDevices) => void

    Callback when device selection changes

    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. A gain change, not a device change: adjust a gain node in place, never re-open the microphone.

    orientation?: "vertical" | "horizontal"

    Orientation of the selectors (default: 'vertical')

    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
    <DeviceSelector persistSelection onDeviceChange={setDevices} />

    // Custom storage key
    <DeviceSelector
      persistSelection={{ storageKey: 'my-app-devices' }}
      onDeviceChange={setDevices}
    />
    selectedDevices?: SelectedDevices

    Currently selected devices

    showAdvanced?: boolean

    Show the collapsed Advanced section under the microphone, where the user chooses how it is captured (selectedDevices.audioProfile). Reported through onDeviceChange and persisted like a device.

    true
    showAudioInput?: boolean

    Show audio input selector (default: true)

    showAudioOutput?: boolean

    Show audio output selector (default: true)

    showMicrophoneBoost?: boolean

    Show the microphone boost slider in the Advanced section. Only useful when the app enables the boost stage on the room. Changes are persisted with the devices and reported through onMicrophoneBoostChange, never onDeviceChange.

    false
    showRefreshButton?: boolean

    Show the refresh button to re-enumerate devices. Useful when devices are connected/disconnected and the list needs updating. Clears the MediaDeviceManager cache and re-enumerates all devices.

    true
    showVideo?: boolean

    Show video input selector (default: true)

    sx?: SxProps<Theme>

    MUI sx styling prop

    Settings

    Member Visibility

    On This Page

    Properties