navigator.mediaDevices.getUserMedia()调用需HTTPS（localhost除外）、用户授权、正确Promise处理；参数为{video: true}等对象；流需赋给video.srcObject并加autoplay；设备变更需监听devicechange事件。
浏览器里调用摄像头和麦克风，核心就靠 navigator.mediaDevices.getUserMedia()，但它不是“一调就通”，权限、设备状态、HTTPS 环境、Promise 拒绝逻辑都得对上，否则白写。
为什么 getUserMedia() 直接报错或静默失败
最常见原因是当前页面没走 HTTPS（本地 localhost 除外），或者用户点了“拒绝”后没重试逻辑。Chrome/Firefox 在非安全上下文里会直接拒绝 Promise，连权限弹窗都不出现。
- 检查地址栏：必须是
https://或http://localhost（127.0.0.1不行） - 确保没在 iframe 里调用且该 iframe 没加
allow="camera;microphone"属性 - 如果之前拒绝过，浏览器不会再次弹窗，需手动进设置里重置站点权限（Chrome 地址栏右侧锁图标 → “网站设置” → 权限项）
-
getUserMedia()返回的是 Promise，一定要用.catch()捕获拒绝，不能只写.then()
怎样只开摄像头、只开麦克风、或两者都开
参数是对象，键名固定为 video 和 audio，值为布尔或配置对象。布尔值最简，但实际项目中常要控制分辨率、帧率、是否强制前置摄像头等。
- 仅摄像头：
{ video: true } - 仅麦克风：
{ audio: true } - 两者都开：
{ video: true, audio: true } - 指定前置摄像头（移动端常用）：
{ video: { facingMode: "user" } } - 限制分辨率：
{ video: { width: { ideal: 1280 }, height: { ideal: 720 } } } - 禁用音频回声消除（某些耳机场景需要）：
{ audio: { echoCancellation: false } }
注意：部分约束（如 facingMode）在桌面 Chrome 上可能被忽略，优先在真机调试。
立即学习“Java免费学习笔记（深入）”；
拿到媒体流后怎么显示在页面上
流对象（MediaStream）本身不可见，必须绑定到 元素的 srcObject 属性才能播放。别用已废弃的 createObjectURL()。
const video = document.getElementById('myVideo');
navigator.mediaDevices.getUserMedia({ video: true })
.then(stream => {
video.srcObject = stream; // 关键：直接赋值流对象
})
.catch(err => console.error('访问失败:', err.name)); // err.name 可能是 "NotAllowedError" 或 "NotFoundError"
-
video元素需加autoplay属性，否则即使有流也不会自动播放 - 移动端 Safari 要求用户手势触发（比如点击按钮后才调用
getUserMedia），否则静音且不播 - 流对象可多次复用，但关闭时应调用
stream.getTracks().forEach(t => t.stop())，避免后台持续采集
如何检测设备列表变化（插拔摄像头/麦克风）
用户热插拔设备时，页面默认不会感知。需监听 navigator.mediaDevices 的 devicechange 事件，并主动重新枚举设备。
- 首次加载后立即调用
navigator.mediaDevices.enumerateDevices()获取初始设备列表 - 监听事件：
navigator.mediaDevices.addEventListener('devicechange', () => { /* 再次 enumerateDevices */ }) - 注意：该事件在 Firefox 中需用户已授予权限后才触发；Safari 17+ 才支持
- 枚举返回的每个
MediaDeviceInfo对象含deviceId、kind（"videoinput"/"audioinput"）、label（可能为空，需先获权才填充）
设备 label 为空是常态，别依赖它做 UI 显示；真正切换设备时，应重新调用 getUserMedia() 并传入目标 deviceId。
