javascript - 测试 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，这都会返回true，我想在当前版本的chrome而不是firefox上运行http时产生一个错误值，我想这样做而不是用户代理的原因嗅探是因为当浏览器修补对 http 上网络摄像头访问的支持时，我希望我的代码能够适应而不需要修补。

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

Answer 1

以下命令将在没有提示的情况下检测 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 今天失败并显示 "NotSupportedError"在 https before 中它考虑约束。我们传递了不可能的约束，因此在允许 http 的情况下，我们会失败并返回 "OverconstrainedError" ，因此无论哪种方式都不会向用户显示任何提示。

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