- 博客(142)
- 收藏
- 关注
RSS订阅原创 【pwa】如何在chrome浏览器地址配置添加到主屏
添加到主屏幕（或简称 A2HS）是现代浏览器中提供的一项功能，允许用户“安装”网络应用程序，即。在他们的主屏幕上添加一个代表他们最喜欢的网络应用程序（或网站）的快捷方式，以便他们随后可以通过单击访问它。本指南解释了 A2HS 的使用方式，以及作为开发人员您需要做什么才能让您的用户利用它。...
2022-06-23 17:08:17
842
1
原创 husky、lint-staged, commit 不起作用原因排查
背景说明husky 版本 1.3.1如果成功应该是以下情况；package.json 这里就不多说了，按照约定配置就行了"husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "src/**/*.{js,vue}": [ "node -v", "prettier --write", "eslint --cache --fix" ] },
2021-11-19 10:15:42
4424
原创 webgl系列学习笔记-绘制绘制多边形
一个月又过去了，今天下班早有点时间，复习一下；这次要绘制一个长方形；今天主要接触的知识点；gl.createBuffer() 创建缓冲区 所对应的有 gl.deleteBuffer(buffer);gl.bindBuffer(target, buffer) 将缓冲区对象绑定到目标上target:gl.ARRAY_BUFFER 包含定点数据gl.ELEMENT_ 包含定点索引值gl.bufferData(target, data, usage) 向缓冲区域写
2021-10-20 22:59:47
359
原创 webgl系列学习笔记-初探
迟到的webgl学习，未来总是那么破朔迷离，唯有学习知识才能让你感觉踏实，回头看看昨天感叹下；整理的几点顶点着色器 x-shader/x-vertex片段着色器 x-shader/x-fragment着色器变量声明获取着色器变量更改着色器变量顶点着色器一开始可能需要知道的一些概念， 如果没有做过gl，opengl可能一下子也无法立刻这个是干什么的<script type='x-shader/x-vertex' id='shader-vs'> attribute vec4
2021-09-08 23:17:34
491
原创 【笔记】gitlab-ci 文件增加判断语句的方式
环境比较多，根据分支名判断部署的位置，减少编写代码量注意点：判断语句中变量不要带引号""判断语句中 中括号 两边内部要有空格；build_test: stage: deploy script: - echo "$CI_COMMIT_REF_NAME" - | if [ $CI_COMMIT_REF_NAME == "dev" ]; then node -v else echo "123" fi
2021-08-18 13:05:58
2430
原创 FullCalendar 5.7.x 学习笔记-timeGridWeek视图
如果有类似课程表、或者会议安排等类似的需求可能会用到；FullCalendar 版本 5.7.x timeGridWeek视图const calendarEl = document.getElementById('fullcalendar');const calendar = new FullCalendar.Calendar(calendarEl, options)calendar.render()options设置时间区间slotMinTime: '06:00';slotMaxT
2021-06-15 20:26:46
1265
原创 【抖音】定格传送带
周末快乐、各位；今天有刷抖音了，看到了抖音的【定格传送带】，又复习下动手实践了下，跟以前的多帧延迟思路差不多；直接贴代码了(function(){ var cs = document.querySelector('canvas') var ctx = cs.getContext('2d') var vd = document.getElementById('vd') var req; var step = 4; var heightstep = 0; var
2021-05-23 20:55:04
792
原创 [qiankun]微前端踩坑日记
5月17日Error in event handler for "updatePopper": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'出现情况在是自已用在使用 el-select Tooltip 等组件时候会报错原因解决方法严格模式设置成false就可以strictStyleIsolation: false...
2021-05-17 20:03:34
1315
3
原创 [qiankun] 微前端实践（一）
新的项目新的开始，为了避免后期冗余，这次就花了些时间学习了下，其实中间没怎么发现什么坑，如果非说一个 那就是 主应用和子应用的路由 这块绕了一点，有可能场景比较简单吧；这边主应用是用了 vue element admin 的模板 其实主要是 用左侧的菜单栏部分；在layout 声明 挂载的 dom节点，剩下的只是配置路由部分，如下：children 部分不需要组件{ path: '/test', name: 'testname', component: Layout,
2021-04-27 21:05:55
262
原创 plugin hooks触发类型和方法
开发过webpack plugin 的同学应该都知道，这里仅做笔记分享了阅读前最好对tapable先简单了解下；其实不管是 compiler还是 compilation类型同步钩子SyncBailHook 执行过程中注册的回调返回非 undefined 时就停止不在执行。SyncHook 钩子SyncWaterfallHook 接受至少一个参数，上一个注册的回调返回值会作为下一个注册的回调的参数。SyncLoopHook 有点类似 SyncBailHook，但是是在执行过程中回调返回非
2021-04-16 13:12:14
395
原创 windows 下可执行node处理 对比记录
mac#!/usr/bin/env nodeconst { program } = require('commander');program .description('An application for pizza ordering') .option('-p, --peppers', 'Add peppers') .option('-c, --cheese <type>', 'Add the specified type of cheese', 'marble')
2021-04-09 12:42:03
136
转载 什么是 CSRF 攻击
CSRF 英文全称是 Cross-site request forgery，所以又称为“跨站请求伪造”，是指黑客引诱用户打开黑客的网站，在黑客的网站中，利用用户的登录状态发起的跨站请求。简单来讲，CSRF 攻击就是黑客利用了用户的登录状态，并通过第三方的站点来做一些坏事通常当用户打开了黑客的页面后，黑客有三种方式去实施 CSRF 攻击。下面我们以极客时间官网为例子，来分析这三种攻击方式都是怎么实施的。这里假设极客时间具有转账功能，可以通过 POST 或 Get 来实现转账，转账接口如下所示：有了上面的
2021-03-28 17:17:58
37099
10
转载 为什么要改变this指向？bind,call,apply如何改变指向
我们知道bind，call，apply的作用都是用来改变this指向的，那为什么要改变this指向呢？请看下面的例子:var name="lucy";let obj={ name:"martin", say:function () { console.log(this.name); }};obj.say(); //martin，this指向obj对象setTimeout(obj.say,0); //lucy，this指向window对象可以观察到，正常情况下 say 方法中的 thi
2021-03-27 15:19:41
1316
原创 【reactjs】requestIdleCallback 和 requestAnimationFrame对比
react 16 以后 引入了Fiber，对核心算法进行重构，花一些时间来学习研究下，还是蛮有收获的。大家都知道requestAnimationFrame，在canvas绘制动画方面使用较多，前面应该也对比过requestAnimationFrame 和 setTimeout (setInterval) ，requestAnimationFrame一些性能优化点，比如说 窗口失去焦点后的区别；
2021-03-23 18:06:22
737
原创 mediasoup学习笔记 Server端【一】
前面已介绍过我学习client端笔记，最近也有些时间，回过头再梳理下Server端学习笔记这里就按照官方的demo的代码来一步一步梳理学习。https://github.com/versatica/mediasoup-demo/tree/v3/server乍一看代码结构还挺多的其实主要关注以下几个文件，就可以实现mediasoup的服务端的功能；config[.example].jsserver.jslib/Room.js下面一个一个来说明；config.js这里主要配置的 证书
2021-03-14 14:14:36
813
原创 【小程序】小程序展示公众号最新文章调整
大家应该知道个人的小程序是不支持webview，前段时间在开发者社区发现如果是公众号的文章地址是可以正常展示的，随机动手调整功能。获取access_token获取永久素材列表获取ACCESS_TOKENhttps请求方式: GEThttps://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET获取永久素材地址http请求方式: POST ht
2021-03-11 10:28:15
338
原创 【ffmpeg】ffmpeg如何设置header信息亲测
从网上搜了一些文章，各式各样的都有，也不知道是不是有效，大部分都是设置ua或者其他某一项的，但是有时候有需要设置多项，这时候就区分不出来那个是正确的那个是错误的，整理下记录下来了，避免后期踩坑我本地的ffmpegffmpeg version 3.3.2 Copyright (c) 2000-2017 the FFmpeg developers正确写法ffmpeg -user_agent "User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10
2021-02-28 11:32:23
5434
1
转载 【小程序】微信小程序分享功能onShareAppMessage(options)
在页面的js文件中定义了 onShareAppMessage 函数时，页面可以表示改页面可以转发。可以在函数中设置页面转发的信息。只有定义了该函数，小程序右上角的菜单中才会有转发按钮用户点击转发按钮的时候回调用该函数该函数内需要 return 一个 Object，Object中包含转发的信息（可自定义转发的内容）页面中有可以触发转发时间的地方有两个：一个是右上角菜单中的转发按钮 另一个是页面中具有属性open-type且其值为share的button。（注：必须是button组
2021-02-28 10:37:28
33498
原创 Adb 常用命令收集整理
adb server启动和连接启动adb start-server//指定端口adb -P <port> start-server 停止adb kill-serverADB Client通过命令adb connect ip连接远程的终端adb connect 127.0.0.1:7555控制手机重启adb reboot安装apkadb install app.apkadb install -r app.apk卸载apkadb un
2021-02-07 14:29:49
182
原创 [小程序]小程序破千重拾起来（1）
差不多一个月没有更新了，周末闲来无事，翻箱倒柜，其实就在清理自己的电脑，删除多余的文件，突然，就在自己雪藏的目录里面发现了已经落灰的文件， …这个小程序做了有很久很久…，上线发了几版之后就没有更新过，今天瞅了一眼居然破3千了，同时也发现了一些调用第三方的接口报错了，于是就静下心来，泡了一杯枸杞，认真的开始看手机，呃…不，认真的分析下下一步的计划，要重拾起来，就开始分析 这个小程序受众人群？因为一开始做的时候，只是为了家里的孩子，偶尔看一看，同时也体验下小程序的开发，当时没什么目的就匆匆忙忙的搞起
2021-01-25 09:14:39
151
原创 mediasoupClient 学习笔记 【四】 Consumer 数据消费者
前面已经介绍过Producer，今天来聊下Consumer, 正式进入之前要说下，Producer和Consumer这里并不是指的用户，同一个用户即可以是创建消费者，又可以创建生产者，举个例子就那微信语音聊天，两个人都可以说话同时也可以听到对方说的话。这里是需要转换下思路。值得注意的另外一点，信令服务在整个官方demo中，只承担了数据的传输，跟transport也不要混淆，整体流程、过程 （过程只列举重要的环节）（生产者方）客户端初始化（生产者方）创建transport; createSe
2020-12-22 23:25:38
1384
1
原创 数学教具功能beta版本开发
相关了解：jCanvas防止注入MediaRecord 动画日志收集废话不多说先贴成品抖音上有很多类似下图的情况，所以就突发奇想，想做一个简单的工具，目前还是初版，功能很简单；方便教学场景的使用工具，目前只支持 绘制矩形、圆形、直线、文字，支持动画过渡体验地址： https://ibeeger.com/math/体验地址中案例写的比较简单，凑合看了~~~~使用文档说明绘制矩形：rect(x,y, width,height)绘制圆形：circle(r, x, y)绘制直线
2020-10-29 20:19:49
195
4
原创 抖音蓝线挑战web前端实现方案
前面已经发过一篇，抖音「延迟像素格」的实现思路今天又来蹭热度了，最近的抖音「蓝线挑战」的道具使用人数多起来， 什么发际线了，光头效果了，曲线眉毛了等等等等，有点意思，想了想前端应该也可以实现，今天这篇文章就整理下。方案构思采集视频根据视频分辨率，设置绘制区域，保持统一随着时间推移绘制视频指定区域一部分绘制图片，一部分绘制视频添加辅助线整体绘制结束这里要注意的是绘制成图片的位置，第二次就不再绘制该坐标区域采集区域和绘制区域保持一致，视频尺寸和画布尺寸保持一致。第一次：采集视频位置
2020-10-19 11:04:32
3175
1
原创 【python】多线程获取数据渲染折线图笔记整理
文章整个流程通过神策api获取数据，生成折线趋势图，业务功能和简单，matplotlibrequeststhreading获取数据def getData(start, end): sql = "select count(distinct(stu_id)) as num, date from events where "+_os+" date between '"+start+"' and '"+end+"' and business='ai' group by date order
2020-10-13 16:37:02
333
原创 webrtc 学习 传输速率的控制【四】
前面了解了RTCPeerConnection(null) 相关的知识，这里就不再回忆了，var local = new RTCPeerConnection(null);
2020-09-02 22:18:16
525
原创 turn服务搭建记录
webrtc服务如果只是局域网内测试，可以不需要这个，但如果要放在外网就需要搭建 turn服务，今天在服务器上就尝试搭建了一下ubuntu14.04sudo apt-get install libssl-devsudo apt-get install libevent-devsudo apt-get install libpq-devsudo apt-get install mysql-clientsudo apt-get install libmysqlclient-devsudo
2020-08-18 19:24:43
1174
2
原创 前端常见各种解码编码整理-v1
encodeURI/encodeURIComponent, decodeURI/decodeURIComponent至于这两个有什么区别，可以自行了解这里就不说了；编码encodeURI('汉字') // "%E6%B1%89%E5%AD%97"解码decodeURI("%E6%B1%89%E5%AD%97")//汉字base64 编解码编码 btoa(string);btoa('汉字') //提示超出Latin1， 不能直接这样使用需要 encodeURI btoa
2020-08-05 14:05:59
3748
原创 mediasoup 学习笔记 【二】Router 房间
上一篇worker简单的介绍了基础原理，今天聊下mediasoup Router，单纯从字面上理解就是地址路径，其实大家可以理解成房间的意思。这里主要有一个参数，mediaCodecs 媒体编解码器，包括音视频解码的参数设置。const mediaCodecs =[ { kind : "audio", mimeType : "audio/opus",...
2020-08-05 10:08:18
1319
原创 SPA绕坑指南，聊聊你也许会遇到的问题
在进入正题之前，敲下黑板，不同的浏览器对同域限制并发数量是不一样的，这也是为什么大厂都有很多不同的域名去加载资源，拿chrome浏览器来说这张图应该一目了然，同域的资源最多同时请求一定数量（6），知道这个前提，就开始进入正题SPA作为前端一员应该熟悉不过了，对前后端的分离有着重大意义。这里要说的，当你的 pwa 项目中路由过多，每个route下查询的数据也比较多，当你快速切换route的时候，就有可能出现上述说的问题，会阻塞你的连接。当然如果你的服务响应很快，从用户获取结果上没有任何问题，
2020-07-17 17:45:25
914
原创 纯前端技术裁切合并音频方式实现
随着5G时代的来临，音视频的领域的必将嫌弃新的浪潮，只有不断的学习才能跟的上步伐，吧啦吧啦....好吧前面真的编不下去了~~~，快速进入正题，这篇文章主要介绍的功能1、选择本地音频文件 （多段）2、选择音频区间播放 （多段）3、合并audiobuffer4、下载编辑后的音频整体例子功能比较单一，不过后面可以思考视频是否可以沿用方式，拼接多段，可以肯定的应该能提取视频的声音，视频画面部分没有尝试，目前只测试了音频功能正常； 注意这个是纯前端的技术并不是把音频文件上传到服务端 用 ffmpeg方
2020-06-21 11:17:55
2886
20
原创 轮询不得不考虑的异常 close 事件侦听
最近想在服务端做个功能，用到了 长轮询， 不管是用eggjs 、 expressjs, 在开发过程中不断的会发现一些未处理的异常抛出。errno: "ECONNRESET"code: "ECONNRESET"syscall: "read"最后发现 原来长连接未侦听 close 的事件， 流程大概是这样的1、用户建立请求 pending状态2、服务端 emit 事件 用于执行特定任务3、执行完成 或者 时间到了， response 返回信息如果在 2 和3 的环节之间 用户 close
2020-06-01 18:16:12
408
原创 [python] ModuleNotFoundError: No module named 问题解决
作为一个python小白， 有时候明明安装了 某些packagepip3 install numpypip3 install opencv-python等等但仍然报错：ModuleNotFoundError: No module named解决方案：1、全局安装方式 sudo -H python3 -m pip install opencv-python资源镜像站：新版ubuntu要求使用https源，要注意。清华：https://pypi.tuna.tsinghua.edu.cn
2020-05-25 17:47:13
7596
原创 rtmp 调研整理
涉及技术点nginxffmpegrtmp 协议webrtcWCS服务器其实整体来说可能跟 mediasoup 没有太多紧密联系（站在bs结构）h5的方式没有办法直接推流到 rtmp地址，下面一点一点来总结整理。nginx 方面这里研究了 nginx 搭建rtmp， 安装nginx 需要 --with-rtmp-module，安装成功之后配置rtmp服务，rtmp { ...
2020-05-08 16:38:39
322
原创 rabbitmq 学习笔记 node环境
amqp 队列安装 rabbitmqbrew install rabbitmq;需要配置环境变量export AMQP_HOME=/usr/local/Cellar/rabbitmq/3.8.3/sbinexport PATH="${AMQP_HOME}:${PATH}"rabbitmq-defaults rabbitmq-plugins rabbitmq-upg...
2020-04-12 19:14:06
479
原创 【flutter】区分开发和生产环境的区分方式-笔记
最近 flutter module 模块开发，引用到iOS 和 android 项目中去。如果纯开发的过程中，区分不区分可能无关紧要，但是进入本地测试联调可能就比较麻烦，每次打包的时候有可能会漏恢复，这就迫切的区分环境。这里只拿vscode来说.vscode/launch.jsonlib/main_dev.dart 克隆一份出来launch.json "configurations...
2020-03-30 19:55:35
2096
原创 【flutter】httpClient 笔记整理
get请求还比较简单，主要是post 请求，请求添加bodyget请求var httpClient = new HttpClient(); var uri = Uri.parse('https://xym.ibeeger.com/api/article/list'); var request = await httpClient.getUrl(uri); var response =...
2020-03-17 10:38:26
296
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人