useDevicesList

類別

感測器

導出大小

1.2 kB

最後變更

5 天前

相關

useUserMedia

反應式 enumerateDevices 列出可用的輸入/輸出設備。

範例

原始碼

攝影機 (0)

麥克風 (0)

喇叭 (0)

用法

import { useDevicesList } from '@vueuse/core'

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

請求權限

要請求權限，請使用 ensurePermissions 方法。

const {
  ensurePermissions,
  permissionGranted,
} = useDevicesList()

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

組件

vue

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

類型宣告

顯示類型宣告

typescript

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.dev.org.tw/useDevicesList
 * @param options
 */
export declare function useDevicesList(
  options?: UseDevicesListOptions,
): UseDevicesListReturn