测试 navigator.getUserMedia 是否需要 https 而无需浏览器用户代理嗅探

Question

我想使用 Javascript 来确定浏览器是否支持通过 http 访问网络摄像头 (navigator.getUserMedia)，如果不支持，我想将用户重定向到 https。但是，如果浏览器支持网络摄像头访问而不需要 https（例如 firefox），我根本不想将用户重定向到 https 我想只使用 http 为网站提供服务。我目前的解决方案是改变浏览器的用户代理：

var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;

我目前的解决方案在理论上会失效，因为 Firefox 可能会在未来几年的某个时间修补对网络摄像头访问的 http 支持。

我现在不愿意在所有浏览器上推送 https 是有原因的，但我意识到浏览器世界正在朝着总有一天需要无处不在的 https 的方向发展。

!!navigator.getUserMedia

如果我在 http 或 https 中是运行 chrome，这个 returns 是真的，我想在当前版本的运行 http 上生成一个假值chrome 但不是 firefox，我想这样做而不是用户代理嗅探的原因是因为浏览器修补了对 http 上网络摄像头访问的支持，我希望我的代码无需修补即可适应。

简而言之，如何在不查找特定浏览器用户代理的情况下检测支持 http 中视频功能的浏览器？

Answer 1

我想我找到了解决方案，我已经在 safari、firefox 和 chrome 上测试过：

if(navigator.mediaDevices){
  navigator.mediaDevices.getUserMedia({video:true}).then(function(){
    //firefox, chrome in https
    alert('success!'); 
  }, function(){
    //chrome in http
    alert('failure!'); 
  });
} else {
  //safari, ie
  alert('not supported');
}

然而，这确实会在运行时弹出一个权限气泡，这是不可取的，我想找到一个在其检测过程中不会打扰用户的解决方案。

Answer 2

以下将检测 Chrome 今天的 https 行为，没有提示：

（在 Chrome 中使用 fiddle，因为 SO 片段中的 getUserMedia 出于某种原因在 Chrome 中不起作用）

if ('https:' == document.location.protocol) {
  console.log("Page is https.");
} else {
  navigator.mediaDevices.getUserMedia({video: {width: {min: 2, max: 1}}})
  .then(stream => {
    log("Detection failed!");
    stream.getTracks().forEach(t => t.stop());
  })
  .catch(e => {
    switch (e.name) {
      case "NotSupportedError":
      case "NotAllowedError":
      case "SecurityError":
        console.log("getUserMedia in http is disallowed");
        break;
      case "OverconstrainedError":
      default:
        console.log("getUserMedia in http is allowed");
        break;
    }
  });
}

这是可行的，因为 Chrome 今天在 https 中失败 "NotSupportedError"，然后 它考虑了约束。我们正在传递不可能的约束，因此在允许 http 的情况下，我们会以 "OverconstrainedError" 失败，因此无论哪种方式都不会向用户显示任何提示。

你会注意到我有点避讳，因为根据 spec，"NotSupportedError" 实际上不是一个有效的错误。我认为一旦 Chrome 更新以遵循规范，它应该会失败并显示 "SecurityError" 而不是 "NotSupportedError"，但我不确定。它有可能会首先考虑约束，在这种情况下，此测试可能会停止工作。

测试 navigator.getUserMedia 是否需要 https 而无需浏览器用户代理嗅探

Test if navigator.getUserMedia requires https without browser user agent sniffing

javascript

https

firefox

google-chrome

getusermedia