useDevicesList

利用可能な入出力デバイスをリストするリアクティブな enumerateDevices。

使用法

import { useDevicesList } from '@vueuse/core'

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

権限の要求

権限を要求するには、ensurePermissions メソッドを使用します。

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

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

コンポーネント

<template>
  <UseDevicesList v-slot="{ videoInputs, audioInputs, audioOutputs }">
    カメラ: {{ videoInputs }}
    マイク: {{ audioInputs }}
    スピーカー: {{ audioOutputs }}
  </UseDevicesList>
</template>