解决摄像头/麦克风 在HTTP环境下的调用问题

---

一、背景

项目中使用电脑摄像头拍照，通过调用 navigator.mediaDevices 方法实现。该功能在本地环境（localhost）下运行正常，但在测试环境和生产环境均报错。

二、原因分析

现代浏览器出于安全策略考虑，严格限制了对敏感设备（如摄像头、麦克风）的访问。navigator.mediaDevices API 仅在以下被认为是"安全上下文"的环境中可用：

1. 本地访问 ：地址为 localhost 或 127.0.0.1。
2. HTTPS 协议 ：地址使用 https:// 协议。
3. 本地文件 ：通过 file:/// 协议直接打开的本地文件。
   由于测试环境和生产环境均使用 http 协议，不属于上述任何一种安全上下文，因此浏览器会阻止对该 API 的调用，导致功能失败。

三、解决方法

为了在 http 环境下临时调试或使用该功能，可以在 Chrome 浏览器中将指定的 http 地址手动标记为"可信源"。操作步骤如下：

1. 打开 Chrome 实验性功能页面
   在 Chrome 地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 并回车。

2. 配置不安全源
   找到 "Insecure origins treated as secure" (将不安全源视为安全源) 的输入框，在文本框中输入你需要开启摄像头权限的网页地址，例如：

   http://xx.xx.xx:8080

   提示 ：如果需要配置多个地址，可以用逗号隔开，例如 http://domain1.com,http://192.168.1.100。

3. 启用该功能
   将输入框右侧的下拉菜单从 Default 或 Disabled 修改为 Enabled。

4. 重启浏览器
   点击页面右下角的 "Relaunch" 按钮，让 Chrome 浏览器重启以使配置生效。
   重启后，访问你配置的 http 地址，浏览器便会将其视为安全上下文，navigator.mediaDevices API 可以正常调用。

⚠️ 重要提醒 ：

此方法仅适用于开发和测试环境。强烈不建议 在生产环境或要求用户进行此操作，因为这会降低浏览器的安全性。正确的长期解决方案是为测试和生产环境配置 HTTPS 证书。

---