useDevicesList

Category

Sensors

Export Size

921 B

Last Changed

5 days ago

Related

useUserMedia

Reactive enumerateDevices listing available input/output devices

Demo

Usage

import { useDevicesList } from '@reause/core'

const {
  devices,
  videoInputs: cameras,
  audioInputs: microphones,
  audioOutputs: speakers,
} = useDevicesList()

Requesting Permissions

To request permissions, use the ensurePermissions method.

import { useDevicesList } from '@reause/core'

const {
  ensurePermissions,
  permissionGranted,
} = useDevicesList()

await ensurePermissions()
console.log(permissionGranted)

Call it from an event handler or an effect — never from render:

function Component() {
  const { ensurePermissions, permissionGranted } = useDevicesList()

  return (
    <button type="button" onClick={() => void ensurePermissions()}>
      {permissionGranted ? 'Granted' : 'Request permissions'}
    </button>
  )
}

Type Declarations

export interface UseDevicesListOptions extends ConfigurableNavigator {
    onUpdated?: (devices: MediaDeviceInfo[]) => void;
    requestPermissions?: boolean;
    constraints?: MediaStreamConstraints;
}

export interface UseDevicesListReturn {
    devices: MediaDeviceInfo[];
    videoInputs: MediaDeviceInfo[];
    audioInputs: MediaDeviceInfo[];
    audioOutputs: MediaDeviceInfo[];
    isSupported: boolean;
    permissionGranted: boolean;
    ensurePermissions: () => Promise<boolean>;
    onUpdated: (fn: (devices: MediaDeviceInfo[]) => void) => () => void;
}

export interface ConfigurableNavigator {
    navigator?: Navigator;
}

export interface UseUserMediaOptions extends ConfigurableNavigator {
    enabled?: boolean;
    autoSwitch?: boolean;
    constraints?: MediaStreamConstraints;
}

export function useDevicesList(options?: UseDevicesListOptions): UseDevicesListReturn

Source

Source · Demo · VueUse

Contributors

Changelog

v0.1.7 on

534c2 - refactor(shared)!: return the off function from listener registrars

v0.1.0 on

e8ff9 - fix(core): resolve useDevicesList audit findings (#542)