首帧时间，是指用户从点击开始播放到视频首帧画面展现出来的时间。「零首帧」并不是真的0毫秒启播，而是用户几乎感知不到有首帧时间的存在，在我们的播放质量埋点中对应小于100ms以内的首帧时间。 在我们的播放器中，在各环节提供了极致的首帧优化方法，在条件允许符合时，可以将首帧时间压缩…

作为前端同学，或多或少都会接到动画需求。如果是有规律性的动画还是相对容易实现的，但如果是比较复杂的帧动画，我们用 CSS 实现的话，就非常容易造成如下情况，设计师是卖家秀，我们开发的是买家秀。 或许你会想到用 GIF 实现，但是 GIF 经常会有杂边，无法满足设计师对精致度的要…

代表每秒传送的比特数。 比特率又称为“二进制位速率”，俗称“码率”，“码流”，又称为数据信号速率。这大兄弟别名好多。。 从传输速度的发展看来，摩尔定律不仅应用在晶体管的密度，同样可以用在传输速度：比特率大概每18个月提高一倍。 比特率越高，代表单位时间传送的数据就越多。 举个例…

GOP (Group of Pictures)：GOP 越长（I帧之间的间隔越大），B 帧所占比例越高，编码的率失真性能越高。虽然B帧压缩率高，但解码时CPU压力会更大。 MSE(Media Source Extensions)：W3C 标准API，解决 HTML5 的流问题（…

最近由于工作需要，需要在react上用到一个录音的功能，录音主要包含开始录音，暂停录音，停止录音，并将频谱通过canvas绘制出来。起初开发时找了一个现成的包，但是这个第三方的包不支持暂停功能，也不支持音频转码，只能输出audio/webm格式，所以自己在周末决定重新写一个关于…

首先说明，本篇文章是概念+实践，对于希望了解和实践一个简单的摄像头直播网页功能的人会有帮助，由于篇幅和实践深入度有限，目前demo效果只支持直播播放电脑端以及常用摄像头的实时视频流，其他复杂的功能（例如视频信息实时处理，高并发，网络分发等）尚未实现，还需要进一步探索。 下面按照…

之前刚好看到Web Audio API方面的内容，因此用了相关api做了个音频可视化的页面。实现： Web Audio API中一个关键的对象就是音频上下文(AudioContext)，可以类比canvas context，在AudioContext我们进行相关的操作。音频处理…

现有的前端视频帧提取主要是基于 canvas + video 标签的方式，在用户本地选取视频文件后，将本地文件转为 ObjectUrl 后设置到 video 标签的 src 属性中，再通过 canvas 的 drawImage 接口提取出当前时刻的视频帧。 受限于浏览器支持的视…

市面上，音频编辑软件非常多，比如 cubase、sonar 等等。虽然它们功能强大，但是在 Web 上的应用却显得心有余而力不足。因为 Web 应用的大多数资源都是存放在网络服务器中的，用 cubase 这些软件，首先要把音频文件下载下来，修改完之后再上传到服务器，最后还要作更…