如何像Appear.in那样在Chrome中一次性弹窗请求麦克风和摄像头权限？

嘿，这个问题我之前也折腾过！其实Chrome早就支持一次性请求麦克风和摄像头的合并权限弹窗，核心就是用对getUserMedia的调用方式——别分开请求，要在同一个API调用里同时指定音频和视频的权限需求。

核心实现代码 #

你只需要在getUserMedia的配置参数里同时开启audio和video，Chrome就会自动弹出一个合并的权限请求弹窗，而不是分开两次询问：

// 异步函数，同时请求麦克风+摄像头权限
async function requestDualPermissions() {
  try {
    // 关键：在同一个getUserMedia调用中同时指定audio和video
    const mediaStream = await navigator.mediaDevices.getUserMedia({
      audio: true, // 请求麦克风权限
      video: true  // 请求摄像头权限
    });

    // 权限获取成功后，可以把流绑定到video元素预览
    const previewVideo = document.getElementById('camera-preview');
    previewVideo.srcObject = mediaStream;
  } catch (err) {
    // 处理权限拒绝或其他错误
    console.error('权限请求出错:', err.message);
    alert('请允许麦克风和摄像头权限以继续使用功能');
  }
}

// 触发请求（比如绑定到按钮点击事件）
document.getElementById('start-btn').addEventListener('click', requestDualPermissions);

关键注意事项 #

• 必须在安全上下文环境：Chrome要求getUserMedia只能在HTTPS协议或者本地localhost环境下运行，HTTP环境会直接报错。
• 不要分开调用：如果你先调用一次getUserMedia({audio: true})再调用getUserMedia({video: true})，Chrome会弹出两个独立的权限弹窗，这就是你之前可能遇到的情况。
• 权限状态的后续处理：如果用户拒绝了权限，你可以通过navigator.permissions.query()来检查当前权限状态，引导用户去浏览器设置里开启权限。

这种方式就是Appear.in这类应用实现合并权限弹窗的原理，亲测在Chrome 80+版本都能正常工作。

内容的提问来源于stack exchange，提问作者Joseph Perez