Streamlit等前端工具通过IP访问时无法调用多媒体（录音/录像）解决办法

在开发 Web 应用时，尤其是涉及浏览器媒体设备（如摄像头或麦克风）的功能，我们常常会遇到一些浏览器安全策略相关的坑。今天我就来分享一个在 Streamlit 项目中遇到的典型问题：使用电脑摄像头拍照时，在本地环境一切正常，但部署到测试或生产环境后，却无法正常调用 navigator.mediaDevices 方法，导致报错。这个问题看似简单，但背后涉及浏览器的安全机制。如果开发的工具只是小范围的内部使用，又不想通过端口转发的方式增加使用成本，可以采用浏览器信任的方式：

这个方法本质上是告诉 Chrome 将特定 HTTP 地址视为“安全来源”，从而允许媒体访问。请注意，这只是开发测试用的 hack，不推荐在生产环境中推广给用户，因为它降低了浏览器安全性。步骤如下：

1. 打开 Chrome Flags 页面：在 Chrome（edge也是一样的） 地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure，然后按 Enter 键。这会直接跳转到相关实验性功能的设置页面。
2. 添加不安全来源：找到“Insecure origins treated as secure”选项（如果没有搜索到，可以在页面搜索框输入“insecure”）。在输入框中添加你要访问的 HTTP 地址，例如 http://192.168.1.100:8501 或你的服务器 IP/端口。多个地址可以用逗号分隔。
3. 启用该选项：将右侧的下拉菜单从“未启用”改为“启用”。
4. 重启浏览器：点击页面右下角的“重启”按钮，Chrome/edge 会自动重启。重启后，重新访问你的 Streamlit 应用，录音或摄像头功能应该就能正常工作了。