useDevicesList

Reactively enumerates media input/output devices via the MediaDevices API. Provides filtered lists for video inputs (cameras), audio inputs (microphones), and audio outputs (speakers). Automatically updates when devices are connected or disconnected.

Demo

Devices List

Not Supported

Enumerates media devices. Grant permissions to see device labels.

Cameras

0

Microphones

0

Speakers

0

Request Permissions

Usage

Hook

import { useDevicesList } from "@usels/web";

function DevicesDisplay() {
  const {
    isSupported$,
    devices$,
    videoInputs$,
    audioInputs$,
    audioOutputs$,
    permissionGranted$,
    ensurePermissions,
  } = useDevicesList();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Total devices: {devices$.get().length}</p>
      <p>Cameras: {videoInputs$.get().length}</p>
      <p>Microphones: {audioInputs$.get().length}</p>
      <p>Speakers: {audioOutputs$.get().length}</p>
      {!permissionGranted$.get() && (
        <button onClick={() => ensurePermissions()}>Grant Permissions</button>
      )}
    </div>
  );
}

Scope

import { createDevicesList } from "@usels/web";

function DevicesDisplay() {
  "use scope"
  const {
    isSupported$,
    devices$,
    videoInputs$,
    audioInputs$,
    audioOutputs$,
    permissionGranted$,
    ensurePermissions,
  } = createDevicesList();

  return (
    <div>
      <p>Supported: {isSupported$.get() ? "Yes" : "No"}</p>
      <p>Total devices: {devices$.get().length}</p>
      <p>Cameras: {videoInputs$.get().length}</p>
      <p>Microphones: {audioInputs$.get().length}</p>
      <p>Speakers: {audioOutputs$.get().length}</p>
      {!permissionGranted$.get() && (
        <button onClick={() => ensurePermissions()}>Grant Permissions</button>
      )}
    </div>
  );
}

Requesting Permissions on Mount

// @noErrors
import { useDevicesList } from "@usels/web";

// Automatically request permissions when the component mounts
const { devices$ } = useDevicesList({ requestPermissions: true });

Reactive options

Options can be passed as plain values, per-field Observables, or a single Observable<UseDevicesListOptions>. Changes are picked up reactively.

import { observable } from "@usels/core";
import { useDevicesList } from "@usels/web";

const constraints$ = observable<MediaStreamConstraints>({ audio: true, video: true });

const { ensurePermissions } = useDevicesList({
  constraints: constraints$,
  onUpdated: (devices) => console.log("Updated:", devices.length),
});

// Later: update constraints reactively
constraints$.set({ audio: true, video: false });

Notes

options is DeepMaybeObservable. Each option field can be a plain value or an Observable. The onUpdated callback and constraints are read at call time, so changes take effect on the next ensurePermissions() or device change. requestPermissions is mount-time-only.

Type

Parameters

Parameter	Type	Description
options	UseDevicesListOptions (optional)	-

UseDevicesListOptions

Option	Type	Default	Description
requestPermissions	boolean	-	Request permissions on mount
constraints	MediaStreamConstraints	-	Constraints for getUserMedia when requesting permissions
onUpdated	((devices: MediaDeviceInfo[]) => void)	-	Callback when device list is updated

Returns

UseDevicesListReturn

Name	Type	Description
devices$	ReadonlyObservable<MediaDeviceInfo[]>	All enumerated media devices
videoInputs$	ReadonlyObservable<MediaDeviceInfo[]>	Video input devices (cameras)
audioInputs$	ReadonlyObservable<MediaDeviceInfo[]>	Audio input devices (microphones)
audioOutputs$	ReadonlyObservable<MediaDeviceInfo[]>	Audio output devices (speakers)
permissionGranted$	ReadonlyObservable<boolean>	Whether media permissions have been granted
ensurePermissions	() => Promise<boolean>	Request media device permissions
isSupported$	ReadonlyObservable<boolean>	-

Source

View on GitHub