Guide
Reference
Roadmap
Guide
Reference
Roadmap

useDeviceList

Tags:
Browser
isSupported

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.

🪝 Hook🎨 Demo📄 Document

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> }