稿定视频编辑器背后的故事

1. 稿定视频编辑器背后的故事郑泽（卷柏）稿定设计前端工程师

2. 1. 非线性编辑与稿定业务目录 2. 编辑器交互架构设计 3. 渲染与导出 4. 多媒体的展望

3. 01 非线性编辑与稿定业务

4. 非线性编辑简介 “它的概念类似于最初使用在电影剪接中 ’剪’ 和 ’接’ 的手段。但是，在电影剪接的过程中，它是一个破坏性的过程，电影底片必须被剪断。数字视频技术出现后，产生了非线性剪接手段。非线性编辑是对视频或音频的素材通过电脑设备或其他数字随机存取的方式剪辑” —— Wiki

5. 非线性编辑简介简单来说就是能够直接访问视频中的任意一帧，然后可以进行重新排列、替换、增加、删除、修改的编辑能力。

6. 稿定业务 · 每月服务数万合作设计师与上百万用户的生产力工具 · 各端独立开发，数据格式与渲染效果需保持兼容 · 各类编辑器统一的文件数据格式

7. 稿定业务 !"#$%&'(

8. 稿定业务画布面板资源面板时间轴面板 !"#$%&

9. 02 编辑器交互架构设计

10. 编辑器交互架构设计 )* +, -. /0

11. 编辑器交互架构设计首先，先介绍我们的稿定平面编辑器

12. 编辑器交互架构设计 )12&3

13. 编辑器交互架构设计 A9<;BC89D A88E76F :8;7=G7H=;@ I@65= AJ@DK;<6E LD<M=4E=D=;7 A=G74E=D=;7 NOI4E=D=;7 I98@F4E=D=;7 P 元素层 - 模块化的各类型元素实例 ><?8@7 核心层 - 提供可编辑性的框架，使上层可通过标准化接口扩展新元素 456789:8;7<6;=9 4GF897=9 Q76EB R9<MM<KE= 交互 - 各类响应用户操作的单例浮层界面 4S=;7T@B P

14. 编辑器交互架构设计 YZ[\ RUHVWX ]^

15. 编辑器交互架构设计在平面编辑器的基础上，我们似乎只需要经过一些小小的改造....

16. 编辑器交互架构设计 A9<;BC89D A88E76F :8;7=G7H=;@ I@65= AJ@DK;<6E A6D=E6;= LD<M=4E=D=;7 A=G74E=D=;7 NOI4E=D=;7 I98@F4E=D=;7 O65=84E=D=;7 _@5684E=D=;7 ``DF=M P ><?8@7 456789:8;7<6;=9 4GF897=9 Q76EB R9<MM<KE= 4S=;7T@B 基于原有编辑静态元素的平面编辑器，为其扩展视频能力支持。

17. 编辑器交互架构设计在元素中记录下这个元素的开始时间和持续时长

18. 编辑器交互架构设计实现一个播放器时钟，让编辑器可以动起来

19. 编辑器交互架构设计让定时器跑起来

20. 编辑器交互架构设计稿定！

21. 03 渲染与导出

22. 渲染与导出但是这样的方式有没有问题呢？

23. 渲染与导出问题：多媒体文件导出若完全依赖 DOM，很难通过浏览器内建能力将其导出为视频文件。因此还需实现一套导出时使用的渲染器，基于用户编辑出的配置合成视频文件产物。

24. 渲染与导出问题：视觉特效支持多媒体设计师需要丰富的动画与特效，以制作出吸引人的内容。若纯粹依赖 DOM 元素，相应效果可能受限于 Dom 能力而难以实现，或存在性能问题。

25. 渲染与导出问题：各端一致性与开发效率基于 dom 的渲染方式导致其他平台需要重复实现相同的渲染逻辑，还要相互解决效果兼容问题。

26. 图像渲染那么有没有既可以拥有较高的渲染性能，又能让我们在上面添加丰富的动画与效果，从而渲染视频、图片、文字等多媒体资源的技术存在呢？

27. 图像渲染

28. 图像渲染 WebGL 标准相当于 OpenGL ES2.0 的 JavaScript API，为 Web 平台提供了直接控制 GPU 光栅化渲染管线的能力。它可高性能地实现 DOM 等标准 Web 渲染 API 难以实现的特殊效果，同时拥有优良的兼容性与跨平台性。

29. 图像渲染 #$ ab A=G7@9= eafghi NJ<5=9 ejklhi :<;S<B emn3i o=KI>Vgh pq3 ]^ cd RUHVWX 将多媒体资源对应的 DOM 元素（如 Image、Video）生成为 WebGL 纹理编写着色器对纹理做逐片元采样，最终渲染出像素颜色

30. 图像渲染从一个 video 的加载开始

31. 图像渲染将 video 绑定为纹理

32. 图像渲染设置 vs 与 fs

33. 图像渲染 video 播放同步渲染

34. 音频渲染 Web Audio API “Web Audio API使用户可以在音频上下文(AudioContext)中进行音频操作，具有模块化路由的特点。在音频节点上操作通过的音频数据，各个节点连接在一起构成音频路由图。即使在单个上下文中也支持多源，尽管这些音频源具有多种不同类型通道布局。这种模块化设计提供了灵活创建动态效果的复合音频的方法。”

35. 音频渲染 #$ _@568o89s=9t85= urklhv r$ RUHVWX |:HV I<6;t85= erwxyi _@568R=B76;<768;Vt85= ez{3i

36. 音频渲染从一个 audio 的加载开始

37. 音频渲染创建一个 AudioWorker 来处理音频

38. 音频渲染连接各个 node

39. GDPlayer A9<;BC89D A88E76F :8;7=G7H=;@ I@65= AJ@DK;<6E A6D=E6;= LD<M=4E=D=;7 A=G74E=D=;7 NOI4E=D=;7 I98@F4E=D=;7 O65=84E=D=;7 P ><?8@7 LD<M=4E=D=;7 O65=84E=D=;7 :<;S<B~=;5=9 o=KI> 4GF897=9 _@5684E=D=;7 L;B79@}768; _@568~=;5=9 _@568:8;7=G7 O65=8R=}85=} _@568R=}85=}

40. 输出 FFmpeg

41. 输出 FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。它提供了录制、转换以及流化音视频的完整解决方案。

42. 输出 · 逐帧渲染出所有的视频帧，将其转化为像素矩阵传入 FFmpeg · 将处理后的 AudioBuffer 转为 PCM 传入 FFmpeg 视频/图片/音频 · 使用 h264 与 aac 对像素矩阵与 pcm 进行编码 canvas/audio · 压缩并封装为 mp4 格式 FFmpeg 像素矩阵/pcm H264/aac mp4

43. 渲染与输出 iOS / Android 端 Web 端基于 openGL 的 C++ 播放器引擎渲染器 FFmpeg 服务端

44. 输出稿定！

45. 04 多媒体的展望

46. 多媒体的展望 WebGPU WebGPU 是一个新的 Web 图形能力 API，它是 WebGL 的继承者。 WebGPU 允许我们以更低的开销访问 GPU，同时开放更多的 GPU 特性。

47. 多媒体的展望

48. 多媒体的展望 WebCodecs API WebCodes API 允许我们可以使用浏览器中现有的媒体组件完成音视频编解码、获取原始视频帧、图片解码等能力

49. 多媒体的展望

50. 致谢感谢小米、雪碧、糖饼提供的支持与帮助

51. 感谢倾听大会官网