MediaDevices enumerateDevices：设备枚举与变更监听

--- title: MediaDevices enumerateDevices：设备枚举与变更监听 keywords: - enumerateDevices - devicechange - 权限策略 - 设备选择 - 安全上下文 description: 使用 MediaDevices 枚举音视频设备并监听变更事件，结合权限与 UI 策略实现稳定的设备选择与会话管理。 categories: - 文章资讯 - 技术教程 --- ## 概述 `navigator.mediaDevices.enumerateDevices()` 返回输入/输出设备列表。`devicechange` 事件在设备插拔或权限变化时触发，适合更新选择 UI 与会话。 ## 用法/示例 ```js const list = await navigator.mediaDevices.enumerateDevices() const cams = list.filter(d => d.kind === 'videoinput') const mics = list.filter(d => d.kind === 'audioinput') navigator.mediaDevices.addEventListener('devicechange', async () => { // 设备变更时刷新列表与当前会话 }) ``` ## 工程建议 - 在安全上下文中运行并请求必要权限；对“匿名设备标签”在未授权时做 UI 提示。 - 缓存用户选择并在变更后尝试自动恢复；提供明确切换入口。 - 与 `setSinkId`（如可用）协作选择音频输出设备。 ## 参考与验证 - MDN：MediaDevices — https://developer.mozilla.org/docs/Web/API/MediaDevices - web.dev：Media devices — https://web.dev/articles/audio-devices