- 博客(184)
- 收藏
- 关注
RSS订阅
原创 webgl透明视频
前置知识webGL图片纹理webgl动画纹理背景直播近年来的风头可以说是一时无两，游戏直播、颜值/才艺直播、带货直播；火爆的直播间通常有各种刷屏大礼物，通常是透明背景，这就是透明视频的主要用途之一；多数视频格式并不支持alpha通道，支持alpha通道的视频格式可以参考文献：List of video formats supporting alpha channels少数视频格式支持alpha通道，如webm、mov等；其中webm是google的标准，是一种视频容器格式，内部编码一般是v
2020-09-24 11:10:05
1021
原创 GPU工作原理及WebGL入门
基础坐标系WebGL是一个三维直角坐标系。它的坐标原点比较特殊，是画布的中心位置；x轴向右，y轴向下，z轴朝外，并且x轴和y轴在画布中的范围是-1至1；绘制一个三角形import React, { useEffect, useRef } from "react";import "./styles.css";export default function App() { const canvasRef = useRef(); useEffect(() => { /**
2020-07-14 21:23:42
1509
原创 vue数据劫持
原理vue2.x是基于Object.defineProperty实现双向数据绑定的；该函数可以在获取属性值或者设置属性值的时候监听属性的get和set事件，并进行相关的操作；当然，这些具体的操作就需要通过发布订阅者模式作为补充；如模板解析时每遇到一个属性，就为该属性添加一个发布订阅，从而能够进行双向数据绑定；乞丐版function observe(obj) { if (!obj ||...
2019-11-29 19:13:39
722
原创 Service Worker简介
介绍Service Workder相当于浏览器与web应用程序之间的代理服务器，可以捕获请求事件并做相应处理；目前主要用于离线应用以及消息推送及后台同步等；特性无法直接访问和操作DOM在长时间不用时会被中止并在下次需要时重启；可以访问和操作indexedDB API推荐使用HTTPS内部实现基于Promise生命周期支持的事件使用注册可以通过serviceWork...
2019-10-31 23:30:35
441
原创 canvas用于绘制视频
canvas相关方法介绍1.ctx.getImageData(sx, sy, sw, sh)：其中sx、sy分别是起点的横纵坐标，sw和sh分别为将要提取的数据对应的矩形图像的宽度和高度；其返回值是一个imageData对象，包含宽度、高度、data（Uint8ClampedArray类型的数组）；2.ctx.putImageData(imagedata, dx, dy)或者ctx.putIm...
2019-05-14 01:00:56
6141
原创 前端blob数据
Blob介绍定义Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。 通常可以用于声音、视频等多媒体文件的存储；构造new Blob(blobParts, options);blobParts：数组类型，可以存放任意个ArrayBuffer、ArrayBufferView、Blob或DOMString（会编码为utf-8）；options：可选，可以设置blob的type和endings；
2022-10-01 11:04:45
3846
1
原创 .git目录探析
.git文件夹位置及内容.git文件夹一般位于项目根目录下，内容可以参考下图，一般包含hooks、info、logs、objects、refs等目录，包含config、HEAD、index等文件；这些文件夹和文件的含义可以使用以下命令查看官方说明 git help gitrepository-layoutHEAD指向当前正在工作的分支，是通过ref指向的一个引用， 比如当前分支为test分支，执行以下命令cat HEAD可以看到输出 ref: refs/heads/testconfi
2021-07-03 01:06:54
3786
1
原创 Immutable.js
ImmutableJs出现背景JavaScript中的Plain Object，一般是以引用形式存在的可变数据（Mutable Data），这样设计的目的可能是为了节省CPU与内存的开销；每次进行对象修改时直接改变对象本身（changed in-place rather than return a new object）一般mutable data进行数据操作时比较简单，但是当在一些大型复杂应用中使用mutable data时可能会导致数据无法溯源，因为很多地方都可以修改这个数据，导致难以调试与维护；
2021-05-07 21:41:22
281
原创 Chrome调试实用技巧
常用快捷键切换调试台布局Ctrl+ Shift+ D调整数值增加/减少0.1：Alt+↑ Alt+↓增加/减少1：↑ ↓增加/减少10：Shift+↑ Shiift+↓增加/减少100：Ctrl+↑ Ctrl+↓切换Tab在Elements、console、sources等tab中切换时可以使用快捷键，默认是禁用的，在调试台的Setting中开启即可使用快捷命令面板Ctrl+Shift+P可以调起快捷命令行，可以设置面板tab的显示、截屏（node节点截屏/滚动截屏）、CSS O
2020-12-27 16:51:30
791
1
原创 WebAssembly入门
简介WebAssemblyWebAssembly is a new type of code that can be run in modern web browsers — it is a low-level assembly-like language with a compact binary format that runs with near-native performance and provides languages such as C/C++, C# and Rust with a
2020-11-30 18:10:27
1737
原创 ffmpeg 滤镜
基础滤镜分类ffmpeg有两种滤镜，一种是简单滤镜，另一种是复杂滤镜简单滤镜 -vf一个输入，对应一个输出；可以看做复杂滤镜的特例；复杂滤镜 -filter_complex滤镜描述符规则“,” —— 前一个输出作为后一个输入“;” —— 表示两个滤镜为并列关系“:” —— 用于分割参数常用滤镜介绍Overlay是最常使用的滤镜；会以第一个输入为背景，后续的叠加到背景上；应用视频加logo使用overlay滤镜，ffplay预览效果ffplay -i logo
2020-11-28 14:00:03
1945
1
原创 nginx + ffmpeg搭建音视频直播/点播系统
nginx配置rtmp { server { listen 1935; # 点播服务vod application svod { play /opt/video/vod; #点播视频存放位置 } application live { live on; meta copy; hls on;
2020-11-27 01:58:09
1105
转载 每日一诗词 —— 忆秦娥·娄山关
忆秦娥·娄山关毛泽东 西风烈， 长空雁叫霜晨月。 霜晨月， 马蹄声碎， 喇叭声咽。 雄关漫道真如铁， 而今迈步从头越。 从头越， 苍山如海， 残阳如血。
2020-10-03 14:43:15
259
原创 background-clip与box-shadow
background-clip背景裁剪，默认属性值为border-box，常用属性值包括border-box、content-box、padding-box、text等；background-clip:text用于进行包含文字的背景裁剪；要实现下图中外边框和内容间的透明效果，可以通过设置以下代码实现：.box { border: 5px solid lightblue; backgroun...
2020-10-03 14:37:14
303
原创 webGL图片纹理
基础概念坐标定义：纹理坐标系范围是（0，1），左下角为（0，0），右上角为（1，1）；webGL几何坐标系：x(-1, 1) y(-1, 1)gl.createTexture() —— 创建并初始化一个WebGLTexture对象，即创建一个纹理；gl.bindTexture(target, texture)将给定的texture绑定到目标，其中texture参数为创建的纹理对象，target为绑定点，类型为GLenum，支持的值包括gl.TEXTURE_2D（二维纹理）、gl.T
2020-09-04 18:49:31
1156
原创 JSbridge原理与实现简析
JSBridge定义定义：正如其命名一样，JSBridge就相当于js与native之间进行全双工通信的一座桥梁，其内部定义了一套用于js与native进行通信的规范（包括协议、方法、传参及回调等）；用途：JSBridge可以桥连js与native的通信，从而使基于容器的web开发和优化成为可能，如比较火的hybrid app技术；能够提升页面性能，丰富页面功能等；JSBridge原理简析框架简析：JSBridge框架其实主要由两部分组成：第一部分是Native调用js，主要用于消息推送、
2020-08-26 15:12:14
6596
3
原创 H.264编码简析
相关概念H.264与MPEG-4 AVC关系：可以参考quora的相关回答——h.264是ITU-T下的VCEG（Video Coding Experts Group）组织制定的关于视频编码的标准；而类似的标准对应在ISO MPEG-4 Part 10, Advanced Video Coding（即ISO MPEG-4 AVC）也被定义了，并且两个标准基本保持同步。由于MPEG-4是一系列音视频编码标准的集合，因此h.264不等同于MPEG-4，而只是对应它的一个子集MPEG-4 AVC；h.
2020-08-19 22:28:00
525
原创 H.264基础概念
常用名词及概念H.264由VCEG（Video Coding Experts Group）和MPEG（Moving Picture Experts Group）共同推进并且目前广泛使用的一种通用视频编码技术；相比于H.265，压缩率较低，但是对于硬件设备的要求也低一些；另外，h.265商用是非免费的；H.264中两个重要的概念是NAL（Network Abstract Layer）和VCL（Video Coding Layer）；一个H.264文件由多个NALU组成，每个NALU又可以分为VCL或n
2020-08-18 19:59:18
533
原创 git大小写不敏感，仅修改文件名或文件夹名称无法提交commit
问题描述：在使用git的过程中，有时会遇到仅需要改变文件名大小写或者文件夹名大小写的情况——比如不小心把组件名首字母小写了，需要改为大写。但windows下git默认是忽略大小写的，如果仅改动文件（夹）名，git并不能检测到diff，所以不能进行commit提交；解决方案通常可以使用以下两种方式：通过git配置文件修改配置core.ignorecasegit config core.ignorecase false使用命令git mv：git mv -f OldFileNameCase n
2020-07-10 14:56:36
2121
原创 webpack中bundle、chunk、module的区别
webpackWebpack GlossarybundleBundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.译：Bundle：由许多不同的modules生成，包含了源码处理后的最终版本——源码被加载和编译处理；
2020-07-05 18:04:09
1958
react-loadable
basic points基于路由的代码分割和基于组件的代码分割webpack可以设置多入口文件，可以通过入口文件进行代码分割，即所谓的基于路由的分割；基于路由的分割可以常见于多tab页切换等场景；但是由于即使是多入口文件，某个文件中的代码也未必是需要首屏全部加载的，比如弹窗等；如果可以基于组件进行代码分割，可以更加细粒度地控制首屏需要加载的代码及其他代码的加载时机，可以有效提高页面性能和用户体验；考虑自己实现一个动态载入的组件，需要考虑哪些问题需要基于ES6新特性import()实现，然后
2020-07-01 16:01:55
401
原创 Chrome devTools笔记
命令概述调起命令菜单：Ctrl+ Shift+P基本命令类型：panel（面板）、Drawer、Appearance、console、Debugger、Elements、Global、Mobile、Navigation、Network、Performance、Rendering、ScreenShoot、Settings、Sources；快速打开DevTools:Ctrl+ Shift+ C 审查元素模式Ctrl+ Shift+ J 控制台模式不同的Pannel切换Ctrl+
2020-06-29 14:47:29
452
原创 git小记
git rebase如其意译，变基操作通常，我们开发的时候从develop分支拉取一个新的feature分支进行开发；由于每个人的分支都是基于develop分支拉取的，当你开发一段时间之后，可能develop分支上已经有他人通过测试从test分支合入develop分支；此时，如果你要进行测试，准备何如test分支时，往往先要进行以下操作：git rebase develop该操作实际...
2020-03-21 16:12:38
576
原创 mobx入门教程
背景React的自身的状态本身由state和setState维护；但是随着应用复杂度的提升（组件间状态共享及状态变更），单纯通过setState进行状态管理的方案不仅变得代码复杂、难以维护，而且影响可扩展性；针对这种状况，React目前主要有Redux和mobx两种解决方案（均可以让状态逻逻辑从展示组件等解耦出来，提高扩展性与复用性）；mobx与Redux有什么不同？Redux采用F...
2020-03-05 13:39:46
1712
原创 ssh密钥生成（Permission denied(publickey)）
ssh-agent启动eval $( ssh-agent -s)查看现有的SSH密钥ls -al ~/.ssh一般其位于C:/Users/xxx/.ssh/目录下，分为公钥和私钥；公钥以.pub结尾；复制公钥可以使用clip命令：clip < ~/.ssh/id_rsa.pub参考文献...
2020-03-04 00:41:49
2144
转载 每日一诗词 —— 雨后
雨后席慕荣生命，其实也可以是一首诗如果你能让我慢慢前行静静盼望 搜寻怀带着逐渐加深的暮色经过不可知的泥淖在暗黑的云层里终于留下了泪 为所有错过或者并没有错过的相遇生命 其实到最后总能成诗在滂沱的雨后我的心灵将更加洁净如果你肯等待所有漂浮不定的云彩到了最后 终于都汇成河流参考文献http://www.sohu.com...
2020-01-29 10:10:22
281
原创 面试疑点解析
HTTP/2的多路复用实现原理：http/2多路复用的机制是基于“帧”和“流”的概念提出的；http/2以前的传输是基于文本分割形式的消息，以换行符进行键值对的分割，服务端接收时无法预估其内存需求，在解析速度和传输效率上都有影响；http/2提出的帧对信息进行了封装，内部包含了帧标识和对应的流ID（流是由一个或多个帧组成的数据流）；HTTP/2中的信息是以数据流的方式中进行传输的；这样，在一个T...
2019-12-17 15:53:01
301
原创 最小栈
问题描述：实现一个最小栈，包含以下方法：push、pop、getMin（返回栈中最小值）分析：由于栈具有push和pop方法，因此栈中的最小值是不固定的；因此可以通过维持另一个栈B用于保存历史最小元素的下标；每次入栈时判断入栈元素是否小于当前最小元素，小于则更新最小值同时将其下标保存在栈B中；每次出栈时判断出栈元素是否为当前最小元素，是则同时将栈B中的栈顶元素出栈；此时栈B的栈顶仍然是栈...
2019-12-06 18:24:02
327
原创 React 新版本特性说明
1.React 16版本以前渲染一个组件最外层有时要使用到一个无意义的<div>元素作为包裹元素，否则会报错；React 16.2版本以后，新增了react.fragment API，不需要外层有包裹元素时，可以使用<></>或者<Fragment></Fragment>（需要导入`import React, { Fragment } f...
2019-12-04 16:45:28
787
原创 浏览器垃圾回收
引用计数法浏览器维护一张表，里边保存了所有对象的引用次数；每当引用一次，次数+1；垃圾回收时，将表里引用次数为0的对象空间释放；缺点： 循环引用或者相互引用的对象计数总是不为0，无法被回收，导致内存泄漏；Chrome V8 垃圾回收机制：参考文献https://v8.dev/blog/concurrent-marking...
2019-12-04 11:19:51
268
原创 CSS3 animation steps
背景css3引入了transition和animation属性为我们提供了强大的动画效果，也为前端设计和实现提供更多的可能性；需求：利用给定的一组图片，实现动画效果；优势：纯CSS实现，不需要借助gif；更好的性能表现Action：借助animation steps实现；属性介绍用法：steps(n, <jumpterm>)steps其实是一个分段的阶跃函数，n相当于单...
2019-12-02 16:37:18
424
原创 ES6 Proxy
定义及用法ES6引入了Proxy可以为代理对象的基本操作设置一些自定义操作；基本用法：var p = new Proxy(target, handler);typeof p === 'object'; // truetarget：被代理对象，可以是任意类型的对象，包括数组、函数及proxy等；handler：一个对象，其每个属性为函数，用于定义代理的行为；可以用于数据合法性校验或数据预...
2019-11-29 21:33:06
106
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人