x007xyz

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

上传文件是我们最常用的方法之一了，几乎每个项目里都会使用到，实现起来也并不复杂，今天我们就简单写一个上传方法，并且支持进度显示和取消上传功能。

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

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

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

相信各位前端同学对浏览器端存储API完全不会陌生，像 cookie、localStorage、sessionStorage、IndexedDB 等都已非常熟悉。然而，对于OPFS可能90%的前端都不了

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

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

fly-cut是使用webcodecs实现的Web端视频编辑工具，类似剪映Web版。 fly-cut支持导入文本、图片（静态图片、动图）、音频、视频进行编辑，然后合成导出视频；并且所有功能不依赖后端。