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

相关推荐
社恐的下水道蟑螂12 分钟前
从奶茶店彻底搞懂 SSR!从零到拿捏服务端渲染,看完面试吹牛逼不卡壳
前端·react.js·性能优化
EnCi Zheng17 分钟前
M1-如何转换为HTML
前端·html
luanma15098024 分钟前
Laravel 8.X重磅特性全解析
前端·javascript·vue.js·php·lua
liwulin050635 分钟前
【ESP32-S3】WiFi 网页遥控 + WebSocket 实时控制编码电机+ 实时数据显示 + 急停 + 速度滑块
网络·websocket·网络协议
kyriewen40 分钟前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
前端·javascript·chrome
Wect43 分钟前
LeetCode 215. 数组中的第K个最大元素:大根堆解法详解
前端·算法·typescript
ETA81 小时前
面试官:说说事件冒泡与委托?这是我见过最透彻的回答
前端·javascript
C澒1 小时前
PC 桌面富应用:速分客户端
前端·c++·electron·web app
程序猿编码1 小时前
基于ncurses的TCP连接可视化与重置工具:原理与实现(C/C++代码实现)
linux·c语言·网络·c++·tcp/ip
℡ 萧1 小时前
OSPF开销值、协议优先级及计时器的修改-新版(17)
网络·网络协议·网络安全·智能路由器·信息与通信