Category Archives: Frontend

调用摄像头拍照chrome浏览器报Cannot read properties of undefined (reading 'getUserMedia')

一、背景： 项目中使用电脑摄像头拍照，调用navigator.mediaDevices方法，在本地正常，测试环境和生产环境报错。 二、原因： navigator.mediaDevices在目前以下情况中可以获取到 1.地址为localhost://访问 2.协议为https 3.为文件访问file:/// 测试环境和生产环境使用的都是http协议，因此无法调用 三、解决方法 1.在chrome地址栏输入chrome://flags/#unsafely-treat-insecure-origin-as-secure 2.在Insecure origins treated as secure的输入框输入要打开网页的地址如http://xx.xx.xx:8080 3.把右边的Disnabled改成Enabled 4.点右下角的Relaunch   转自于：https://hepuhua.cn/post/942.html#   from:https://www.cnblogs.com/Ao-min/p/18644211

检查您的手机浏览器是否支持WebRTC技术

要检查您的手机浏览器是否支持WebRTC技术，可以通过以下方法： 方法1：使用WebRTC测试网站 访问测试网站： 在手机浏览器中，访问一个专门用于检测WebRTC支持的网站，例如Test WebRTC或WebRTC Troubleshooter. 这些网站会自动检测您的浏览器是否支持WebRTC，并给出相应的反馈。 查看测试结果： 网站会显示一系列测试结果，您可以查看是否所有的WebRTC相关功能都通过了测试。 方法2：手动检查浏览器设置 查看浏览器信息： 在浏览器的设置或帮助部分，查看浏览器的版本信息。通常，最新版本的主流浏览器（如Chrome, Safari, Firefox）都支持WebRTC。 更新浏览器： 如果您的浏览器不是最新版本，尝试更新到最新版。最新版本的浏览器更有可能支持WebRTC。 方法3：查找浏览器支持信息 在线查找： 在线搜索您手机上使用的浏览器名称以及“WebRTC support”，查看是否有关于该浏览器支持WebRTC的信息。 通过上述方法，您可以确认您的手机浏览器是否支持WebRTC。大多数现代浏览器都支持WebRTC，但如果发现您的浏览器不支持，可以考虑换用其他浏览器进行尝试。   from:https://blog.csdn.net/qq_52754410/article/details/134753983

WebRTC + WebSocket 实现视频通话

　　WebRTC能让web应用和站点之间选择性地分享音视频流。在不安装其它应用和插件的情况下，完成点对点通信。 WebRTC背后的技术被实现为一个开放的Web标准，并在所有主要浏览器中均以常规JavaScript API的形式提供。对于客户端（例如Android和iOS），可以使用提供相同功能的库。 WebRTC是个开源项目，得到Google，Apple，Microsoft和Mozilla等等公司的支持。2011年6月1日开源并在Google、Mozilla、Opera支持下被纳入万维网联盟的W3C推荐标准。

axios 设置超时时间 timeout

timeout: 3 * 60 * 1000,

Jquery Pagination分页插件使用

JqueryPagination是个简单轻量级的分页插件，使用起来很容易，只要初始化一个实例，并设置总数量、翻页回调函数、其它参数就可以实现无刷新分页功能了。

解决 VScode 每次打开都是上次打开的文件问题

打开设置，搜索window.restoreWindows，设置为none

Edge/Chrome浏览器强制将http转https的解决方案

Edge浏览器：edge://net-internals
Chrome浏览器：chrome://net-internals

35+前端UI组件库一览（按star数排名）

material ui-react pc
Ant Design pc
Element UI pc
Vuetify(vue-Material风格) pc
chakra-ui pc
quasar mobile/pc
Vant 有赞前端团队 mobile
Element Plus – Ele pc
Ant Design Vue pc
Mint UI（vue） mobile

2023年最流行的10款前端UI框架排名

前端UI框架是一种基于HTML、CSS、JavaScript等前端技术的开发工具集，提供了一系列的UI组件、样式、布局等基础功能，使得前端开发人员可以更加高效地开发出具有良好用户体验的Web应用。

在windows10安装使用fnm

1.在下面的目录新建profile.ps1文件
%USERPROFILE%\Documents\WindowsPowerShell\profile.ps1

WindowsPowerShell为新建的目录, 如果安装node后命令仍然无法识别，将文件夹名称改为PowerShell

2.将下面的代码写入到上面的配置文件里面
fnm env --use-on-cd | Out-String | Invoke-Expression