Firefox 58版本WebRTC摄像头示例失效求助

嘿，我来帮你搞定这个Firefox升级后摄像头示例失效的麻烦！结合Firefox 58的更新特性，我整理了几个可能的原因和对应的解决步骤：

可能的原因及排查方案 #

1. 权限限制或安全上下文要求 #

Firefox 58开始严格执行媒体设备API的安全上下文规则——只有HTTPS环境（或本地localhost）才能调用摄像头，如果你的示例是在普通HTTP环境下运行的，直接就会被拦截。另外也有可能该示例的域名被Firefox的摄像头权限给阻止了。

解决步骤：

• 检查权限：打开Firefox设置 → 隐私与安全 → 权限 → 摄像头，确认该示例的域名是否被设为“阻止”，改成“允许”试试。
• 切换运行环境：如果是HTTP环境，把示例部署到HTTPS服务器上，或者在本地用localhost（比如用Node.js搭个简单的本地服务器）来测试。

2. API语法兼容性问题 #

Firefox 58对getUserMedia的实现做了更新，旧的回调式写法可能被弃用，而且视频流的赋值方式也有变化。

比如旧代码可能是这样的（已不兼容新版本Firefox）：

navigator.getUserMedia({ video: true }, function(stream) {
  document.querySelector('video').src = window.URL.createObjectURL(stream);
}, function(err) {
  console.log(err);
});

你可以改成现代标准的Promise写法，并且使用srcObject来设置视频源：

// 先检查浏览器是否支持现代API
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
  // 请求摄像头权限
  navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } })
    .then(function(stream) {
      const videoElement = document.querySelector('video');
      // 使用srcObject替代旧的URL.createObjectURL
      videoElement.srcObject = stream;
      videoElement.play();
    })
    .catch(function(err) {
      console.error('访问摄像头出错:', err);
    });
} else {
  console.error('当前浏览器不支持媒体设备API');
}

3. 查看控制台错误信息 #

打开Firefox的开发者工具（按F12），切换到「控制台」标签，看看有没有具体的错误提示（比如“Permission denied”、“API not supported”之类的），这些信息能帮你精准定位问题所在。

内容的提问来源于stack exchange，提问作者Moises bolaños davila