useDeviceList

A React Hook that returns a list of devices that are currently connected.

Demo

Grant permission to access the devices.

Source
Permission granted:
false
Devices:
No devices found

Usage

See API for more details.

Source

Click links below to view source on GitHub.

API

const device = useDeviceList(options)

Options

export type UseDeviceListOptions = {
  onUpdated?: (devices: MediaDeviceInfo[]) => void
  /**
   * Request for permissions immediately if it's not granted,
   * otherwise label and deviceIds could be empty
   *
   * @defaultValue false
   */
  requestPermissions?: boolean
  /**
   * Request for types of media permissions
   *
   * @defaultValue { audio: true, video: true }
   */
  constraints?: MediaStreamConstraints
}

Returns

export type UseDeviceListReturns = {
  /**
   * List of all devices
   */
  devices: MediaDeviceInfo[]
  /**
   * a getter to get all video inputs
   */
  videoInputs(): MediaDeviceInfo[]
  /**
   * a getter to get all audio inputs
   */
  audioInputs(): MediaDeviceInfo[]
  /**
   * a getter to get all audio outputs
   */
  audioOutputs(): MediaDeviceInfo[]
  /**
   * a boolean to check if permission is granted
   */
  isPermissionGranted: boolean
  /**
   * a function to check if the browser supports the API
   */
  isSupported: boolean
  /**
   * a function to request for permissions to access the media devices
   */
  ensurePermission(): Promise<boolean>
  /**
   * a function to update the list of devices
   */
  update(): Promise<void>
}