遇到问题我们首先要搞明白为什么。
当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 按回车键,配置如下信息。多个地址用逗号隔开
在这里插入图片描述
在这里插入图片描述

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

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

 

转载 https://blog.csdn.net/weixin_45408862/article/details/107865462?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param