首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

getUserMedia()在正常的chrome中不起作用,但在启动pwa-chrome时起作用

getUserMedia() 是 WebRTC API 的一部分,它允许网页访问用户的摄像头和麦克风。如果你发现在普通的 Chrome 浏览器中 getUserMedia() 不起作用,但在启动 PWA(Progressive Web App)模式的 Chrome 中却能正常工作,这可能是由于以下几个原因:

基础概念

  • getUserMedia(): 这是一个 JavaScript API,用于访问用户的媒体输入设备,如摄像头和麦克风。
  • PWA (Progressive Web App): PWA 是一种结合了网页应用和原生应用优点的应用形式,它可以提供类似原生应用的体验。

可能的原因

  1. 权限设置: PWA 模式可能改变了浏览器的权限设置,使得访问媒体设备更容易。
  2. 安全策略: 普通的 Chrome 浏览器可能有更严格的安全策略,需要用户明确授权。
  3. 浏览器扩展或插件: 某些浏览器扩展或插件可能干扰了 getUserMedia() 的正常工作。

解决方法

  1. 检查权限: 确保在普通 Chrome 浏览器中也授予了访问摄像头和麦克风的权限。可以在浏览器的设置中检查和修改这些权限。
  2. 检查权限: 确保在普通 Chrome 浏览器中也授予了访问摄像头和麦克风的权限。可以在浏览器的设置中检查和修改这些权限。
  3. 更新浏览器: 确保你使用的是最新版本的 Chrome 浏览器,因为旧版本可能存在已知的 bug 或安全问题。
  4. 禁用扩展或插件: 尝试在普通 Chrome 浏览器中禁用所有扩展和插件,然后重新测试 getUserMedia() 是否能正常工作。
  5. 使用 HTTPS: getUserMedia() 通常只在 HTTPS 环境下工作,确保你的网页是通过 HTTPS 提供的。
  6. 检查控制台错误信息: 打开浏览器的开发者工具,查看控制台中是否有任何错误信息,这些信息可能会提供更多线索。

应用场景

getUserMedia() 广泛应用于视频会议、实时聊天、在线教育、游戏直播等需要访问用户摄像头和麦克风的场景。

参考链接

通过以上步骤,你应该能够诊断并解决 getUserMedia() 在普通 Chrome 浏览器中不起作用的问题。如果问题依然存在,可能需要进一步检查浏览器的配置或寻求社区的帮助。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

摆脱客户端?网页发起直播势在必行!

在某些deviceId之间切换时,摄像头画面或者是麦克风采集处并没有发生变化。进一步调试发现,这些切换后没有发生变化的deviceId都具有相同的groupId。...不过在Firefox中,一次只能指定一种mediaSource。...屏幕共享 Web 端屏幕共享,通过创建一个屏幕共享的流来实现的。Chrome屏幕共享需要下载插件,在创建的流的时候还需要传入插件的extensionId。...视频源如来自 canvas,需要在 canvas 内容不变时,每隔 1 秒重新绘制 canvas 内容,以保持视频流的正常发布。...但是开发中发现切换时设置码率无效。SDK那边给的答复是:因为缓存问题,会以第一次推流设置的参数为准,将会在下个版本中修复。

3K61

【译】让图片更有意义——图形检测API

Shape Detection APIundefined作者: Thomas Steiner 日期: 2019-02-22 什么是图形检测API 有了如navigator.mediaDevices.getUserMedia...这样的api结合新版Chrome为Android提供的照片选择器,无论是捕获图像、获取实时视频数据还是上传本地图片都变得非常容易。...文本检测 社交网站可以在没有更多图像描述的情况下将图像中检测到的文本设置为图片的 img alt 属性, 提高图片的可读性。...进展情况 项目 进度 创建解释器 已完成 构建草案规范 进度中 反馈收集和设计 进度中 浏览器验证 进度中 发布 未开始 图形检测API的使用 FaceDetector、BarcodeDetector...因为在Linux和Chrome OS上的Chrome在图形检测API不起作用的情况下仍然会暴露出探测器接口(这是个bug),在这种情况下,我们建议使用以下特征检测的临时方案。

86620
  • WebCodecs, WebTransport, and the Future of WebRTC

    而且,至少目前,数据通道在工作人员的测试中不起作用。”...从顶部开始,我们有 getUserMedia—— 捕获视频和音频——像素和 PCM 样本。我们在这里进行一些调整,因为我们希望音频和视频同步。我们建议使用者在捕获该样本时使用世界时钟计时标记信息。...当有一个视频帧流时,有一个问题是,在工作人员之间,流是可传输的,这很棒,但流中的块本身不会传输,而是被序列化。...Jordi:“关于我在实现这个 demo 时哪些不起作用以及哪些具有挑战性:音频和视频同步很困难,正如 François 所提到的,视频时间戳在编码和解码阶段中存在,但音频时间戳则不然。...BreakoutBox 在 Chrome 中,Insertable Streams 在 Chrome 中。我认为 Safari 中都有这两个版本。然后是渲染 API。

    84920

    List.append() 在 Python 中不起作用,该怎么解决?

    在 Python 中,我们通常使用 List.append() 方法向列表末尾添加元素。然而,在某些情况下,你可能会遇到 List.append() 方法不起作用的问题。...问题描述虽然 List.append() 方法通常在 Python 中运行良好,但在某些情况下,它可能无法正常工作。以下是一些可能导致 List.append() 方法不起作用的情况:1....列表作为函数参数另一个导致 List.append() 方法不起作用的常见情况是将列表作为函数的参数传递。在 Python 中,函数参数传递是通过对象引用实现的。...列表被当作不可变对象对待在某些情况下,可能会将列表错误地当作不可变对象对待,从而导致 List.append() 方法不起作用。例如,如果尝试向元组(Tuple)中添加元素,会引发异常。...结论List.append() 方法在 Python 中通常是一个方便且常用的方法,用于向列表末尾添加元素。然而,当遇到某些情况时,它可能不起作用。

    2.7K20

    记一个bootloader的cache问题

    Cache设定 到了这一步,我想到之前解决的另一个Cache不起作用的问题,最终是查到必须设置smp bit,于是加上对应的设置代码,但加上后问题并没解决。...简单来说,在启用mmu时,需要给出一个page table告知mmu,虚拟地址和物理地址如何映射,在这个page table中,每一项还有若干功能位,包括了权限,Cache等设置。...顺便提一句,最开始加的smp bit确实是需要的,各位如果发现DCache没起作用,可以检查下这个设置,之前在另一个问题上也是坑了我好几天才从uboot中揪出这个配置。...如果是在主系统中,那对Cache就得精细化控制,该回刷就回刷该无效就无效,但在这个问题中我的场景比较简单,bootloader一穷二白,就简单些吧,再移植一段刷Cache的代码,直接刷全部DCache。...然后在几个关键的地方调用了下,果然,启动流程恢复正常了。

    75330

    chrome安卓WebView调试出现空白页面的解决方案

    出现了: 404 Not Found The resource could not be found 用到了chrome的inspect调试,虽然在chrome://inspect 中可以看到设备,但是点击...这个时候无论我是否开启V**,或者在webview中写入各种设置均不起作用。 一度怀疑是手机的webview框架有问题,甚至想过替换webview的方案。...但是手机同时安装的chrome浏览器,qq浏览器都可以正常调试,这是我对比了一下chrome浏览器和webview的核心版本 其中 chrome : 71.0 WebView: 51.0 在开启vpn后...chrome浏览器的页面已经可以正常调试了,但是回到webview调试依然白屏。...这时我推测是两个浏览器内核之间已经不能进行有效的对接、或者谷歌服务器中没有对应的版本文件来下载,导致调试器界面无法显示。

    2.7K20

    自动化-Appium-​第一个Demo-Web(Python版)

    `instruments -s devices`得到的可使用的设备名称之一 # 在Android上,这个关键字目前不起作用 desired_caps['deviceName'] = 'honor' #...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上,这个关键字目前不起作用 desired_caps['deviceName'] = 'honor' #...的真机里,打开要操作的Chrome浏览器,本章示例为已经在真机安装完成的Chrome浏览器,之后打开百度首页,此时在PC的Chrome浏览器中可以看到百度首页的访问链接,如图所示,真机里的Chrome浏览器版本号为...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上,这个关键字目前不起作用 desired_caps['deviceName'] = 'iPhone 8'...`instruments -s devices`得到的可使用的设备名称之一 # 在Android上,这个关键字目前不起作用 desired_caps['deviceName'] = 'test' #

    2.5K10

    媒体数据获取与播放

    MediaDevices.getDisplayMedia():      在得到用户授权后可以选择屏幕、窗口、Chrome 标签页进行媒体流的获取。...在获取 Mac 屏幕/窗口进行屏幕共享的时候需要在 Mac 的【偏好设置】=>【安全与隐私】=>【隐私】=>【屏幕录制】中勾选允许Chrome。...,所以我们在 TypeScript 编写代码的时候在泛型约束时指定了它: const video = ref(); const openCamera = async...,这个案例工作前需要正常得到摄像头返回的媒体数据流:      因为我们要得到 video 标签的一个宽高来设置我们的画布尺寸,所以在泛型约束的时候我们增加一个HTMLVideoElement 类型约束...结语:      通过上面 4 个场景用例我们熟悉了在浏览器中通过规范的 API 来实现媒体数据的读取与播放,大大节省了音视频在 web 端开发的难度,明天继续学!

    97520

    前端WebAR实现简单版pokemon Go

    由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下: ? 元旦后提供demo链接 WebAR WebAR说白了就是通过web端的技术能力去实现AR的效果!...最终数据展示,Android设备下,有99.45%的设备在微信是支持getUserMedia()的,98.05%的设备在手Q是支持getUserMedia()的。...2015年底前,也就是chrome47版本前,chrome是支持http页面拉起摄像头的,出于安全问题考虑,chrome47版本后只支持https页面拉起摄像头。...当成功呼起摄像头时,会触发success的回调,在回调中我们可以获取摄像头的数据流 // 获取相应浏览器的URL对象 window.URL = window.URL || window.webkitURL...== undefined) { //Firefox中,video.mozSrcObject最初为null,而不是未定义的,我们可以靠这个来检测Firefox的支持

    1.7K50

    selenium中的备胎

    在跑selenium的时候,或多或少,总有那么几次会fail掉。如同我们汽车有备胎,selenium中我们也可以弄个备胎。...在日常的selenium的自动化测试中,我们总能得到这样的error....selenium是单进程在执行,我们考虑搞一个备用的进程,如果主进程死了,就可以切换过来,如同我们生活中的备胎。 这样就不需要重新启动selenium。 ?...=chrome_options) browser.implicitly_wait(5) # 操作、获取元素时的隐式等待时间 browser.set_page_load_timeout(10) # 页面加载超时等待时间...这如同我们生活中,如果上天再给一次机会,我一定会好好争取。 这样我们的测试就稳定多了,如果2次都失败,也就是备胎都不起作用,那也就无力回天,得考虑优化代码了。

    75430

    HTML5的这些api你知道吗?

    以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。...在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。)...-- 正常正确情况下,使用video等元素,我们是需要在确认客户端是支持该元素时才 回相应地用js创建这些元素,但通过使用getUserMedia api, 我们即可在html中直接创建这些元素...的时, 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video,然后通过video的play方法拉起本地video的启动和连接。...所以我们需要一个方法去获取系统的信息,app有一些过程是`十分耗电的,然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。

    1.4K60

    你真的知道如何正确清除 DNS 缓存吗?( 附全平台详细教程 )

    restart 在 MacOS 上清除/刷新 DNS 缓存 根据你所运行的版本,在 MacOS 中刷新缓存的命令略有不同。...Web 浏览器都有一个内置的 DNS 客户端,以防止每次访问该网站时重复查询。...谷歌浏览器 Chrome 要清除 Google Chrome 的 DNS 缓存,请执行以下步骤: 打开一个新标签,然后在地址栏输入 chrome://net-internals/#dnsChrome。...如果那对你不起作用,请尝试清除缓存和 Cookie。 按下 CTRL+Shift+Del 以打开 “清除浏览数据” 对话框窗口。 选择一个时间范围。选择 “所有时间” 以删除所有内容。...如果这对你不起作用,请尝试以下方法并暂时禁用 DNS 缓存。 打开一个新标签,然后在 Firefox 的地址栏中输入 about:config 。

    46.2K20

    进阶|用前端webAR自己做个pokemon Go,想想也是很帅

    由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下: 02 WebAR WebAR说白了就是通过web端的技术能力去实现AR的效果!...▷getUserMedia getUserMedia主要用于获取视频和音频信息 ▷RTCPeerConnection 用于浏览器之间的数据交换。...最终数据展示,Android设备下,有99.45%的设备在微信是支持getUserMedia()的,98.05%的设备在手Q是支持getUserMedia()的。...2015年底前,也就是chrome47版本前,chrome是支持http页面拉起摄像头的,出于安全问题考虑,chrome47版本后只支持https页面拉起摄像头。...06 实现步骤 目前我的demo的实现步骤如下: ▷通过WebRTC的API来实现获取通过浏览器网页拉起摄像头操作 ▷获取摄像头的数据流 当成功呼起摄像头时,会触发success的回调,在回调中我们可以获取摄像头的数据流

    41410

    HTML5的这些api你知道吗?

    本文作者:IMWeb coverguo 原文出处:IMWeb社区 未经同意,禁止转载 以下是之前学习的一些HTML5 API的总结,在HTML5中有许多功能和接口很值得我们去了解和学习。...在最小化浏览器、切换tap页面时生效.(如需对app中几个webview进行切换操作时,可使用pageVisibility接口进行相应的事件监听和处理。)...-- 正常正确情况下,使用video等元素,我们是需要在确认客户端是支持该元素时才 回相应地用js创建这些元素,但通过使用getUserMedia api, 我们即可在html中直接创建这些元素...的时, 我们可以同简单的方法将当前我们的video元素的src视频地址赋值给用户手机本地的video,然后通过video的play方法拉起本地video的启动和连接。...所以我们需要一个方法去获取系统的信息,app有一些过程是`十分耗电的,然后我们就需要在用户启动时给用户一些警告信息告诉用户当前设备电量较低。

    88270

    自动化-Appium-第一个Demo-Web(Java版)

    上,这个关键字的值必须是使用`instruments -s devices`得到的可使用的设备名称之一 // 在Android上,这个关键字目前不起作用...上,这个关键字的值必须是使用`instruments -s devices`得到的可使用的设备名称之一 // 在Android上,这个关键字目前不起作用...的真机里,打开要操作的Chrome浏览器,本章示例为已经在真机安装完成的Chrome浏览器,之后打开百度首页,此时在PC的Chrome浏览器中可以看到百度首页的访问链接,如图所示,真机里的Chrome浏览器版本号为...上,这个关键字的值必须是使用`instruments -s devices`得到的可使用的设备名称之一 // 在Android上,这个关键字目前不起作用...上,这个关键字的值必须是使用`instruments -s devices`得到的可使用的设备名称之一 // 在Android上,这个关键字目前不起作用

    2.2K10
    领券