移动端通过IP访问本地开发环境无法调用getUserMedia如何解决

navigator.mediaDevices.getUserMedia 接口受浏览器安全策略限制，仅允许在安全上下文环境下调用。安全上下文仅包含两类场景：

• 本地回环地址（localhost、127.0.0.1）
• 走HTTPS协议的页面

你用局域网IP访问时走的是普通HTTP协议，不属于以上两种场景，所以浏览器会直接禁用navigator.mediaDevices对象，触发undefined报错。

方案1：给本地服务配置自签名HTTPS证书（适合全端通用测试） #

• 用mkcert工具生成本地受信任的自签名证书，给你的3000端口服务挂载HTTPS访问能力
• 电脑和手机端都安装mkcert的根证书，避免浏览器报不安全拦截
• 后续所有设备统一用https://<局域网IP>:3000/xxx格式的地址访问，即可正常识别为安全上下文，调用媒体接口

方案2：修改浏览器临时安全规则（适合快速临时测试） #

不需要修改服务配置，直接调整浏览器规则放行你的测试地址：

• 桌面端Chrome/Edge：打开chrome://flags/#unsafely-treat-insecure-origin-as-secure配置页，将你的测试地址http://<局域网IP>:3000填入输入框，启用配置后重启浏览器即可生效
• 移动端Chrome：同样在地址栏输入chrome://flags，找到Insecure origins treated as secure配置项，填入你的测试地址后重启浏览器即可
• Firefox等其他浏览器也有对应同规则的配置项，操作逻辑一致

方案3：内网域名解析（适合长期测试场景） #

在内网搭建DNS服务，将一个你自行持有的域名解析到测试机的局域网IP，给这个域名配置合法的HTTPS证书，后续所有设备直接用该域名访问即可，逻辑和正式上线环境完全一致，不需要修改任何设备的浏览器配置。

• 临时修改浏览器规则的方案仅可用于开发测试环境，测试完成后务必改回默认配置，避免产生安全风险
• 正式上线的服务必须使用合法机构颁发的HTTPS证书，禁止使用测试阶段的临时方案

内容的提问来源于stack exchange，提问作者Arnold_Sanders