上手指南
Hooks 列表
后期规划
上手指南
Hooks 列表
后期规划
简体中文

useDeviceList

Tags:
Browser
isSupported

一个返回当前连接的设备列表的 React 钩子。

演示

授予访问设备的权限。

源码
Permission granted:
false
Devices:
No devices found

用法

请查看 API。

源码

点击下方链接跳转 GitHub 查看源代码。

🪝 Hook🎨 Demo📄 Document

API

const device = useDeviceList(options)

选项 Options

export type UseDeviceListOptions = { onUpdated?: (devices: MediaDeviceInfo[]) => void /** * 如未获得权限，则立即请求权限， * 否则标签和 deviceIds 可能为空 * * @defaultValue false */ requestPermissions?: boolean /** * 请求媒体权限的类型 * * @defaultValue { audio: true, video: true } */ constraints?: MediaStreamConstraints }

返回值

export type UseDeviceListReturns = { /** * 所有设备的列表 */ devices: MediaDeviceInfo[] /** * 获取所有视频输入的 getter */ videoInputs(): MediaDeviceInfo[] /** * 获取所有音频输入的 getter */ audioInputs(): MediaDeviceInfo[] /** * 获取所有音频输出的 getter */ audioOutputs(): MediaDeviceInfo[] /** * 检查是否已授予权限的布尔值 */ isPermissionGranted: boolean /** * 检查浏览器是否支持 API 的函数 */ isSupported: boolean /** * 请求访问媒体设备的权限的函数 */ ensurePermission(): Promise<boolean> /** * 更新设备列表的函数 */ update(): Promise<void> }