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

    Function DeviceSelector

    • DeviceSelector provides dropdown menus for selecting media devices.

      Parameters

      Returns ReactElement

      The rendered DeviceSelector component

      Use DeviceSelector when you need device selection dropdowns only - for example, in a settings panel or preferences dialog. It does NOT include video preview or audio level monitoring.

      When to use DeviceSelector vs DevicePreview:

      • Use DeviceSelector for settings panels where users change devices mid-call
      • Use DevicePreview for pre-join lobbies where users test camera/mic before joining

      Key Features:

      • Camera, microphone, and speaker dropdown selectors
      • Test audio button (plays 440Hz tone through selected speaker)
      • Refresh button to re-enumerate devices
      • Compact and full display modes
      • Horizontal and vertical orientations
      • Automatic device change detection (connect/disconnect)
      • LocalStorage persistence for device selections
      • Full i18n support via labels prop

      Internal Device Management: The component internally creates and manages its own MediaDeviceManager and MediaDeviceTester instances. You don't need to provide these - just use the component.

      Basic usage in a settings panel:

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

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

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

      Compact horizontal layout:

      <DeviceSelector
        selectedDevices={devices}
        onDeviceChange={setDevices}
        orientation="horizontal"
        compact
        showAudioOutput={false}
      />

      With custom labels for internationalization:

      const germanLabels = {
        camera: 'Kamera',
        microphone: 'Mikrofon',
        speaker: 'Lautsprecher',
        testAudio: 'Audio testen',
        refreshDevices: 'Geräte aktualisieren',
      };

      <DeviceSelector
        selectedDevices={devices}
        onDeviceChange={setDevices}
        labels={germanLabels}
      />

    Settings

    Member Visibility