前端项目在本地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 浏览器将不再显示与混合内容相关的警告,而是将所有不安全的来源都视为安全的来源。这样做可能会降低浏览器对网站安全性的监控程度,因为不再强调混合内容可能带来的潜在风险。】

相关推荐
IMPYLH4 小时前
HTML 的 <small> 元素
前端·网络·html
IT_陈寒4 小时前
Vue的响应式让我加班到凌晨,问题竟出在这个不起眼的地方
前端·人工智能·后端
K成长日志5 小时前
DALI-2协议简介
网络·网络协议·智能楼宇·智能照明·智能建筑·dali
Shota Kishi13 小时前
Solana Shreds 的 UDP 直投架构:Shredstream UDP Forwarding 的设计与实现
网络协议·架构·udp·区块链·solana
AlienZHOU13 小时前
AI Coding 时代下,我的技术面试实践分享
前端·后端·面试
Captaincc16 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师18 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen18 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒19 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端
前端snow19 小时前
ai agent --- 多agent框架之图编排引擎-langgraph
前端