JXMChange-CSDN博客

原创 Realm

realm对象不能再使用useRealm()创建，只能使用new Realm(config)，但是这样会报错：已经存在schemaVersion，将config的schemaVersion属性改一下即可，然后用nodejs的语法查找对象。有关Realm使用过程中的一些踩坑记录。建模、配置Realm。

2024-02-28 10:30:39 352

1. 引言1.1 编写目的记录父组件与子组件的交互1.2 背景介绍父组件与子组件的交互包括四方面：1）父组件向子组件传值；2）父组件向子组件传递方法；3）子组件向父组件传值；4）子组件向父组件传递方法；1.3 适用范围开发人员。1.4 参考资料vue笔记（vue父组件和子组件的交互）子组件中更新props中的属性值，并且更新到父组件2. 父组件向子组件传值父组件向子组件传值：父组件在引用子组件的时候，通过属性绑定(v-bind)的形式，把数据传给传递给子组件<t

2021-10-25 18:33:10 433

原创 ant-design-vue注意事项

a-form-model失去焦点立即表单验证Form.Item 会对唯一子元素进行劫持，并监听 blur 和 change 事件，来达到自动校验的目的，所以要确保表单域没有其它元素包裹。如果有多个子元素，将只会监听第一个子元素的变化，可以通过如下方式验证：<a-form-model labelAlign="left" :label-col="labelCol" :wrapper-col="wrapperCol" :model="scheduleMeetingForm" :rul

2021-09-29 09:59:22 1399

原创 van-dialog：“确认”验证失败时阻止对话框的关闭

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

2021-07-12 18:30:57 5171 4

原创使用Clipboard复制文本（Vue）

问题（Clipboard异步复制）在setTimeout定时器中复制时第一次既没有调用success回调也没有调用error回调？？？再次复制，成功

2021-07-12 18:15:55 1532

原创媒体设备的打开、关闭以及切换

媒体设备的打开、关闭以及切换1. 设备的打开/关闭1.1 关闭1.2 打开2. 设备的切换在项目初期，设备的打开/关闭和切换仅仅是切换了track的enabled属性，比没有释放资源，即原来的设备一直被占用着，显然这十分不友好，因此后面进行了改版。1. 设备的打开/关闭1.1 关闭关闭时，调用track.stop()停止轨道，并将轨道清空1.2 打开打开时，重新调用getUserMedia()，用新产生的stream的track替换原来的。注意只是替换轨道，不能直接替换stream，因为st

2021-05-25 15:08:37 1354

原创双层路由模式的tab栏嵌套

双层路由模式的tab栏嵌套项目中有同一页面有两层tab栏，且都要采用路由模式，即url必须和TabItem相关联，例如：下面是第一层tab，当前url地址为：https://…/home，“首页"要被选中；这是两层tab的情况，地址栏中输入url：https://…/setting/user，不仅第一层中“设置”要被选中，第二层中“个人资料”也要选中；同时，只要切换TabItem，url也要相应改变下面是最外层tab的主要代码，用的是ant-design-vue组件库，其他组件

2021-04-19 16:36:08 545

原创路由导航守卫

路由导航守卫// 访问特定页面需要路由导航守卫router.beforeEach((to, from, next) => { // 关闭设置——视频设置中打开的摄像头 if (from.path == "/setting/video") { if (window.stream) { window.stream.getTracks().forEach(track => { track.stop(); }); } } i

2021-03-31 20:07:14 103

原创 Vue同一项目适配不同平台（PC端和移动端）

同一项目适配不同平台，包括PC端和移动端PC端项目做完之后，就要开发移动端了，由于项目较复杂，且PC和移动端仅有界面不一样，数据和要实现的功能都是一样的，所以需要在同一个项目中做适配。同一项目PC端和移动端适配有两种方案：路由适配路由适配就是在路由导航守卫中判断设备，然后根据设备进入不同的程序入口，但是这种方案有一个缺点，我在PC端输入移动端的地址会怎样？不能进入移动端的页面，所以还要根据设备针对另一平台做路由拦截。路由适配可以参考下面这篇博客： https://blog.csdn

2021-03-26 19:46:23 10817

原创 js获取浏览器版本

js获取浏览器版本返回值格式如“chrome 88.0.4324.190”，浏览器包括IE、OLD_IE、Edge、firefox、Opera、Safari、QQ、火狐、微信。Chrome，其他未涉及到的可以根据“agent”字段自定义，需要注意的一点是，一个浏览器的userAgent有多个类型，例如QQ和火狐都包括chrome，所以需要注意研究下userAgent做判断function getBrowserInfo() { let agent = navigator.userAgent.toLow

2021-03-19 17:17:13 903

原创关于webRTC的SDP格式（RTCConfiguration中的sdp_semantics）

webRTC的SDP格式，RTCConfiguration中的sdp_semantics当我尝试用QQ浏览器和其它浏览器通讯时，报错如下：查询资料得知，在web端，sdp_semantics有两个值，分别是“plan-b”和“unified-plan”，webRTC1.0规范要求的是“unified-plan”，Chrome71还是使用的“plan-b”，但是Chrome72就已经改成“unified-plan”，因此现在大多数浏览器都是使用的“unified-plan”，火狐更是推荐使用“unifi

2021-03-19 16:52:59 1570

原创 navigator.mediaDevices.enumerateDevices()的兼容性问题

navigator.mediaDevices.enumerateDevices方法的兼容性问题经测试发现，除谷歌浏览器和现在使用Chromium内核的Microsoft Edge浏览器外，enumerateDevices()方法存在一些兼容性问题。首先，如果不先获取媒体权限，用enumerateDevices()获取到的设备列表中label为空，即无法识别设备名字。这个考虑有两种方案解决： a）在调用enumerateDevices()时，对于label为空的情况手动定义设备名字，在进入会议调

2021-03-18 11:10:35 5735

原创浏览器报错 ../js/template-web.js net::ERR_ABORTED 404 (Not Found)

浏览器报错：ERR_ABORTED 404 今天在项目的HTML文件中引入template.js<script type="text/javascript" src="../common/js/template-web.js"></script>项目中的引入路径没有问题，但是浏览器运行时报404错误，后面改用命令行npm install art-template --save，先下载art-template，然后再引入node_module中的文件解决<script

2021-03-16 17:17:57 392

原创 JQuery点击按钮显示更多列表

JQuery显示更多1. 初始显示3条2. 点击显示/隐藏剩余的所有元素3. 点击显示更多，陆续增加列表JQuery点击按钮显示更多列表，从静态到动态，（后续再补充分页）1. 初始显示3条下面是初始加载效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi

2021-03-16 14:54:43 968

原创 P2P连接

P2P连接1. pc.addTrack和pc.onTrack补充一下P2P连接相关的问题1. pc.addTrack和pc.onTrack本地A在addTrack成功之后远端B会自动触发onTrack监听事件，而onTrack并不只是触发一次，它触发的次数跟addTrack的次数有关，一般在调用pc.addTrack(track,stream)时会把stream中对应的轨道都添加进来，所以可能会onTrack多次，例如：// stream中包含两条track，分别是videoTrack和audioT

2021-03-15 11:51:07 1181

原创 video随浏览器窗口变化而缩放（保证宽高比，且video左下角有文字不错位）

video随浏览器窗口变化而缩放（保证宽高比，且video左下角有文字不错位）1. video原始宽高，默认锁定宽高比2. video设置fill填充，宽高随div3. video默认锁定宽高比，宽高随div4. video默认锁定宽高比，div不设置宽高随video今天多人视频布局时有涉及到这个需求，要实现下面的效果，浏览器窗口变化时要求整体锁定比例一起缩放：纯CSS我没有实现，但还是总结一下，包括下面四种情况：1. video原始宽高，默认锁定宽高比<!DOCTYPE html>

2021-03-11 20:21:32 4981

原创项目中WebRTC待解问题

WebRTC待解问题1、获取媒体设备的浏览器兼容问题1、获取媒体设备的浏览器兼容问题在调用getUserMedia()开启摄像头之前需要调用navigator.mediaDevices.enumerateDevices()获取设备列表，谷歌浏览器外的大部分浏览器只有在获取媒体权限后才能读取设备列表中的label，也就是要先调用navigator.mediaDevices.getUserMedia()询问用户是否允许访问摄像头/麦克风，但是在这里（页面1）有几个问题：1、我仅仅想获取设备列表而已，不需要

2021-02-23 19:43:23 457 1

原创 js按下回车键调用方法

js按下回车键调用方法下面有两种方法，要注意键盘上有两个“Enter”键，方法1对于数字区域的“Enter”键无效。1、方法一： // mounted或created中都可 mounted: function () { // 页面加载自动获取焦点 let inputRoomId = document.getElementById("roomId"); inputRoomId.focus(); var _that=this; document.onkeydo

2021-02-23 19:34:30 3373

原创 js文件中使用Vue组件定义的方法

js文件中使用Vue组件定义的方法在created或mounted钩子函数中将methods里面定义的方法, 赋值给window，以便外部js调用，例如：methods: { callCamera () { ...... }},created(){ window.callCamera = this.callCamera;}js中调用：callCamera();...

2021-02-22 19:00:06 1060

原创 js创建audioTrack和videoTrack并绑定到stream上

js创建audioTrack和videoTrack并绑定到stream上1. 创建audioTrack1.1 从video元素获取audioTrack/videoTrack1.2 利用WebRTC的Audio API创建audioTrack2. 创建videoTrack2.1 从video元素获取audioTrack/videoTrack2.2 从canvas元素上获取3. 创建空的stream，并绑定track最近用webRTC做P2P音视频通讯时，开始是在getUserMedia()成功调用后的回调函

2021-02-22 18:49:48 1785 2

原创音频检测和视频检测

音频检测和视频检测1. 音频检测1.1 获取设备功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入1. 音频检测选择扬声器和麦克风设备，对它们进行输出等级（实时音量）检测及音量调节。1.1 获取设备我们对Markdown编

2020-11-27 10:50:40 1714 3

qq_37800258的博客