javascript
风不二
一个不正经的业余程序员
展开
-
【pwa】如何在chrome浏览器地址配置添加到主屏
添加到主屏幕(或简称 A2HS)是现代浏览器中提供的一项功能,允许用户“安装”网络应用程序,即。在他们的主屏幕上添加一个代表他们最喜欢的网络应用程序(或网站)的快捷方式,以便他们随后可以通过单击访问它。本指南解释了 A2HS 的使用方式,以及作为开发人员您需要做什么才能让您的用户利用它。...原创 2022-06-23 17:08:17 · 1004 阅读 · 1 评论 -
夏令时-前端要知道的知识
前端夏令时处理原创 2022-02-10 13:45:03 · 1343 阅读 · 0 评论 -
【抖音】定格传送带
周末快乐、各位;今天有刷抖音了,看到了抖音的【定格传送带】,又复习下动手实践了下,跟以前的多帧延迟思路差不多;直接贴代码了(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 · 836 阅读 · 0 评论 -
[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 · 1433 阅读 · 3 评论 -
[qiankun] 微前端实践(一)
新的项目新的开始,为了避免后期冗余,这次就花了些时间学习了下,其实中间没怎么发现什么坑,如果非说一个 那就是 主应用和子应用的路由 这块绕了一点,有可能场景比较简单吧;这边主应用是用了 vue element admin 的模板 其实主要是 用左侧的菜单栏部分;在layout 声明 挂载的 dom节点,剩下的只是配置路由部分,如下:children 部分不需要组件{ path: '/test', name: 'testname', component: Layout,原创 2021-04-27 21:05:55 · 287 阅读 · 0 评论 -
为什么要改变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 · 1408 阅读 · 0 评论 -
【reactjs】requestIdleCallback 和 requestAnimationFrame对比
react 16 以后 引入了Fiber,对核心算法进行重构,花一些时间来学习研究下,还是蛮有收获的。大家都知道requestAnimationFrame,在canvas绘制动画方面使用较多,前面应该也对比过requestAnimationFrame 和 setTimeout (setInterval) ,requestAnimationFrame一些性能优化点,比如说 窗口失去焦点后的区别;原创 2021-03-23 18:06:22 · 864 阅读 · 0 评论 -
数学教具功能beta版本开发
相关了解:jCanvas防止注入MediaRecord 动画日志收集废话不多说先贴成品抖音上有很多类似下图的情况,所以就突发奇想,想做一个简单的工具,目前还是初版,功能很简单;方便教学场景的使用工具,目前只支持 绘制矩形、圆形、直线、文字,支持动画过渡体验地址: https://ibeeger.com/math/体验地址中案例写的比较简单,凑合看了~~~~使用文档说明绘制矩形:rect(x,y, width,height)绘制圆形:circle(r, x, y)绘制直线原创 2020-10-29 20:19:49 · 232 阅读 · 4 评论 -
webrtc 学习 传输速率的控制【四】
前面了解了RTCPeerConnection(null) 相关的知识,这里就不再回忆了,var local = new RTCPeerConnection(null);原创 2020-09-02 22:18:16 · 611 阅读 · 0 评论 -
前端常见各种解码编码整理-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 · 3824 阅读 · 0 评论 -
SPA绕坑指南,聊聊你也许会遇到的问题
在进入正题之前,敲下黑板,不同的浏览器对同域限制并发数量是不一样的,这也是为什么大厂都有很多不同的域名去加载资源,拿chrome浏览器来说这张图应该一目了然,同域的资源最多同时请求一定数量(6),知道这个前提,就开始进入正题SPA作为前端一员应该熟悉不过了,对前后端的分离有着重大意义。这里要说的,当你的 pwa 项目中路由过多,每个route下查询的数据也比较多,当你快速切换route的时候,就有可能出现上述说的问题,会阻塞你的连接。当然如果你的服务响应很快,从用户获取结果上没有任何问题,原创 2020-07-17 17:45:25 · 950 阅读 · 0 评论 -
纯前端技术裁切合并音频方式实现
随着5G时代的来临,音视频的领域的必将嫌弃新的浪潮,只有不断的学习才能跟的上步伐,吧啦吧啦....好吧前面真的编不下去了~~~,快速进入正题,这篇文章主要介绍的功能1、选择本地音频文件 (多段)2、选择音频区间播放 (多段)3、合并audiobuffer4、下载编辑后的音频整体例子功能比较单一,不过后面可以思考视频是否可以沿用方式,拼接多段,可以肯定的应该能提取视频的声音,视频画面部分没有尝试,目前只测试了音频功能正常; 注意这个是纯前端的技术并不是把音频文件上传到服务端 用 ffmpeg方原创 2020-06-21 11:17:55 · 3040 阅读 · 20 评论 -
mediasoup 学习笔记,整体了解
疫情在家办公,一起学点东西吧,webrtc前面已经有一些基础api学习了以下,其实前面已经听说过这个,把demo跑起来之后也一直没时间看,这段时间可以安排到计划内了,进一步的了解。mediasoup 提供了一套简单方便的搭建一套即时音视频通话系统,上层提供nodejs接口,nodejser比较亲民。但是里面也包含了不少音视频媒体相关的一些知识,比如说 媒体编解码方面等等。这个官方文档确实很多...原创 2020-03-04 17:36:24 · 3493 阅读 · 1 评论 -
WebAssembly【四】加密解密应用场景
在以前一提到前端的加密、解密,可能感觉很鸡肋,因为web前端的代码完全暴露在用户侧,很容易破译或者阅读加、解迷的规则。所以一直以来一提到安全方面,大家不约而同的都想那是服务端的事情,不过现在 WebAssembly 可以让前端多少承担点安全方面的重任了。 不过因为请求的 wasm 文件,所有人都可以下载,也是有破译的风险,只不过难度增加了先说下 wasm 是什么样的文件,通过编译后生成的二进制...原创 2020-01-17 11:08:14 · 5019 阅读 · 0 评论 -
WebAssembly【三】store, load 学习
在web前端的场景里,好多情况下可能并不是简单的处理运算,大部分情况下会结合view、api等等结合使用,普通的运算可能提升不大,不太明显,但是对前端来说(canvas,webgl),在一个页面里面有非常多且非常大的数据运算,就不得不考虑cpu性能的优化。今天就拿canvas Imagedata来聊聊,如果没有接触过的,可以先简单了解下imagedata的基础。图片上的每像素的颜色值(rgba...原创 2020-01-13 15:58:36 · 1284 阅读 · 1 评论 -
BufferSource 如何编辑audioBuffer使得音乐倒放【AudioContext系列三】
标题党????,实际文章要让你有些发散思维,通过audioBuffer可以做到什么功能。裁切音乐调整播放顺序audioBuffer 可视化原创 2020-01-03 19:46:42 · 2033 阅读 · 0 评论 -
抖音多帧延迟教你前端实现方式
最近在学习WebAssembly,因为是提升性能,所以一直在使用canvas 做一些尝试。今天就突发奇想以前看见的抖音多帧延迟的装饰,今天就来分析实现下。多帧延迟先简单分析下这个效果,假设咱们有一个视频是宽400300, 分为100个4030的小方格,用固定的时间间隔播放格子。视频顺序播放async function initVideo() { const stream = aw...原创 2019-12-26 20:23:12 · 3120 阅读 · 1 评论 -
webassembly 常见错误整理
错误一RuntimeError: memory access out of bounds原因打包的时候添加 --importMemoryasc assembly/index.ts -b build/optimized.wasm -t build/optimized.wat --sourceMap --validate --optimize --runtime none --import...原创 2019-12-24 22:47:55 · 10526 阅读 · 2 评论 -
WebAssembly【一】Memory 学习
MemoryLinear memory 是 WebAssembly 的另外一种构建块,通常用于表示编译的 C/C++ 应用程序的整个堆。从 JavaScript 的角度,linear memory(后面称作 memory)可以被认为是一个可以调整大小的 ArrayBuffer,它是通过尽心优化的,用于负载和存储的低开销沙箱。Memories 可以被 JavaScript 创建,需要提供出初始大...转载 2019-12-24 20:28:14 · 1359 阅读 · 0 评论 -
【后端】微信开发注意点
在微信开发过程中,肯定避免不了排查问题,查看日志就显得比较重要。先说下前端的注意点:router: 前面介绍过了 hash 和 history 两种情况,路由相关的文章。hash nginx 获取不到history 可以获取到这是一个比较常见而且容易忽略的问题,今天这个不是重点,重点要说下微信的一些能力。路由url/path?from=groupmessage 从微信群消...原创 2019-12-23 20:59:45 · 319 阅读 · 0 评论 -
navigator.mediaDevices.getUserMedia参数整理
以前都是在用navigator.getUserMedia,整理了下参数说明navigator.mediaDevices.getUserMedia(options);options = { audio: { sampleRate: 16000 }, video: { facingMode: 'user' }}facingMode: ‘u...原创 2019-12-02 17:03:05 · 11702 阅读 · 2 评论 -
AudioContext 无标签播放音频【AudioContext系列一】
html播放音频常用的都是用audio标签,如果不可见用样式隐藏然后用js去控制播放,根据audio提供的能力模拟播放进度等等。这里介绍一种web Audio API 的方式播放, 代码很简单也很容易理解 const audioContext = new AudioContext(); async function play() { const res = await ...原创 2019-11-20 21:55:36 · 4629 阅读 · 0 评论 -
AudioContext 滤波设置【AudioContext系列二】
上一篇介绍了无标签播放音频,本篇增加些音效效果,主要的apiaudioContext.createBiquadFilter主要设置 frequency, Q两个值 (频率,质量) const filter = audioContext.createBiquadFilter(); filter.frequency.value = number; //取值范围 小于800 ...原创 2019-11-20 21:54:02 · 1929 阅读 · 0 评论 -
webRTC之 DataChannel 文件传输
前面介绍了 webrtc 音视频流的通信, 根据自己粗浅的理解简单介绍了下, 今天花了点时间看了下DataChannel, 如何通过rtc发送文件,开始的步骤还是一样的 通过websocket 把 offer answer icecandidate 点对点建立这次的主要提下 createDataChannel本地端创建sendChannel = local.createDataChan...原创 2019-11-05 21:30:40 · 4575 阅读 · 0 评论 -
二进制通信方式数据混淆
今天在调研互动白板的功能,顺便把以前发现的二进制socket消息研究了下,以往的socket消息 都是明文的,有的我发现是二进制的。原创 2019-10-22 13:56:34 · 1114 阅读 · 0 评论 -
emsdk python版本错误问题解决
前端时间接触webAssembly(地址),安装过程中遇到了这个问题收集下,这个是因为你点上安装了 python3的原因Traceback (most recent call last): File "./emsdk", line 803, in xcode_sdk_version return subprocess.check_output(['xcrun', '--show-s...原创 2019-08-20 10:26:27 · 1464 阅读 · 0 评论 -
拖动缓动效果 代码实现
这里只写了简单的拖动缓冲效果该效果大部分都是用在了 拖动->到底->异步加载html 部分 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25原创 2015-07-18 15:06:28 · 1110 阅读 · 0 评论 -
webRTC 流程梳理-服务搭建(一)
最近打算搭建下webRTC服务,了解了一下原理,其实媒体视频流不跟服务器通信的,服务器只是把点对点的频道线路接通,这一节只把流程梳理了一下,还有后续不要走开~~~随机roomid && 信令连接建立进来的用户 发送信令 (‘click door’) => 信令服务器 判断 房间内是不是有人 (将两人分到同一个room)* 如果房间已有人,接受到信令 (‘ad...原创 2019-09-10 21:19:44 · 594 阅读 · 0 评论 -
webRTC 单机实现方案无信令版本(二)
上一篇介绍可能是整体的流程,可能表述的太简单,不过实现的时候还是需要一步一步的来实现,技术点有两部分 [M] = method [E] = eventnavigator.mediaDevices.getUserMediaRTCPeerConnection[M] addStream[M] setLocalDescription[M] setRemoteDescription[M] ...原创 2019-09-20 14:56:19 · 664 阅读 · 0 评论 -
webRTC 1对1和多对多的思考-信令版(三)
上一篇已经实现了同一个页面的本地和远程的视频显示,今天再来分析下两个页面(或者叫两个用户)方案思考和实现。先来看下图,通过上图的情况,可以更进一步了解,每个用户都有一个本地原视频图像(实色框) 和 远端图像(这里只画了一个)组成。上一篇https://blog.csdn.net/ihtml5/article/details/101058900 已经知道setLocalDescriptio...原创 2019-09-27 14:51:12 · 1196 阅读 · 0 评论 -
vue 项目按需加载配置
今天在沟通业务需求的时候,无意中发现了小伙伴的代码和平常写的有些区别,上代码这里是他的代码,import Home from '@/pages/Home'const Error = () => import('@/pages/Error')const Lesson = () => import('@/pages/Lesson')const Preview = () =>...原创 2019-03-13 19:33:52 · 853 阅读 · 0 评论 -
eslint 自定义规则开发知识点整理(一)
eslint 的默认规则都在 node_modules/eslint/libs/rules里面具体所有的规则文档可以阅读这里 https://cn.eslint.org/docs/rules/ 都有相关的介绍第一步:引用本地开发规则路径也比较简单,eslint 有 --rulesdir 参数,eslint --ext .js --ext .jsx src --rulesdir ./ru...原创 2019-08-04 21:47:24 · 1983 阅读 · 1 评论 -
快速给已有项目添加eslint
IT开发工程师(程序猿)肯定会碰见半路接受别人的项目情况,规范点还好,不规范的可能就比较抓狂。今天就给半路的项目配置下eslint,首先在项目目录里面安装 eslint 模块npm install eslint然后执行以下命令./node_modules/.bin/eslint --init校验强调从上到下逐步严格。依次根据实际项目选择,如下图安装完成之后需要把以下代码...原创 2019-07-23 20:57:05 · 2641 阅读 · 2 评论 -
【react-native】android 打包方法记录
web前端发展到今天,可以说已经跨多个平台了, 从一开始的响应式页面,到现在的打包app,pcApp等等已经变为现实了,这个方式方式还是在4年前的方式,可能有新的版本了,或者新的方式。这块就回忆下怎么使用 react-native 打包app的步骤。不变的步骤版本:react-native-cli: 2.0.1react-native bundlereact-native bundle...原创 2019-03-04 22:05:00 · 246 阅读 · 0 评论 -
【threejs】如何使用canvas Texture实现材质
在学习threejs中,肯定避免不了要设置模具的材质,比如说要给一个box加颜色、图片或者视频画面;大家可以看以下代码new THREE.MeshBasicMaterial({color: Math.random() * 0xffffff}); // 颜色new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture(...原创 2019-02-24 17:47:32 · 7425 阅读 · 1 评论 -
【chrome扩展】如何过滤异步接口以及请求参数
前段时间有小伙伴想方便的获取某个网站的异步接口的地址以及请求参数,还有请求域名的区分,业余时间就做了个chrome扩展,方便可视化使用。首先manifest.json就不详细介绍了这块主要提两个地方"content_scripts": [{ "matches": ["https://*.ibeeger.com/*","https://*.ibeeger-dev.com/*"], ...原创 2019-02-22 10:27:57 · 2619 阅读 · 3 评论 -
浏览器发声 Oscillator 无音频文件
最近有一款喝酒神器小程序比较火,觉得很好玩前端代码就简单实现了下,下图二维码就是前端代码实现的demo,各位亲可以体验下。 做完之后有两处值得注意的地方:1、touches 多触摸点坐标记录情况2、浏览器 通过 AudioContextOscillator 无音频发声多触碰点代码实现cs.addEventListener('touchstart', ...原创 2019-02-21 19:31:15 · 502 阅读 · 0 评论 -
chrome SpeechRecognition API
1、首先要注意 会调用 MediaDevices.getUserMedia 获取权限 也就是说必须在https下 或则 localhost下。2、recognition.lang 设置语言 通过 speechSynthesis.getVoices() 获得所支持的语言列表,3、识别率较高,成本低4、目前兼容性并不高,虽然2012年推出的规范,但目前只有部分浏览器支持。 ...原创 2019-02-21 16:43:54 · 2218 阅读 · 0 评论 -
【数学】已知圆心坐标和半径,实现获取圆上3个点得坐标且三个点连接后是等边三角形
如题方案实现, 基础公式:r * cos(angle) = x ; r * sin(angle) = y;function Circle(x, y, r) { this.mPointX = x; this.mPointY = y; this.mRadius = r;}function Point(x, y) { this.x = x || 0; this....原创 2019-01-08 10:23:10 · 1214 阅读 · 0 评论 -
canvas 画图扇形
//扇形 CanvasRenderingContext2D.prototype.sector = function(x, y, radius, sDeg, eDeg) { // 初始保存 this.save(); // 位移到目标点 this.translate(x, y); this.beginPath(); // 画出圆弧 this.arc(0,转载 2015-05-26 11:05:40 · 1628 阅读 · 0 评论