模仿capcut在线编辑视频
在线视频编辑
Timeline
ffmpeg=>Canvas
播放器
ffmpeg=>video
ffmpeg=>video=>canvas （腾讯智影）
特效
webgl在canvas上（腾讯智影）
导出
服务端（腾讯智影,剪映）
视频渲染
ffmpeg.wasm
需要服务器返回头增加
Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin
才可以使用sharedArrayBuffer
cutput
cutput返回
通过hook window.postMessage可以猜测视频合成是使用webworker来做
架构
[架构参考](如何用纯前端实现一个 Web 版剪映？ - 知乎 (zhihu.com))
参考项目
Manipulating video using canvas - Web APIs | MDN (mozilla.org)
welefen/canvas2video: Convert dynamic canvas to video, support merge audio (github.com)
WebCodecs视频导出实践 - 掘金 (juejin.cn)
Building a video editor completely on the frontend: FFMpeg, WebCodecs, WebAssembly and React. - DEV Community
WebAV项目
时间轴相关功能
react-moveable - npm (npmjs.com)
wavesurfer.js | audio waveform player JavaScript library
特效
项目
render-video - npm (keyframes.studio)
腾讯智影
剪映 (capcut.cn)
优化
目前ffmpeg体积过大（如果内部用户内网，体验OK也不是大问题）
(自定义ffmpeg编译)[https://juejin.cn/post/6998876488451751973]