Chrome 浏览器获取音频设备权限问题 Cannot read property getUserMedia of undefined

已于 2022-08-26 13:54:49 修改
阅读量1.6w 收藏 34
点赞数 12
分类专栏： Debug记录 文章标签： chrome 前端
于 2020-06-19 17:06:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/QT_Port/article/details/106860099
版权

谷歌浏览器使用 navigator.mediaDevices.getUserMedia获取资源时报错

在这里插入图片描述

monitor.js:296 Uncaught TypeError: Cannot read property 'getUserMedia' of undefined

导致此类问题一版为两类：
1、需要发布到web服务器，例如niginx tomcat才能支持使用该接口
2、浏览器权限限制，使用音频的接口需要安全权限开启
针对谷歌浏览器安全权限问题
我们可以通过以下方式解决：

一、网页使用https方式访问

此操作需要依赖web服务提供者实现https的访问方式。

二、修改浏览器安全配置（最直接、简单）

1、浏览器地址栏输入：

chrome://flags/#unsafely-treat-insecure-origin-as-secure在这里插入图片描述

2、开启Insecure origins treated as secure

在下方输入栏内输入，你访问的地址url，然后将右侧Disabled 改成 Enabled即可
在这里插入图片描述

3、浏览器会提示重启（Relaunch）

Relaunch即可
在这里插入图片描述

出现 TypeError: Cannot read properties of undefined (reading ‘getUserMedia‘） 解决方法
码农研究僧的博客
09-05 3256
启用 HTTPS: 为你的网页启用 HTTPS，这不仅解决了 getUserMedia 的问题，还能提高整体的安全性和用户信任度
srs4.0 webrtc模块分析（一）环境搭建
lcalqf的专栏
01-21 3225
介绍 srs 是国内开源的一套流媒体服务器，目前发展到4.0版本（4.0还没正式发布），服务支持RTMP/HLS/WebRTC/SRT/GB2818。 github地址：https://github.com/ossrs/srs 我们主要分析srs4.0 webrtc模块，后面我将陆续介绍srs 对webrtc支持，欢迎大家关注给与支持。 环境搭建 一、源码下载 git clone https://github.com/ossrs/srs.git 如果github 下载慢或者失败可以用国.
解决各大浏览器中http地址无权限调用麦克风摄像头问题（包括谷歌，Edge，360，火狐）后续会陆续补充
欢迎观看我的前端知识合集~
02-27 2018
在各大浏览器中http地址调用电脑麦克风摄像头会没有权限，http协议无法使用多媒体设备。
TypeError: Cannot read properties of undefined (reading ‘getUserMedia‘)
最新发布
liyichuanZhengzhou的博客
03-25 232
Solution:
TypeError: Cannot read property ‘getUserMedia‘ of undefined
迪之的博客
02-27 1027
输入框中填写需要开启的域名，也就是你报错的地址，譬如，多个以逗号分隔。
TypeError Cannot read property ‘getUserMedia‘ of undefined
weixin_48435461的博客
08-01 523
使用Chrome参数开启可以解决这个问题，在浏览器框中输入下述代码。将你需要访问的IP填入后重启浏览器，就能解决报错。所以直接访问ip地址会出现报错。localhost正常访问。
TypeError: Cannot read property 'getUserMedia' of undefined
热门推荐
JC.Lin的博客
02-28 1万+
出现这个异常可以参考 MediaDevices.getUserMedia() 以下是我的截图 意思是必须使用HTTPS加密通信才能获取getUserMedia()
企业视频会议系统EasyRTC前端console报Cannot read property ‘getUserMedia‘错误问题解决
TSINGSEE青犀视频官方技术博客
07-23 893
EasyRTC视频会议系统是在网络技术高速发展的背景下产生的高科技产物，使用多媒体设备及网络作为媒介，由一个人发起和主持，可以有多个人参加。使用音频、视频等多种方式进行交流，无需专门的会议场所和专职的会务人员。 最近我们的前端人员在开发EasyRTC前端时，console标签页出现“Cannot read property ‘getUserMedia’ of undefined”错误，我们来分享一下这个问题。 问题描述 在使用EasyRTC过程中，在视频会议列表页面，点击视频图标进入视频，出现“进
chrome谷歌浏览器http协议打开摄像头Cannot read properties of undefined (reading ‘getUserMedia‘）
qq445829096的博客
06-11 6506
chrome谷歌浏览器http协议打开摄像头Cannot read properties of undefined (reading 'getUserMedia'）
Cannot read property ‘getDisplayMedia‘ of undefined
06-03
这个错误通常与浏览器的媒体设备相关，可能是因为浏览器不支持 `getDisplayMedia` 方法导致的。`getDisplayMedia` 是一个 WebRTC API，用于从用户的屏幕或摄像头捕获媒体流。为了解决这个问题，您可以尝试以下几种...
页面利用getUserMedia来调用摄像头拍照并且显示
qq_39050148的博客
04-24 1518
参考资料：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 之前没有接触过需要调用摄像头的需求，所以只能通过网上搜索寻找做法了；开始做之前的问题： 怎么调用摄像头？ 怎么把摄像头拍摄到的画面显示到页面上？ 怎么从画面截图完成拍照功能？ 在网上搜索以后就发现特别简单： -navigator.mediaDevices.getUserMedia()就可以请求开启摄像头； -如果用户给了权限，那么返回的异步函数里
html5通过getUserMedia API实现网页录音
01-02
html5通过getUserMedia API实现网页录音，已经在服务器实践成功，能立即播放，最好是在chrome21以上实现，本人在chrome31以上实现的。从外国网站下载过来的原DEMO.
spring boot 实现 Kurento 一对一浏览器视频聊天
TMLtea的博客
08-31 5816
一、环境配置 1. 安装了Kurento Media Server（KMS）的 Ubuntu16.04（Xenial）。            首先解决服务系统，若有腾讯云或阿里云的Ubuntu16服务器则直接安装KMS服务；没有的可通过VMware虚拟机在本地机器上安装Ubuntu16.04（Xenial）之后再安装KMS服务；         a. 先说没有云服务器的情况，没有虚拟机的可...
cannot read property ‘getusermedia‘ of undefined
江黎
02-22 617
chroem地址栏输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 填写你要开启的地址
讯飞语音听写（Cannot read property ‘getUserMedia‘ of undefined“）浏览器报错解决
会点php的前端小渣渣
08-18 1243
TypeError: Cannot read property 'getUserMedia' of undefined 解决方法： 步骤： 1、在浏览器的地址栏里输入chrome://flags/#unsafely-treat-insecure-origin-as-secure　　并回车 然后作如下修改 输入框中填写需要开启的域名，也就是你报错的地址，譬如http://example.com"，多个以逗号分隔。 2、修改完后，在右下角会出现这样 点击 Relaunc...
浏览器获取摄像头权限TypeError: Cannot read property ‘getUserMedia‘ of undefined
weixin_41891519的博客
06-29 5055
解决方法 在浏览器输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 输入获取权限的地址、选择enabled 然后重启浏览器访问就会有获取摄像头权限的提示啦
WEB:调用MediaDevices接口；错误：TypeError: Cannot read property ‘getUserMedia‘ of undefined....
研必行的博客
01-27 1409
前言： 用web端写一个录音功能时，使用的WEB API MediaDevices的MediaDevices.getUserMedia()等几个方法。 写好之后在本地运行没有问题，上传至服务器后，访问无法运行， 并报错TypeError: Cannot read property 'getUserMedia' of undefined.... 原因： 像MediaDevices.getUserMedia()方法需要在安全协议是HTTPS或file:///URL方案加载的页面，或者是从加载的页面 localh
navigator.mediaDevices.getUserMedia()出现NotReadableError Could not start audio source错误的解决办法
weixin_42471170的博客
03-11 8143
问题是： 支持了navigator.mediaDevices.getUserMedia()的方法，但没有权限去调起麦克风导致的问题。 解决方案： 手动到手机，设置》隐私》授权录音或者麦克风对该app的使用权限。
处理打开摄像头出现无法获取摄像头: TypeError: Cannot read properties of undefined (reading 'getUserMedia')问题，无法打开摄像头
11-14
当遇到 "TypeError: Cannot read properties of undefined (reading 'getUserMedia')" 的错误，这通常发生在尝试通过WebRTC API访问用户的摄像头时，因为`getUserMedia` 是浏览器提供的API，用于请求用户媒体权限，如音频和视频。 解决这个问题，你可以按照以下步骤检查： 1. **兼容性确认**：确保你的代码是在支持`getUserMedia`的现代浏览器（如Chrome、Firefox、Edge等）上运行，旧版本的IE和Safari可能不支持。 2. **检查API调用**：确保在访问`getUserMedia`之前，已经正确导入了`navigator.mediaDevices.getUserMedia`。如果不是异步操作，记得添加`async`关键字。 3. **异常处理**：在调用`getUserMedia`时，加上适当的try-catch块来捕获并处理可能出现的错误。 ```javascript async function accessCamera() { try { const stream = await navigator.mediaDevices.getUserMedia({ video: true }); // 使用流进行摄像头操作... } catch (error) { console.error('Error accessing camera:', error); // 可能需要向用户显示错误信息或提供其他选项 } } ``` 4. **权限检查**：如果用户禁止了摄像头权限，你需要处理`NotAllowedError`或其他相关的拒绝错误，并提示用户给予权限。 5. **浏览器兼容库**：有时候，如果你在老版本浏览器上，可能需要借助polyfill库（如adapter.js）来桥接原生API。 如果以上步骤都做了还是出现问题，检查你的环境配置和浏览器控制台，看看是否有更详细的错误信息，以便于定位问题。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值