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;
        disabled?: boolean;
        icons?: Partial<DeviceSelectorIcons>;
        labels?: Partial<DeviceSelectorLabels>;
        onDeviceChange: (devices: SelectedDevices) => void;
        onError?: (error: Error) => void;
        orientation?: "horizontal" | "vertical";
        persistSelection?: boolean | DevicePersistenceConfig;
        selectedDevices?: SelectedDevices;
        showAudioInput?: boolean;
        showAudioOutput?: boolean;
        showRefreshButton?: boolean;
        showVideo?: boolean;
        sx?: SxProps<Theme>;
    }
    Index

    Properties

    compact? disabled? icons? labels? onDeviceChange onError? orientation? persistSelection? selectedDevices? showAudioInput? showAudioOutput? showRefreshButton? showVideo? sx?

    Properties

    compact?: boolean

    Use compact mode with smaller controls (default: false)

    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

    orientation?: "horizontal" | "vertical"

    Orientation of the selectors (default: 'vertical')

    persistSelection?: boolean | DevicePersistenceConfig

    Enable persistence of device selections to localStorage. 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

    showAudioInput?: boolean

    Show audio input selector (default: true)

    showAudioOutput?: boolean

    Show audio output selector (default: true)

    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