Web端短视频编辑器的设计与实现 - 像做PPT一样做视频

1. 第十六届 D 2 前端技术论坛 Web端短视频编辑器的设计与实现 CCO 产品技术部-阿里小蜜团队-李志成（敦固）

2. 背景编辑器设计编辑器实现目录音视频处理渲染出片浏览器实现的问题与挑战 End

3. 一切能够视频化的内容都将会视频化

4. 背景我们为什么要做一个 Web 端短视频编辑器？满意度图文知识1 图文知识2 解决率转人工率冗长乏味找不到重点对老年人不友好适老化信息密度高易接收

5. 制作成本高制作效率低专业难上手

6. 制作成本高制作效率低专业难上手如何能更简单些？

7. 如何让短视频制作更简单？像 PPT 样做视频迁移 PPT 的使用经验快速上手丰富模板可定制应对不同场景智能脚本辅助创作

8. 简单 & 专业音视频剪辑能力 Web 端渲染纯前端实现时间轴音视频剪辑字幕编排动画贴纸转场、滤镜、特效 TTS 配音 ASR 语音识别 ...

9. 编辑器音视频处理补间动画时间轴 HOW ？贴纸动画滤镜转场端渲染特效

10. 编辑器的设计总体架构模板库应用层素材库分镜管理智能脚本 TTS 大纲关键帧动画时间轴编辑器视频录制视频音频图片 lottie 动画 gif/apng 动画字体滤镜特效命令管理剧本模型引擎层解析加载舞台导演引擎资源管理器缓存剧本解析时钟编排 React 依赖层 lottie immer tweenjs Konva gifuctjs dexie.js 视图、状态管理服务渲染器元素绘制特效处理图层管理动画录制音频流合成 TTS 转码 ASR webm2mp4 gl-transition ffmpeg.wasm mp4boxjs WebGL WebCodecs API AudioContext 动画、特效 Canvas WebWorker 音视频处理

11. 编辑器的设计编辑器之上视频、音频、图片、文字动画、Lottie、特效上传、选取拖拽、配置、编辑、播放渲染素材编辑器视频资源描述剧本模型剧本协议编辑器之下资源加载、解析、缓存模型编辑模型导演渲染

12. 编辑器的设计剧本协议的设计 Script Scenes BaseSegment tracks segments Anim id Video playStartTime Audio playEndTime Img zIndex Text effects ... ... ... track ... scens type

13. 编辑器的设计以撤销重做功能为例谈变与不变的取舍 Mutable 变命令式 V S 不变 Immutable 快照式只关注数据变化不关心具体操作视角只关注操作序列不关注数据变化实现手动编码所有操作的正逆向操作撤销即执行逆操作保留每次操作前后的数据快照撤销即数据回滚问题新增一种操作就要新编码快照存太多了内存会爆炸 Immutable Immer

14. 编辑器的实现编辑器工作流程 webm/mp4 VideoLoader ...Loader ImgLoader 渲染器编辑器 AudioStream 资源加载、解析、缓存 Audio PCM Data 资源管理器 AudioContext Asset VideoStream Stage Canvas 剧本模型舞台 ScriptData Konva Canvas Segment 导演引擎资源预加载

15. 编辑器的实现编辑器工作流程 webm/mp4 VideoLoader ...Loader ImgLoader 渲染器编辑器 AudioStream 资源加载、解析、缓存 Audio PCM Data 资源管理器 AudioContext Asset VideoStream Stage Canvas 剧本模型舞台 ScriptData Konva Canvas Segment 导演引擎资源预加载

16. 编辑器的实现导演引擎循环检查 Segment 的时间导演引擎 Segments 队列内部时钟元素入场元素离场读取剧本舞台问题高精度的时钟资源预加载资源管理器

17. 编辑器的实现导演引擎循环检查 Segment 的时间导演引擎资源预加载 Segments 队列内部时钟元素入场元素离场读取剧本舞台问题高精度的时钟 Web Audio API AudioScheduledSource Node 资源管理器

18. 编辑器的实现音视频的处理与渲染 VideoFrame Video Demuxer Chunk 1 mp4/avi/webm .. . 解封装 Decoder 2 Render to OffscrenCanvas Convert to texture av sync AudioData 3 Play with AudioContext 解码音视频码流渲染与音视频同步把容器里压缩过的音视频流拆出来从压缩的编码中获得视频的像素数据和音频 PCM 数据将像素数据转为WebGL 纹理绘制到 Canvas AAC/MP3/AC-3/... PCM H.264/H.265/MPEG2/... YUV/RGB 将音频原始采样数据 PCM 发送给 WebContext.AudioWorklet 播放根据音频的播放时间来挑选视视频帧并绘制，保证音画同步

19. 编辑器的实现音视频的处理与渲染 VideoFrame Video Demuxer Chunk Decoder 1 2 Render to OffscrenCanvas Convert to texture av sync AudioData 3 1. 根据实际需求对 FFmpeg 进行裁剪定制通常的方案 FFmpeg WebAssembly 2. 编译 FFmpeg 到 WebAssembly 3. 浏览器加载调用 Play with AudioContext

20. 编辑器的实现音视频的处理与渲染 VideoFrame Video Demuxer 1 Chunk Decoder 2 Render to OffscrenCanvas Convert to texture av sync AudioData 3 Play with AudioContext 为什么我们要打入一个浏览器内本身就存在的东西？都快 2022 年了浏览器还没把能力开放出来给人用吗？

21. 编辑器的实现音视频的处理与渲染 VideoFrame Video Demuxer 1 Chunk Decoder 2 Render to OffscrenCanvas Convert to texture av sync AudioData 3 Play with AudioContext 有！但是很新！不过没关系！

22. 编辑器的实现音视频的处理与渲染 WebCodecs API VideoDecoder AudioDecoder MP4Box.js Demuxer Video 1 Chunk VideoFrame Decoder 2 Render to OffscrenCanvas Convert to texture av sync AudioData 3 Play with AudioContext WebCodecs API 问题 WebCodecs 没有提供相应的解封装 API 意味着我们需要借住 MP4Box.js/mux.js/ffmpeg 之类的工具拿到原始编码数据优势 WebCodecs 还给了更多 AudioDecoder AudioEncoder VideoDecoder VideoEncoder ImageDecoder

23. 编辑器的实现编辑器工作流程 webm/mp4 VideoLoader ...Loader ImgLoader 渲染器编辑器 AudioStream 资源加载、解析、缓存 Audio PCM Data 资源管理器 AudioContext Asset VideoStream Stage Canvas 剧本模型舞台 ScriptData Konva Canvas Segment 导演引擎资源预加载

24. 编辑器的实现渲染出片 TTS mp3 AudioSource Node 渲染器编辑器 AudioStream Canvas. captureStream(30) video/... AudioSource Node AudioContext. CreateMediaStreamDetination() VideoStream AudioStream AudioContext new MediaRecorder() VideoStream Stage Canvas Dom Event Proxy webm 剧本模型 ... webmToMp4 mp4

25. 编辑器的实现渲染出片 TTS mp3 AudioSource Node AudioSource Node 渲染器编辑器 AudioStream AudioContext Canvas. captureStream(30) Stage Canvas ... AudioContext. CreateMediaStreamDetination() VideoStream AudioStream WebCodecs API VideoEncoder VideoStream video/... AudioEncoder Dom Event Proxy Muxer 剧本模型 mp4/webm

26. 浏览器实现的问题与挑战真的有听上去那么美好吗？ C/C++ lottie 音视频等内容处理 tweenjs gifuctjs gl-transition ffmpeg.wasm mp4boxjs WebGL WebCodecs API AudioContext WebWorker AudioWorklet offscreenCanvas 动画、特效文件处理 Rust go/... 遇事不决音视频处理尽管使用 dexie.js 通过 indexDB 存储但视频文件和素材通常很大，所以我们的方案目前仅适用于短视频的创作（60s 左右）长视频的渲染 MediaRecorder 的方式出片需要和视频一样时长的等待更多格式的支持 mp4\webm\avi ... 我们需要找很多 demuxer, muxer 库直接访问文件系统的 API 异步处理端侧渲染再多给点 File System Access API FFmpeg 录制浏览器拆分渲染再合并

27. 不要止步于浏览器不要止步于JS

28. Thanks