Web与音视频

FlyCut Caption是我最近开源的一个项目，是一个不依赖后端，完全由前端实现的，视频编辑工具；可以通过字幕对视频进行剪辑，支持视频字幕生成，字幕视频编辑，合成导出带字幕的视频。

本文将介绍了使用js原生接口，不借助第三方库，实现音频文件的波形绘制。通过使用`<canvas>`元素和Web Audio API，我们将音频数据以矩形波形的形式展示在画布上。

之前我写过一篇关于Fabric.js实时播放视频并扣除绿幕的文章，里面的视频绿幕抠图功能是通过fabricjs内置滤镜实现的；但是这样实现的绿幕抠图还存在一些缺陷，其实我们的绿幕抠图，可以更加完美

最近有一个视频压缩网站忽然爆火外网，据说能够将视频压缩到原视频的10～20%，而且几乎不损失清晰度，不影响视频播放效果。

相对于后端生成，前端生成缩略图的方案，在处理本地视频文件场景时还是比较合适，不需要将视频上传到服务器就可以获取到，因为视频资源就在本地，所以不需要把时间消耗在资源加载上。

使用Fabric.js实现播放视频，并且通过WebGL的removeColor滤镜，实时扣除视频绿幕，能够流畅地播放视频。