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。

# javascript # java # idea # 浏览器 # safari # stream # 耳机 # 为什么 # firefox # chrome # foreach # catch # 对象 # 事件 # promise # kind # http # https # ui # iframe # 后才 # 为空 # 的是 # 都不 # 首次 # 点了 # 要用 # 布尔 # 报错 # 但它

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】