前端项目在本地localhost可以调取到拍照或麦克风等设备,但是在局域网内IP+端口号访问项目时访问不到设备

前端项目在本地localhost可以调取到拍照或麦克风等设备,但是在局域网内IP+端口号访问项目时访问不到设备,调取navigation.mediaDevices时本科可以获取到mediaDevices列表,局域网内ip+端口访问时获取不到mediaDevices。

原因:

存在安全问题,为了用户的隐私安全,http协议无法使用多媒体设备。因为像摄像头和麦克风属于可能涉及重大隐私问题的API,getUserMedia()的规范提出了浏览器必须满足一系列隐私和安全要求。这个方法功能很强大,只能在安全的网络环境使用,在不安全的环境中为undefined。

navigator.mediaDevices在目前以下情况中可以获取到
1. 地址为localhost://访问
2. 协议为https
**3.**为文件访问file:///

解决办法:

打开谷歌浏览器,在地址栏输入:

chrome://flags/#unsafely-treat-insecure-origin-as-secure

【chrome://flags/#unsafely-treat-insecure-origin-as-secure 是 Chrome 浏览器中的一个设置选项,它的作用是将不安全的来源(HTTP)视为安全的来源(HTTPS),从而避免浏览器的安全性警告,启用 chrome://flags/#unsafely-treat-insecure-origin-as-secure 这个设置后,Chrome 浏览器将不再显示与混合内容相关的警告,而是将所有不安全的来源都视为安全的来源。这样做可能会降低浏览器对网站安全性的监控程度,因为不再强调混合内容可能带来的潜在风险。】

相关推荐
liangshanbo12156 小时前
面试题:常见的前端构建工具有哪些?分别适用于什么场景?
前端
linux_cfan6 小时前
videojs v10 源代码系列解读:30 · `SerialRunner` 与 `ConcurrentRunner`
前端
liangshanbo12156 小时前
面试题:页面需要发起大量 Ajax / HTTP 请求时,如何优化请求性能?
前端·http·ajax
lyz2468597 小时前
vue3页面因参数未声明而报错的常犯错误
前端·javascript·vue.js
摸爬滚打的小李7 小时前
流程图同步AI生成
前端
Hilaku7 小时前
我重写了整个项目,但没人感谢我!
前端·javascript·程序员
wdfk_prog7 小时前
Wi-Fi Direct教程 02:从 wpa_cli main() 到 P2P_FIND——用源码注释追踪 CLI 控制命令发送
运维·服务器·网络·网络协议·ubuntu·p2p·wifi-direct
P1Browser7 小时前
换了 IP 还是被关联:WebRTC 泄露本地 IP 的三种触发路径
网络协议·tcp/ip·webrtc
zach8 小时前
Vue/React SPA 打包部署后,子路由刷新 401 未登录问题彻底解决
前端·nginx·next.js
旋生万物8 小时前
素数螺旋映射 $z_n=n^{1+i}$ 的角分布统计检验与零模型对比
大数据·前端·人工智能·算法·云原生·螺旋生成论·螺旋相位