---
category: Sensors
---

# useDevicesList

Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices.

## Usage

```ts
import { useDevicesList } from '@vueuse/core';

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

## Requesting Permissions

To request permissions, use the `ensurePermissions` method.

```ts
import { useDevicesList } from '@vueuse/core';
// ---cut---
const { ensurePermissions, permissionGranted } = useDevicesList();

await ensurePermissions();
console.log(permissionsGranted.value);
```

# Component

```vue
<template>
  <UseDevicesList v-slot="{ videoInputs, audioInputs, audioOutputs }">
    Cameras: {{ videoInputs }} Microphones: {{ audioInputs }} Speakers: {{ audioOutputs }}
  </UseDevicesList>
</template>
```

## Type Declarations

```ts
export interface UseDevicesListOptions extends ConfigurableNavigator {
  onUpdated?: (devices: MediaDeviceInfo[]) => void;
  /**
   * Request for permissions immediately if it's not granted,
   * otherwise label and deviceIds could be empty
   *
   * @default false
   */
  requestPermissions?: boolean;
  /**
   * Request for types of media permissions
   *
   * @default { audio: true, video: true }
   */
  constraints?: MediaStreamConstraints;
}
export interface UseDevicesListReturn {
  /**
   * All devices
   */
  devices: Ref<MediaDeviceInfo[]>;
  videoInputs: ComputedRef<MediaDeviceInfo[]>;
  audioInputs: ComputedRef<MediaDeviceInfo[]>;
  audioOutputs: ComputedRef<MediaDeviceInfo[]>;
  permissionGranted: ShallowRef<boolean>;
  ensurePermissions: () => Promise<boolean>;
  isSupported: ComputedRef<boolean>;
}
/**
 * Reactive `enumerateDevices` listing available input/output devices
 *
 * @see https://vueuse.org/useDevicesList
 * @param options
 */
export declare function useDevicesList(options?: UseDevicesListOptions): UseDevicesListReturn;
```
