人人网FED

它有一个弹闪的过程，一大一小交替缩放就像一个弹簧在弹动一样，而不是以往那种简单的线性变大。 如果使用CSS的animation-timing-function只是改变运动的速度，不能改变运动的方向。 是没有这种弹性动感的。 因为要实现一个弹簧振动效果，需要有两个参数，一个是阻尼…

WebRTC是为了解决实时音视频传输问题，致力于提供免安装、免插件、免专利费，人人可用的高效便捷的实时流媒体传输。 1. 3种实时流媒体实现比较 目前实时流媒体主流有三种实现方式：WebRTC、HLS、RTMP，当你看直播网站的时候会发现很多采用了HLS（HTTP Live S…

前端实现录音有两种方式，一种是使用MediaRecorder，另一种是使用WebRTC的getUserMedia结合AudioContext，MediaRecorder出现得比较早，只不过Safari/Edge等浏览器一直没有实现，所以兼容性不是很好，而WebRTC已经得到了所…

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

第一篇主要介绍了Chrome加载音视频的缓冲控制机制和编解码基础，本篇将比较深入地介绍解码播放的过程。以Chromium 69版本做研究。 由于Chromium默认不能播放Mp4，所以需要需要改一下源码重新编译一下。 1. 编译一个能播放mp4的Chromium 说是在demu…

有没有那么一种可能，在前端页面处理音视频？例如用户选择一个视频，然后支持他设置视频的任意一帧作为封面，就不用把整一个视频上传到后端处理了。经过笔者的一番摸索，基本实现了这个功能，一个完整的demo：ffmpeg wasm截取视频帧功能： 支持mp4/mov/mkv/avi等文件…

什么是内存泄露？内存泄露是指new了一块内存，但无法被释放或者被垃圾回收。new了一个对象之后，它申请占用了一块堆内存，当把这个对象指针置为null时或者离开作用域导致被销毁，那么这块内存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null，且代码…

SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。 1. 做路径动画 利用animateMotion结合path做的动画，具体说明可见上文。 2. 实现不规则形状的点击…

WebSocket是为了解决双向通信的问题，因为一方面HTTP的设计是单向的，只能是一边发另一边收。而另一方面，HTTP等都是建立在TCP连接之上的，HTTP请求完就会把TCP给关了，而TCP连接本身就是一个长连接吗，只要连接双方不断关闭连接它就会一直连接态，所以有必要再搞一个…