1---
2category: Sensors
3---
4 
5# useDevicesList
6 
7Reactive [enumerateDevices](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices) listing available input/output devices.
8 
9## Usage
10 
11```ts
12import { useDevicesList } from '@vueuse/core'
13 
14const {
15  devices,
16  videoInputs: cameras,
17  audioInputs: microphones,
18  audioOutputs: speakers,
19} = useDevicesList()
20```
21 
22## Requesting Permissions
23 
24To request permissions, use the `ensurePermissions` method.
25 
26```ts
27import { useDevicesList } from '@vueuse/core'
28// ---cut---
29const {
30  ensurePermissions,
31  permissionGranted,
32} = useDevicesList()
33 
34await ensurePermissions()
35console.log(permissionsGranted.value)
36```
37 
38# Component
39 
40```vue
41<template>
42  <UseDevicesList v-slot="{ videoInputs, audioInputs, audioOutputs }">
43    Cameras: {{ videoInputs }}
44    Microphones: {{ audioInputs }}
45    Speakers: {{ audioOutputs }}
46  </UseDevicesList>
47</template>
48```
49 
50## Type Declarations
51 
52```ts
53export interface UseDevicesListOptions extends ConfigurableNavigator {
54  onUpdated?: (devices: MediaDeviceInfo[]) => void
55  /**
56   * Request for permissions immediately if it's not granted,
57   * otherwise label and deviceIds could be empty
58   *
59   * @default false
60   */
61  requestPermissions?: boolean
62  /**
63   * Request for types of media permissions
64   *
65   * @default { audio: true, video: true }
66   */
67  constraints?: MediaStreamConstraints
68}
69export interface UseDevicesListReturn extends Supportable {
70  /**
71   * All devices
72   */
73  devices: Ref<MediaDeviceInfo[]>
74  videoInputs: ComputedRef<MediaDeviceInfo[]>
75  audioInputs: ComputedRef<MediaDeviceInfo[]>
76  audioOutputs: ComputedRef<MediaDeviceInfo[]>
77  permissionGranted: ShallowRef<boolean>
78  ensurePermissions: () => Promise<boolean>
79}
80/**
81 * Reactive `enumerateDevices` listing available input/output devices
82 *
83 * @see https://vueuse.org/useDevicesList
84 * @param options
85 */
86export declare function useDevicesList(
87  options?: UseDevicesListOptions,
88): UseDevicesListReturn
89```
90