Web 前端技术在音视频编辑和智能创作方向的探索-孟谦.pdf

1、分享人：孟谦字节跳动-智能创作-AI平台Web 前端技术术在音视频编辑视频编辑和智能创创作方向的探索本次演讲将介绍在字节-智能创作团队是如何解决音视频领域的技术问题，建设灵活的工具架构，应对设计师、用户多样的创作工具的诉求，包括轨道编辑器、图文卡片模版、视频混剪工具等热门应用编辑体验。以及 AIGC 创作热潮下，前端程序员的技术成长路径。分享主题题从web音视频到web多媒体AIGC 创作工具的跨脚本语言的范式迁移4.总结总结和展望基于事务和多粒度封装的整体工具系统架构，JS友好的特效渲染引擎，智能混剪和分组算法3.工具族背后的系统设计统设计智能编辑工具的能力形态以及背后的业务模块划分2.编辑

2、编辑工具应应用案例Web 浏览器中的底层能力提升对Web音视频技术的影响1.背景与趋势趋势01Keywords平台能力和用户习惯户习惯背景与趋势趋势Web 浏览器中的底层能力提升，WASM、IndexedDB、WebCodec、WebGL、WebGPU 等，如何支撑音视频技演进浏览浏览器的能力演进进领域主要解决手段支持版本和时间宽兼容-解决手段调用系统能力音/视频编解码WebCodeCChrome94Safari 16.4FFMPE（C+）编译成WASMCPU+GPU大文件缓存OPFSChrome86Safari 15.2IndexedDBFileIO文字绘制WebGL2Chrome 56Sa

3、fari 15CSS RenderGPU音视频直播WebRTCChrome23Safari 11HLSCPU+GPU安全CSP2.0Chrome40-CPU3D场景渲染WebGPUChrome 113WebGL1/2GPU工具高级交互WebAssemblyChrome57Safari11-CPU为传统的不同背景的使用者，提供不同的工具形态基础础工具习惯习惯和进阶进阶工作类型基础工具习惯进阶工具习惯文字工作复制黏贴章节概念数据工作数据表格表格样式、设置PPT汇报工作元素拖动，形变，遮罩出入场、循环动画剪辑工作轨道、切片成组，对齐，吸附配音工作音色、语速音调、数字、停顿All Needed实时预览

4、，undo关键帧、模版02KeyWords工具细节细节和用户户心智编辑编辑工具应应用案例简单简单易用的创创作工具多款针对不同工作背景的Web端智能创作工具，提升创作效率。支持POI一键多账号发布，批量定时发布，可以灵活嵌入企业内网。矩阵阵管理发发布，SaaS接入海量图片、音视频多主题素材，覆盖金融、泛互、汽车、旅游、零售、电商、美食行业。丰富的行业业模板，丰富的创创作资资源支持将内容存储为模板，并开槽，设置批量参数，作为API服务调用支持模板产产出，支持API成片API AccessTemplateSaaSUsabilityhttps:/ 视频剪辑师，并提供桌面级剪辑体验轨轨道编辑编辑器智能创

5、创作云-主力工具Debug思路找到真实需求Git思路管理项目带着作业用自家产品工具族带带来的技术术挑战战架构分层协议定义能力归约轨轨道编辑编辑器12各类素材效果复用轨轨道编辑编辑+实时预览实时预览34字幕识识别，文字语语音快捷键键等提供音视频裁剪、文字、特效、滤镜、贴纸、转场、字幕、配乐等常用的音视频编辑能力，灵活便捷的多轨道区及实时同步。图图文转视频转视频1234素材库库和语语音库库章节节可拖动动输输入框交互细节细节朗读读停顿顿可以基于用户输入的文本内容直接生成包含画面、配音、字幕、音乐的视频，并支持模板化作业。基于事务务和分层层封装的系统统架构整体工具架构以支撑不同工具形态整体工程SDK化

6、，主要分为3层 V：各形态组件交互，VM类型接口解析和定义 M：发布订阅框架，事务管理机制，协议扩展解析，统一状态维护 C：Wasm通讯，worker管理，异步转同步。事务机制是为了支持音视频、图像操作的undo/redo,小数据合并和VE调度序列化音视频视频SDK 构成&性能优优化 1080P 及以下文件支持本地直接解码WebCodec硬解 Http2.0 并发下载Webm 流式编辑使用加速 多线程离屏渲染 Restore精简 减少卡片切换重启内容冷启加速 Wasm超大包分片下载和缓存 编辑资源预加载分片缓缓存预预加载载The form of the tool and the users m