Chrome 不允许 HTTP 托管站点访问相机和麦克风答案

【问题标题】：Chrome is not letting HTTP hosted site to access Camera & MicrophoneChrome 不允许 HTTP 托管站点访问相机和麦克风
【发布时间】：2018-06-08 06:51:58
【问题描述】：

我正在使用react-webcam 为应用程序拍摄自拍照。在 localhost 上，react-webcam 可以完美运行，而在 HTTP 托管的 Web 服务器上，Chrome 上默认拒绝摄像头访问。是否有任何用于网络摄像头访问或任何其他 npm 插件的解决方法可以在这里达到目的。

注意：支持 HTTPS 的站点可以同时访问摄像头和麦克风。在这里，我只剩下 HTTP 选择了。

【问题讨论】：

标签： javascript reactjs google-chrome browser webcam

【解决方案1】：

如果您将其用于开发环境并想在手机上进行测试，您可以执行以下操作：

转到：chrome://flags/#unsafely-treat-insecure-origin-as-secure
启用“不安全的来源被视为安全”
添加您要忽略此政策的地址
重启chrome

【讨论】：

花了很长时间才找到这个，默认情况下，localhost 是 https，但是如果你在两个设备上测试 socket.io 或技术，如果你不想设置 ssl，这是必不可少的

【解决方案2】：

react-webcam 使用 getUserMedia API，specification 声明：

当在不安全的来源 [混合内容] 上时，鼓励用户代理警告使用 navigator.mediaDevices.getUserMedia、navigator.getUserMedia 及其开发人员工具、错误日志等中的任何前缀变体。明确允许用户代理在不安全的来源上完全删除这些 API，只要他们一次删除所有这些 API（例如，他们不应该只在不安全的来源上留下可用的前缀版本）。

Chrome，从版本 47 开始实施此安全策略 (Source)：

从 Chrome 47 开始，仅允许来自安全来源的 getUserMedia() 请求：HTTPS 或 localhost。

因此，如果没有安全连接，您将无法访问麦克风或摄像头。

【讨论】：