可通过 mediadevices.enumeratedevices() 获取音视频设备列表，但须在 https 或 localhost 安全上下文中调用；需先调用 getusermedia 获取权限才能获得带 label 的完整设备信息；返回 promise，解析得含 deviceid、kind、label 等字段的 mediadeviceinfo 数组；可监听 devicechange 事件动态更新设备列表。
可以通过 MediaDevices.enumerateDevices() 方法获取系统中所有可用的音视频输入输出设备列表，但需注意权限和调用时机。
必须在安全上下文中调用
该 API 只能在 HTTPS 协议或 localhost 环境下使用。HTTP 页面会直接抛出 SecurityError 异常。
- 开发时可用
http://localhost:8080测试 - 线上部署务必使用 HTTPS
- 不能在页面未交互（如自动加载）时直接调用——部分浏览器会拒绝无用户手势触发的设备枚举
需先获取媒体权限才能看到真实设备信息
调用 enumerateDevices() 前，建议先请求一次媒体流（哪怕只是空约束），否则多数浏览器只返回空标签（label: ""）或仅显示设备类型，无法识别具体名称。
- 执行
navigator.mediaDevices.getUserMedia({ audio: true, video: true })（可设{ audio: false, video: false }仅占位） - 权限授予后，再调用
enumerateDevices()才能获得带 label 的完整设备列表 - 若用户拒绝权限，
enumerateDevices()仍可返回设备 ID 和 kind，但 label 为空
正确调用并解析设备列表
返回的是 Promise，解析后得到 MediaDeviceInfo 对象数组，每个对象含 deviceId、kind（"audioinput" / "audiooutput" / "videoinput"）、label 和 groupId。
navigator.mediaDevices.enumerateDevices()
.then(devices => {
devices.forEach(device => {
console.log(`${device.kind}: ${device.label || '(no label)'}`, device.deviceId);
});
})
.catch(err => console.error('enumerateDevices error:', err));
-
kind === "audioinput"：麦克风 -
kind === "videoinput"：摄像头 -
kind === "audiooutput"：扬声器（部分浏览器如 Safari 旧版不支持此类型枚举） -
deviceId是后续getUserMedia指定设备的关键参数
监听设备插拔动态更新（可选增强）
设备增减（如插入耳机、拔掉摄像头）不会自动触发刷新，需监听 devicechange 事件手动重载：
navigator.mediaDevices.addEventListener('devicechange', () => {
console.log('设备列表可能已变化');
// 重新调用 enumerateDevices() 获取最新状态
});
- 该事件不携带设备详情，仅作通知用途
- 需再次调用
enumerateDevices()并比对前后结果来判断新增/移除 - 注意避免重复绑定，建议在组件卸载或页面隐藏时移除监听
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
