MediaDevices 枚举与设备切换：enumerateDevices 与约束

---

title: MediaDevices 枚举与设备切换：enumerateDevices 与约束

keywords:

• enumerateDevices
• mediaDevices
• deviceId
• constraints
• 权限

description: 说明媒体设备的枚举与选择，使用 enumerateDevices 与约束切换摄像头/麦克风，处理权限与标签可见性，提供示例与兼容建议。

categories:

• 文章资讯
• 技术教程

---

概述

navigator.mediaDevices.enumerateDevices() 返回可用的输入输出设备列表；结合约束（deviceId/groupId）可切换设备。需在权限授予后才能获取完整标签与设备信息。

示例

const devices = await navigator.mediaDevices.enumerateDevices()
const cams = devices.filter(d => d.kind === 'videoinput')
const stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId: { exact: cams[0].deviceId } } })

工程建议

• 权限与隐私：在用户手势后请求权限；仅显示必要信息；处理设备变更事件。
• UX：提供设备列表与切换反馈；在不可用或断开时回退到默认设备。
• 兼容：在不支持环境禁用相关功能或提示安装驱动。

参考与验证

• MDN MediaDevices 文档：https://developer.mozilla.org/docs/Web/API/MediaDevices
• W3C 媒体捕获规范：https://www.w3.org/TR/mediacapture-streams/