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

---

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

keywords:

• enumerateDevices
• devicechange
• 权限策略
• 设备选择
• 安全上下文

description: 使用 MediaDevices 枚举音视频设备并监听变更事件，结合权限与 UI 策略实现稳定的设备选择与会话管理。

categories:

• 文章资讯
• 技术教程

---

概述

navigator.mediaDevices.enumerateDevices() 返回输入/输出设备列表。devicechange 事件在设备插拔或权限变化时触发，适合更新选择 UI 与会话。

用法/示例

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