17370845950

JavaScript调用摄像头和麦克风必须满足三条件：HTTPS或localhost安全上下文、用户手势触发、用户明确授权；调用getUserMedia()需错误处理，支持设备选择与权限检测，移动端需注意Safari的playsinline等兼容性限制。

在 JavaScript 中操作摄像头和麦克风，核心是使用 MediaDevices.getUserMedia() API，但它必须满足明确的权限与环境要求，否则会直接失败或被浏览器拦截。

必须满足的基础权限条件

浏览器不会无条件授予音视频访问权限，以下三点缺一不可：

• 页面运行在安全上下文（Secure Context）中：即协议必须是 https:// 或 localhost（含 127.0.0.1）。HTTP 协议下调用 getUserMedia 会被静默拒绝（Chrome、Edge 等现代浏览器）。
• 用户主动触发（user gesture）：调用必须发生在用户交互事件内，例如 click、tap、keydown（且有按键输入），不能在页面加载、定时器或异步回调中直接发起。
• 用户明确授权：首次使用时，浏览器会弹出权限提示框，用户必须点击“允许”。若用户点“拒绝”或“阻止”，后续调用会抛出 NotAllowedError；可前往浏览器地址栏点击锁形图标手动重置权限。

基础调用方式与常见配置

正确调用示例（带错误处理）：

async function startCameraAndMic() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { width: 1280, height: 720 }, // 启用摄像头，可指定分辨率
      audio: true                           // 启用麦克风
    });
    const video = document.getElementById('video');
    video.srcObject = stream; // 直接赋值给 

注意：video: true 表示启用默认摄像头；如需更高控制力（如选择特定设备），应先用 navigator.mediaDevices.enumerateDevices() 获取设备列表，再传入 deviceId。

权限状态检测与动态请求

可通过 navigator.permissions.query() 预判当前权限状态，避免重复弹窗或无效调用：

• { name: 'camera' } 检查摄像头权限
• { name: 'microphone' } 检查麦克风权限
• 返回状态包括 'granted'、'denied'、'prompt'

但注意：该 API 在非安全上下文或未触发过用户手势时可能返回 undefined 或受限结果，不能完全替代实际调用。

移动端与兼容性注意事项

部分 Android 或 iOS 浏览器存在额外限制：

• iOS Safari 要求 元素添加 playsinline 属性，否则全屏播放无法自动播放音频；
• 某些安卓 WebView（如微信内置浏览器）可能不支持 getUserMedia，或仅支持音频；
• 旧版浏览器（如 IE）完全不支持，需用 MediaStreamTrack.getSources()（已废弃）等降级方案，但现代项目建议直接忽略 IE。