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

相关推荐
无我Code4 分钟前
前端-2025年末个人总结
前端·年终总结
文刀竹肃22 分钟前
DVWA -SQL Injection-通关教程-完结
前端·数据库·sql·安全·网络安全·oracle
LYFlied26 分钟前
【每日算法】LeetCode 84. 柱状图中最大的矩形
前端·算法·leetcode·面试·职场和发展
Bigger29 分钟前
Tauri(21)——窗口缩放后的”失焦惊魂”,游戏控制权丢失了
前端·macos·app
Bigger1 小时前
Tauri (20)——为什么 NSPanel 窗口不能用官方 API 全屏?
前端·macos·app
bug总结1 小时前
前端开发中为什么要使用 URL().origin 提取接口根地址
开发语言·前端·javascript·vue.js·html
一招定胜负2 小时前
网络爬虫(第三部)
前端·javascript·爬虫
JY.yuyu2 小时前
TCP/UDP协议
网络·tcp/ip·udp
Shaneyxs2 小时前
从 0 到 1 实现CloudBase云开发 + 低代码全栈开发活动管理小程序(13)
前端
半山烟雨半山青2 小时前
微信内容emoji表情包编辑器 + vue3 + ts + WrchatEmogi Editor
前端·javascript·vue.js