关于使用通过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

 

 

 

https://download.csdn.net/download/qq_39070698/10566294?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7Edefault-1.opensearchhbase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-download-2%7Edefault%7ECTRLIST%7Edefault-1.opensearchhbase


2 按回车键,配置如下信息。多个地址用逗号隔开

 

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

 

 

如果想要切换摄像头,只需要修改浏览器的摄像头配置即可。

posted @   张达嘛  阅读(843)  评论(1编辑  收藏  举报
编辑推荐:
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现
· 【杂谈】分布式事务——高大上的无用知识?
点击右上角即可分享
微信分享提示