chrome谷歌浏览器http协议打开摄像头Cannot read properties of undefined (reading ‘getUserMedia‘）

最新推荐文章于 2024-06-07 14:23:34 发布
最新推荐文章于 2024-06-07 14:23:34 发布
阅读量6k 收藏 3
点赞数
分类专栏： web 文章标签： chrome http UserMedia 摄像头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq445829096/article/details/125229302
版权
本文介绍了在Chrome浏览器中，由于HTTP协议限制导致调用摄像头失败的问题，详细解析了两种解决方案：1) 升级为HTTPS协议；2) 修改客户端浏览器配置，允许特定HTTP网址访问摄像头。通过这些方法，可以成功解决Chrome 102及以上版本在HTTP环境下无法使用getUserMedia的错误。
摘要由CSDN通过智能技术生成

chrome谷歌浏览器http协议打开摄像头

BS项目有人脸采集，拍照的功能，人脸采集是使用trackingjs，也是使用的H5的UserMedia技术，开发时使用127.0.0.1本机地址是可以正常调用摄像头，部署后通过服务器IP访问调用摄像头报错Cannot read properties of undefined (reading ‘getUserMedia’)。
我的谷歌浏览器是102较高版本，由于谷歌限制， 在http协议下没权限调用摄像头，除非本地IP访问自己本地启动的服务。
谷歌为什么要限制肯定是出于安全考虑，如果随意访问互联网的一个网站，结果网站中js代码直接唤起我们电脑的摄像头拍摄，隐私都没了。

调用摄像头js报错如下

com.bsoft.components.doctorCall.doctorCall,com.bsoft.base.tracking-min,com.bsoft.base.face-min.jsc:97 Uncaught TypeError: Cannot read properties of undefined (reading ‘getUserMedia’)
在这里插入图片描述

解决方案

1.升级https协议

配置HTTPS协议后谷歌认为这个网站是正常的，允许调用摄像头。

2.
最低0.47元/天 解锁文章
影子2401
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE3 全局使用aixos，解决Cannot read property ‘get‘ of undefined的问题
aj951225的博客
04-08 7800
原因：axios 不能像其他组件一样通过 Vue.use() 直接被引用 一、安装 npm install axios --save 二、在main.js插入import axios from ‘axios’ import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) app.config.globalProperties.$axios =
HTML5打开本地摄像头，视频设备可选，可获取设备id、拍照
09-24
HTML5打开本地摄像头，可读取设备号，并针对设备号打开对应摄像头。多摄像头适用。请注意WebRtc是需要SSL的，本测试需要在https环境下使用。
解决谷歌浏览器在http协议下无法调用摄像头和麦克风的问题
最新发布
guolovejie的专栏
06-07 1097
自动重启浏览器之后就可以在添加的http地址下调用摄像头和麦克风了。在输入框中输入需要访问的地址，多个地址使用“,”隔开，”，回车，如下图，将该选项置为Enabled，然后点击右下角弹出的Relaunch按钮，在浏览器地址栏中输入“
浏览器获取摄像头权限TypeError: Cannot read property ‘getUserMedia‘ of undefined
weixin_41891519的博客
06-29 4834
解决方法 在浏览器输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure 输入获取权限的地址、选择enabled 然后重启浏览器访问就会有获取摄像头权限的提示啦
JS打开摄像头并截图上传示例
12-09
直入正题，JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法，然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图，使用drawImage方法将video的内容绘至canvas中 3. 将截取的内容上传至服务器，将canvas中的内容转为base64格式上传，后端（PHP）通过file_put_contents将其转为图片 要注意的是，在chrome以外的浏览器中，使用摄像头或多或少会出现一些问题，可能也是老问题了，所以以下代码主要基于chrome使用 比如在最新版FireFox中的报错，不知为啥 1.
解决 Cannot read properties of undefined (reading ‘getUserMedia‘) 报错
engchina的专栏
12-09 3378
解决 Cannot read properties of undefined (reading 'getUserMedia') 报错
Uncaught TypeError: Cannot read properties of undefined (reading ‘getUserMedia‘) 部署js项目失败
long_songs的博客
02-16 4808
明明本地端完美运行，但是部署到服务器上却失败了，页面看起来也没问题但是打开审查之后发现就是上面的两行出问题了。
TypeError: Cannot read property 'getUserMedia' of undefined
JC.Lin的博客
02-28 1万+
出现这个异常可以参考 MediaDevices.getUserMedia() 以下是我的截图 意思是必须使用HTTPS加密通信才能获取getUserMedia()
讯飞语音听写（Cannot read property ‘getUserMedia‘ of undefined“）浏览器报错解决
会点php的前端小渣渣
08-18 1132
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
大雾起了清晨
03-20 158
TypeError: Cannot read property 'getUserMedia' of undefined
html5通过getUserMedia API实现网页录音
09-28
html5通过getUserMedia API实现网页录音，已经在服务器实践成功，能立即播放，最好是在chrome21以上实现，本人在chrome31以上实现的。从外国网站下载过来的原DEMO.
谷歌浏览器 chrome 测试版（Beta）21.0.1180.83
11-12
谷歌浏览器Chrome是一款由Google公司开发的免费网页浏览器，以其快速、稳定和安全性著称。测试版（Beta）是Chrome浏览器的其中一个版本分支，通常在稳定版发布之前，它提供了最新的功能和技术更新，供开发者和早期...
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
01-19
打开getUserMedia文档，链接如下： https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单，最终却写的怀疑人生。 API环境 问题一：（为什么不管怎么配置都显示前置摄像头） 想...
IE与非IE浏览器调用PC摄像头拍摄并且上传
04-30
在非IE浏览器中，如Chrome、Firefox、Safari和Edge（Chromium内核），WebRTC被广泛支持。使用`getUserMedia()` API可以请求访问用户的媒体设备，包括摄像头： ```javascript navigator.mediaDevices.getUserMedia({...
企业视频会议系统EasyRTC前端console报Cannot read property ‘getUserMedia‘错误问题解决
TSINGSEE青犀视频官方技术博客
07-23 851
EasyRTC视频会议系统是在网络技术高速发展的背景下产生的高科技产物，使用多媒体设备及网络作为媒介，由一个人发起和主持，可以有多个人参加。使用音频、视频等多种方式进行交流，无需专门的会议场所和专职的会务人员。 最近我们的前端人员在开发EasyRTC前端时，console标签页出现“Cannot read property ‘getUserMedia’ of undefined”错误，我们来分享一下这个问题。 问题描述 在使用EasyRTC过程中，在视频会议列表页面，点击视频图标进入视频，出现“进
chrome浏览器不能录音：Uncaught TypeError: Cannot read property ‘getUserMedia‘ of undefined解决方法
weixin_44493841的博客
08-18 1万+
Uncaught TypeError: Cannot read property ‘getUserMedia’ of undefined解决方法 javascript 打不开浏览器录音功能的问题解决方案 在浏览器的地址栏里输入 chrome://flags/#unsafely-treat-insecure-origin-as-secure　　并回车、然后作如下修改 ...
解决TypeError:Cannot read properties of undefined并深入解读TypeError错误类型
热门推荐
qq_52372698的博客
06-28 6万+
解决TypeError:Cannot read properties of undefined并深入解读TypeError错误类型 再根据axios官方文档给出的示例Axios实例 所以说instance是一个自定义的axios实例对象我们可以发现，上面的报错在于我没有在instance实例对象上挂载get方法就调用，导致报了TypeError反其道而行，我开始思考为什么这个问题报的错为什么是TypeError而不是别的错误类型深入研究一下Typ...
Cannot read properties of undefined (reading 'getUserMedia')
08-24
"Cannot read properties of undefined (reading 'getUserMedia')"是一个错误提示，意味着在代码中尝试读取未定义属性'getUserMedia'时发生了错误。这个属性通常与使用摄像头和音频设备相关。根据所提供的引文，这个错误与浏览器的安全限制有关。 在引文中，错误发生在尝试调用navigator.mediaDevices.getUserMedia()方法时。类似地，在引文中，错误发生在调用getUserMedia()方法时。这些错误可能是由于使用了http协议而不是https协议，因为谷歌浏览器对http协议下的getUserMedia()方法有安全限制。 解决方案是升级到https协议以解决该错误。通过使用https协议，浏览器会对getUserMedia()方法的访问进行授权，从而允许调用摄像头和音频设备。 在引文中提到，谷歌浏览器限制了在http协议下调用摄像头的权限，这是出于安全考虑，以防止网站滥用用户的摄像头和侵犯隐私。 综上所述，"Cannot read properties of undefined (reading 'getUserMedia')"这个错误表示在尝试读取未定义属性'getUserMedia'时发生了错误，可能是由于浏览器的安全限制。解决方案是使用https协议来调用摄像头和音频设备。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Uncaught TypeError: Cannot read properties of undefined (reading ‘getUserMedia‘) 部署js项目失败](https://blog.csdn.net/long_songs/article/details/129066271)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [chrome谷歌浏览器http协议打开摄像头Cannot read properties of undefined (reading ‘getUserMedia‘）](https://blog.csdn.net/qq445829096/article/details/125229302)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值