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

--- title: MediaDevices 枚举与设备切换：enumerateDevices 与约束 keywords: - enumerateDevices - mediaDevices - deviceId - constraints - 权限 description: 说明媒体设备的枚举与选择，使用 `enumerateDevices` 与约束切换摄像头/麦克风，处理权限与标签可见性，提供示例与兼容建议。 categories: - 文章资讯 - 技术教程 --- 概述 `navigator.mediaDevices.enumerateDevices()` 返回可用的输入输出设备列表；结合约束（`deviceId`/`groupId`）可切换设备。需在权限授予后才能获取完整标签与设备信息。 示例 ```js 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/