navigator.mediaDevices.getUserMedia调用异常：Firefox/Chrome无法打开摄像头无授权提示

首先修复代码中的关键错误 #

你的main.js里没有定义constraints变量，navigator.mediaDevices.getUserMedia()必须接收媒体约束参数才能触发授权请求，这是核心问题。修改后的main.js如下：

let localStream;
let remoteStream;
let peerConnection;

// 定义媒体约束，请求摄像头和麦克风权限
const constraints = {
  video: true,
  audio: true
};

let init = async() => {
  try {
    localStream = await navigator.mediaDevices.getUserMedia(constraints);
    document.getElementById('user-1').srcObject = localStream;
  } catch (err) {
    // 捕获错误，方便排查问题
    console.error('获取媒体设备失败:', err);
  }
}

init();

添加try/catch可以在控制台看到具体错误，帮你快速定位问题。

Firefox 摄像头权限设置步骤 #

1. 打开Firefox，点击地址栏左侧的锁形图标（localhost环境下是信息图标）
2. 在弹出面板中找到权限选项，展开后选择摄像头
3. 将权限设置为允许，刷新页面即可
4. 若仍无反应，进入Firefox全局设置：
   • 在地址栏输入about:preferences#privacy回车
   • 滚动到权限区域，找到摄像头并点击设置
   • 检查你的网站（或localhost）是否在允许列表，不在则手动添加

通用注意事项（Chrome同样适用） #

• 必须在安全上下文运行：现代浏览器仅允许HTTPS协议或localhost（本地开发）访问媒体设备，直接打开本地HTML文件（file://协议）会被拒绝，建议用本地服务器（比如Node.js的http-server、Python的SimpleHTTPServer）运行代码
• 检查系统权限：确保操作系统已允许Firefox/Chrome访问摄像头
• 关闭占用摄像头的其他程序：如果摄像头被其他应用占用，浏览器无法获取访问权限

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