解决各大浏览器中http地址无权限调用麦克风摄像头问题(包括谷歌,Edge,360,火狐)后续会陆续补充

项目场景:

在各大浏览器中http地址调用电脑麦克风摄像头会没有权限,http协议无法使用多媒体设备


原因分析:

为了用户的隐私安全,http协议无法使用多媒体设备。因为像摄像头和麦克风属于可能涉及重大隐私问题的API,getUserMedia()的规范提出了浏览器必须满足一系列隐私和安全要求。这个方法功能很强大,只能在安全的网络环境使用,在不安全的环境中为undefined。

解决方案:

  • 谷歌/Edge浏览器以及360浏览器解决办法(此方法适用于所有webkit内核的浏览器)
  • 谷歌浏览器在地址栏输入:chrome://flags/#unsafely-treat-insecure-origin-as-secure

  • Edge浏览器在地址栏输入:edge://flags/#unsafely-treat-insecure-origin-as-secure

  • 360浏览器:首先将360浏览器内核设置为webkit内核,设置步骤为

    1. 复制项目网址
    2. 点开设置
    3. 高级设置
    4. 内核设置
  • 按照图片进行操作,最后重启浏览器,再次进入页面,就会提示是否允许调用麦克风

  • 如果有多个地址,则用英文逗号隔开即可

在这里插入图片描述

  • Firefox 浏览器解决办法
  1. 在地址栏输入:about:config
  2. 搜索框输入insecure,然后回车搜索相关设置选项
  3. media.devices.insecure.enabled改为true
  4. media.getusermedia.insecure.enabled改为true
  5. 刷新你的网页重试即可

在这里插入图片描述在这里插入图片描述

### 配置和使用Chrome浏览器中的麦克风权限 #### 浏览器安全策略下的麦克风访问 现代版本的Google Chrome为了提升安全性,默认情况下仅允许通过HTTPS协议的安全网站请求麦克风和其他敏感设备资源。对于HTTP页面尝试调用这些功能的情况,可能会遇到权限被拒绝的问题[^4]。 #### 用户界面操作以授予麦克风权限 当网页试图获取用户的麦克风使用权时,会在地址栏附近显示一个图标提示用户是否同意给予该站点相应的权限。如果之前选择了阻止,则可以通过点击锁形图标进入网站设置来重新调整麦克风访问控制选项[^1]。 #### 开发者模式下绕过安全限制(仅供测试) 针对开发环境或是本地调试需求,在某些特殊场景下可以考虑启用实验性的浏览器标志位`chrome://flags/#unsafely-treat-insecure-origin-as-secure`,并指定特定域名作为例外情况处理,从而实现在非加密连接状态下也能正常工作于开发者环境中使用的特性[^3]。 需要注意的是这种方法并不适用于生产环境部署,并且存在一定的安全隐患,因此不建议长期开启此设置用于公开发布的应用服务之中。 #### 处理扩展程序内的麦克风权限申请逻辑 对于希望在其应用程序内集成语音交互特性的开发者来说,编写Chrome插件时应当遵循官方文档指导完成必要的声明文件配置以及JavaScript API调用来实现动态请求麦克风授权的功能。 ```javascript navigator.mediaDevices.getUserMedia({ audio: true }) .then(function(stream) { console.log('Microphone access granted.'); }).catch(function(err) { console.error('Error accessing microphone:', err); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值