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 今天在 https 考虑约束之前因 "NotSupportedError" 而失败。我们正在传递不可能的约束，因此在允许 http 的情况下，我们将失败并返回 “OverconstrainedError”，因此无论哪种方式都不会向用户显示任何提示。

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