解除chrome中http无法录音问题,权限

🧠 一、为什么会被 Chrome 屏蔽

Chrome 出于安全策略,会在以下几种情况自动禁用权限

情况 说明
❌ 网站不是 HTTPS Chrome 认为 HTTP 不安全,会默认禁用 getUserMedia()(音视频访问)
❌ 用户手动点击了"禁止使用麦克风" 浏览器会永久记住这个选择(需手动解锁)
❌ 浏览器的全局麦克风权限关闭 在系统或浏览器设置层面被禁用
❌ "隐私模式"或企业管理策略禁止访问 某些公司或系统策略会禁用麦克风/摄像头 API
⚠️ 之前有错误或崩溃 Chrome 可能自动屏蔽掉同源请求直到重新授权

这时候 Chrome 默认会 强制屏蔽麦克风、摄像头、语音识别 API

因为它认为 http://IP 是"不安全来源(insecure origin)"。

✅ 解决方法(局域网专用方案)

你有两种可行方案,不需要图形界面,也不用证书。


🥇 方法 1:在客户端电脑的 Chrome 中"强制允许不安全来源使用麦克风"

Chrome 有一个隐藏开关,可以让指定的 IP 地址 在 HTTP 下也能访问麦克风/摄像头

操作步骤:
  1. 打开 Chrome(在你访问前端的那台电脑上);

  2. 在地址栏输入:

    复制代码
    chrome://flags/#unsafely-treat-insecure-origin-as-secure
  3. 找到这一项:

    复制代码
    Insecure origins treated as secure
  4. 在下面的文本框里填入你的服务器地址,例如:

    复制代码
    http://188.18.18.149:8010
  5. 右侧改为 Enabled

  6. 点击右下角 "Relaunch" 重启 Chrome;

  7. 再访问你的站点,就能正常使用麦克风/摄像头了。

🔒 原理:

这会让 Chrome 把该 HTTP 地址"伪装成安全来源(secure origin)",

这样 navigator.mediaDevices.getUserMedia() 就不会再被屏蔽。

现在就可以更改网站录音,摄像头和位置权限了

相关推荐
阿珊和她的猫几秒前
Webpack 优化:构建速度与包体积的双重提升
前端·webpack·node.js
阿珊和她的猫1 分钟前
Webpack 打包体积优化:让应用更轻量、更高效
前端·webpack·状态模式
im_AMBER1 分钟前
Vite + React 项目启动深度踩坑指南
前端·学习·react.js·前端框架
Hammer Ray5 分钟前
前端开发基础概念(React)
前端·react.js·前端框架
Sunlightʊə2 小时前
2.登录页测试用例
运维·服务器·前端·功能测试·单元测试
Code Crafter3 小时前
ES6-ES14 新特性速查
前端·ecmascript·es6
Lhuu(重开版3 小时前
CSS从0到1
前端·css·tensorflow
不说别的就是很菜4 小时前
【前端面试】HTML篇
前端·html
前端一小卒5 小时前
生产环境Sourcemap策略:从苹果事故看前端构建安全架构设计
前端·javascript
im_AMBER5 小时前
React 18
前端·javascript·笔记·学习·react.js·前端框架