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

Question

我正在使用反应网络摄像头来捕获应用程序的自拍照。在本地主机上，react-webcam 工作得很好，而在 HTTP 托管的网络服务器上，Chrome 上默认拒绝摄像头访问。是否有任何解决网络摄像头访问或任何其他 npm 插件可以达到此目的的解决方法。

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

Answer 1

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

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

Answer 2

React-WebCam 使用的getUserMediaAPI规范如下：

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

Chrome从47版本开始实现了这个安全策略（来源）：

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

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