javascript媒体设备如何访问_怎样使用摄像头和麦克风【教程】

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 上可能被忽略，优先在真机调试。

拿到媒体流后怎么显示在页面上

流对象（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。