useDevicesList

类别

Sensors

导出体积

1.34 kB

上次更改

3 months ago

示例

源码 playground (beta)

相机 (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
 }">
    摄像头：{{ videoInputs
 }}
    麦克风：{{ audioInputs
 }}
    扬声器：{{ audioOutputs
 }}
  </UseDevicesList>
</template>

类型声明

export interface UseDevicesListOptions extends ConfigurableNavigator {
  onUpdated
?: (devices
: MediaDeviceInfo[]) => void
  /**
   * 如果权限未授予，则立即请求权限，否则标签和设备 ID 可能为空
   *
   * @default false
   */
  requestPermissions
?: boolean
  /**
   * 请求媒体权限类型
   *
   * @default { audio: true, video: true }
   */
  constraints
?: MediaStreamConstraints
}
export interface UseDevicesListReturn {
  /**
   * 所有设备
   */
  devices
: Ref
<MediaDeviceInfo[]>
  videoInputs
: ComputedRef
<MediaDeviceInfo[]>
  audioInputs
: ComputedRef
<MediaDeviceInfo[]>
  audioOutputs
: ComputedRef
<MediaDeviceInfo[]>
  permissionGranted
: ShallowRef
<boolean>
  ensurePermissions
: () => Promise
<boolean>
  isSupported
: ComputedRef
<boolean>
}
/**
 * 响应式 `enumerateDevices` 列出可用的输入/输出设备
 *
 * @see https://vueuse.org/useDevicesList
 * @param options
 */
export declare function useDevicesList
(
  options
?: UseDevicesListOptions,
): UseDevicesListReturn