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

相关推荐
咖啡无伴侣5 小时前
unplugin-auto-import 使用详解+面试高频考点
前端·架构
搬砖记录员5 小时前
录屏文件打不开?H.265兼容性踩坑与4种实战方案
前端
明月_清风5 小时前
SEO 完全指南:从底层原理到实战应用场景
前端·seo
默_笙5 小时前
🚲 手写一个"Claude Code":我用 LangChain + ReAct 循环,让 AI 自己读文件、解释代码
前端·javascript
星河耀银海5 小时前
框架结合:Vue+HTML5+AI实现智能前端应用开发
前端·vue.js·html5
等咸鱼的狸猫6 小时前
# JS 核心六大主题:闭包内存模型、原型链查找、事件流机制与 Promise / Event Loop 实现视角复盘
前端·javascript
袋鱼不重6 小时前
乐观锁与悲观锁:原理、选型与前后端实践
前端·后端
Charonmomo7 小时前
react/antd - 不能正确打开标签页问题记录
前端·react.js·前端框架
冬枳7 小时前
基于OpenSeagragon封装的前端病理切片展示组件
前端·typescript
爱勇宝8 小时前
《道德经》第6章:别把团队的创造力用到枯竭
前端·后端