关于使用通过ip访问网站无法使用多媒体,MediaDevices.getUserMedia()为undefined的解决方案--(亲测可用)。

遇到问题我们首先要搞明白为什么。
当web前端通过vidoe+canvas+MediaDevices.getUserMedia()的方式调用本地多媒体设备(不局限于摄像头)时。存在一个安全问题,为了用户的隐私安全,http协议无法使用多媒体设备。
因为像摄像头和麦克风属于可能涉及重大隐私问题的API,getUserMedia()的规范提出了浏览器必须满足一系列隐私和安全要求。这个方法功能很强大,只能在安全的上下文中使用,在不安全的环境中为undefined。安全上下文就是使用HTTPS、file:///url方案加载的页面,或者是开发者本地测试使用localhost/127.0.0.1的情况下才能使用多媒体设备。

这下咱们明白了问题所在,就是说我们想要通过ip访问多媒体设备,要么修改成https协议,要么就file:///url(文件下载我没用到,不做过多赘述)。但是修改成Https协议存在一个问题,证书的问题,还有就是一般情况下外网配个域名才采用https协议。就比如博主目前做的项目是跑在内网的,直接使用ip是最方便的。

所以在这我介绍一种使用谷歌浏览器就可以解决通过ip无法使用摄像头等多媒体设备的问题。把项目修改成https协议我也试了,是通过下面这篇博客的做法操作的,如果有感兴趣的小伙伴,可以试试,方式很简单,需要注意的是生成的证书只有两个月,是个假证书,而且在你进入网站的时候会提示你不安全的网站。
链接传送门:springboot项目改造成HTTPS协议
如果想要使用永久免费并且安全认证的证书,可以看这篇博客:服务器配置https协议,三种免费的方法
这种免费的方式博主由于时间缘故还没有试,但肯定可行,等以后有时间自己亲测一下,整理出来。

废话不多说,开始介绍如何使用谷歌浏览器通过IP访问多媒体设备。

其实很简单,就是让谷歌浏览器开放某个地址的权限,做法如下:

1 打开谷歌浏览器,在地址栏输入:
chrome://flags/#unsafely-treat-insecure-origin-as-secure
在这里插入图片描述

2 按回车键,配置如下信息。多个地址用逗号隔开
在这里插入图片描述
在这里插入图片描述

默认情况下浏览器打开的摄像头是前置摄像头,当需要使用后置摄像头或者外设摄像头的时候需要修改浏览器的配置。操作步骤如下:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
如果想要切换摄像头,只需要修改浏览器的摄像头配置即可。

  • 10
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
navigator.mediaDevices.getUserMedia()方法用于调用设备的摄像头和麦克风。然而,由于不同浏览器的兼容性问题,可能会导致该方法在某些浏览器无法正常工作。以下是解决navigator.mediaDevices.getUserMedia兼容问题的方法: 1. 检查浏览器兼容性:在调用navigator.mediaDevices.getUserMedia()之前,可以使用以下代码检查浏览器是否支持该方法: ```javascript if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { // 浏览器支持getUserMedia方法 } else { // 浏览器不支持getUserMedia方法 } ``` 2. 使用适配器库:为了解决不同浏览器之间的兼容性问题,可以使用适配器库,例如webrtc-adapter库。该库可以自动处理不同浏览器之间的差异,使得navigator.mediaDevices.getUserMedia()方法在所有浏览器中都能正常工作。你可以通过以下步骤使用webrtc-adapter库: a. 在HTML文件中引入webrtc-adapter库的脚本: ```html <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script> ``` b. 在调用navigator.mediaDevices.getUserMedia()之前,不需要进行任何其他更改。 3. 检查设备权限:在某些情况下,navigator.mediaDevices.getUserMedia()方法可能无法正常工作是因为用户未授予访问摄像头和麦克风的权限。在调用该方法之前,可以使用以下代码检查用户是否已授予相应的权限: ```javascript navigator.permissions.query({ name: 'camera' }).then((permissionStatus) => { if (permissionStatus.state === 'granted') { // 用户已授予摄像头权限 } else { // 用户未授予摄像头权限 } }); ``` 如果用户未授予相应的权限,你可以提示用户授予权限或提供其他解决方案
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值