inicio tema library logo biblioteca mío
más

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

如果无法正常显示，请先停止浏览器的去广告插件。
分享至：
1. 字节跳动-智能创作-AI平台 Web 前端技术在音视频编辑 和智能创作方向的探索 分享人：孟谦
2.
3. 分享主题 本次演讲将介绍在字节 - 智能创作团队是如何解决音视频领域的技术问题，建设灵活的工具架构，应对设计师、用户多样的创作工 具的诉求，包括轨道编辑器、图文卡片模版、视频混剪工具等热门应用编辑体验。以及 AIGC 创作热潮下，前端程序员的技术成长路 径。 1. 背景与趋势 2. 编辑工具应用案例 3. 工具族背后的系统设计 4. 总结和展望 Web 浏览器中的底层能力提 智能编辑工具的能力形态 基于事务和多粒度封装的整体 从web音视频到web多媒体 升对Web音视频技术的影响 以及背后的业务模块划分 工具系统架构，JS友好的特效 AIGC 创作工具的跨脚本语言 渲染引擎，智能混剪和分组算 的范式迁移 法
4. 01 背景与趋势 Keywords 平台能力和用户习惯
5. 浏览器的能力演进 Web 浏览器中的底层能力提升，WASM、IndexedDB、WebCodec、WebGL、WebGPU 等，如何支撑音视频技演进 领域 主要解决手段 支持版本和时间 宽兼容-解决手段 调用系统能力 音/视频编解码 WebCodeC Chrome94 Safari 16.4 FFMPE（C++） 编译成WASM CPU+GPU 大文件缓存 OPFS Chrome86 Safari 15.2 IndexedDB FileIO 文字绘制 WebGL2 Chrome 56 Safari 15 CSS Render GPU 音视频直播 WebRTC Chrome23 Safari 11 HLS CPU+GPU 安全 CSP2.0 Chrome40 - CPU 3D场景渲染 WebGPU Chrome 113 WebGL1/2 GPU 工具高级交互 WebAssembly Chrome57 Safari11 - CPU
6. 基础工具习惯和进阶 为传统的不同背景的使用者，提供不同的工具形态 工作类型 基础工具习惯 进阶工具习惯 文字工作 复制黏贴 章节概念 数据工作 数据表格 表格样式、设置 PPT汇报工作 元素拖动，形变， 遮罩 出入场、循环动画 剪辑工作 轨道、切片 成组，对齐，吸附 配音工作 音色、语速 音调、数字、停顿 All Needed 实时预览，undo 关键帧、模版
7. 02 编辑工具应用案例 KeyWords 工具细节和用户心智
8. Usability 简单易用的创作工具 多款针对不同工作背景的Web端智能创作工具，提升创 作效率。 服务于企业内容生产营销全链路，提供多款AI创作工具、 模板和高清版权素材，助力企业创作更多高品质视频， 驱动业务增长 SaaS https://www.volcengine.com/product/ICC Template 矩阵管理发布，SaaS接入 支持POI一键多账号发布，批量定时发布，可以灵活嵌入 企业内网。 丰富的行业模板，丰富的创作资源 海量图片、音视频多主题素材，覆盖金融、泛互、汽车、旅 游、零售、电商、美食行业。 全流程：策划、采集、编辑、审核、发布、信息反馈 API Access 支持模板产出，支持API成片 支持将内容存储为模板，并开槽，设置批量参数，作为 API服务调用
9. 智能创作云 - 主力工具 卡片模版工具 轨道编辑器 图文转视频 视频剪辑师，并提供桌面级剪 辑体验 图文转视频工具，如何帮助文 字工作者产出章节视频 Debug思路找到真实需求 视频混剪工具 PPT工作者，并提供贴纸、文 字、动画、数字人等多种表现 形式 Git思路管理项目 视频运营者，产出不同风格和 排序的批量视频 带着作业用自家产品
10. 工具族带来的技术挑战 协议定义 能力归约 架构分层
11. 轨道编辑器 1 轨道编辑+实时预览 2 各类素材效果复用 4 快捷键等 提供音视频裁剪、文字、特效、滤镜、贴纸、转场、字幕、配乐 等常用的音视频编辑能力，灵活便捷的多轨道区及实时同步。 3 字幕识别，文字语音
12. 图文转视频 可以基于用户输入的文本内容直接生成包含画面、配音、 字幕、音乐的视频，并支持模板化作业。 1 3 朗读停顿 素材库和语音库 2 输入框交互细节 4 章节可拖动
13. 基于事务和分层封装 的系统架构 整体工具架构以支撑不同工具形态 整体工程SDK化，主要分为3层 • V：各形态组件交互，VM类型接口解析和定义 • M：发布订阅框架，事务管理机制，协议扩展解 析，统一状态维护 • C：Wasm通讯，worker管理，异步转同步。 事务机制是为了支持音视频、图像操作的 undo/redo, 小数据合并和VE调度序列化
14. 音视频SDK 构成 & 性能优化 分片缓存预加载 冷启加速 使用加速 • Wasm超大包分片下载和缓存 • 编辑资源预加载 • 多线程离屏渲染 • Restore精简 • 减少卡片切换重启内容 • 1080P 及以下文件支持本地直接解码 WebCodec硬解 • Http2.0 并发下载 Webm 流式编辑
15. 总结： 工具形态和用户心智 Mind Shared 符合原有用户习惯 符合原有工作背景的用户认知, 工具层适配用户和引导用 户 资产和素材打通，随时取用 文字、贴纸、动画、素材、转场、路径各工具通用 Protocol Compatible The form of the tool and the user's mindset. Seamless user experience. 底层草稿协议可重排，亦可预览 每款工具都支持实时预览，并且方便创作者调整时序。且 有一定的模版输出功能 植入隐藏的高级功能和AI功能 卡片的轨道编辑、数字人编辑、细节调整和修正
16. 03 工具族背后的系统设计 KeyWords 技术思路解决 体验和效率
17. 卡片模版工具 是一款PPT式的视频编辑器，整合了多种素材和动画能力， 并提供直观的实时预览、保存和恢复，提供了丰富的模板帮 助客户更轻松的完成视频创作。 1 AI配音+实时预览 2 多元素属性编辑 3 文字动画和元素 动画 4 卡片可拖动
18. 基于JS友好的特效渲 染引擎-Animatic 基于轨道模型描述的动画渲染引擎，它支持叙事 化语义表达，具有较高的渲染性能、较低的维护 成本与高扩展性。 • • • • • 前端实时预览，概念定义和动画层级 帧间计算：基于 Proxy 的属性依赖检查机制 双端一致性：NodeCanvas，服务端C++封装 定义新元素类型：贴纸动画、文字动画、API结构化视频 社区模版引入：AE2Animatic
19. 打通现有模版生态和制作工具 AE2Animatic 提效尝试 • 从AE -> Lottie -> Animatic 解 析，存储和再打包 • 设计师自助验证工具 • AE关键帧和表达式转换方法 • 覆盖95%业务场景的属性，包 括MG动画
20. 模版供给的链路 不同种类素材的采购 转化脚本 模板协议的制定
21. 视频混剪工具 1 视频叉乘，预览 2 AI脚本 4 细节可调，应用全部 基于用户提供的素材（视频/图片）片段，以灵活的片 段编排，通过配置字幕、转场、滤镜、封面、背景音乐等 预设项，辅助混剪算法，裂变多个统一主题，不同内容 的视频，并支持视频的实时预览和实时编辑。帮助非专 业人群低成本的制作裂变视频 3 灵活编排
22. 端上组合算法，智能混剪和分组 • 素材智能切片，基于AIGC的不同行 业文案自动生成，提升丰富度 • 智能组合，批量成片 —— 分级策略 + 播放控制 + 智能推荐 • 算法去重，保证视频质量
23. 总结： 技术思路解决 体验和效率 MediaType 多种媒体兼容+自定义 丰富媒体类型，媒体的定义、编解码、扩展性 Automatic 自动化转化+人工修正 利用社区中的存量，低成本自动化导入。算法自动叉乘 Coherence Performance Multimedia artist creating with various art media in a personal studio. 注重效果一致性 抹平开源方案的效果一致性问题，混剪的去重后效果验 证 真实世界中的性能 真实性能测试，多机型众测，更好的渲染手段
24. 04 总结和展望 KeyWords 前端范式迁移 贴近算力
25. AI的新尝试 从 Web 音视频到 Web 多媒体，多种技术和 AI 的综合 使用，可以做到的事情 AI脚本、标题 AI输入器 混剪工具提供从AI脚本，到内容细项的 随处可以使用的AI文本输入法，支持多 风格的扩写、改写 AI标题和文案生成 AI理解-图文转视频 AI剪辑成片 图文的AI理解，素材扩张和素材生成， 转成可编辑视频格式 基于内容理解的自动提取视频高光，修 复画质，自动剪辑成片
26. 贴近算力 编写精巧设计, 执行效率高, 可以touch更 多算力的代码, 最大化代码收益. AIGC
27. 前端开发范式迁移 AIGC 创作工具的跨脚本语言的范式迁移，从 JavaScript 到 Python 1 执行环境&上下文 2 语言规范&依赖 3 提效和性能 原型链替换 Python Type & Linter GPU 资源动态挂载 hook机制 Pip Freeze Tree 多线程&多进程 Decorators装饰器 异常处理 Modular & Rust
28. 算力领域 前端出路，重端场景，for pro用户，多种技术 尽量打满硬件利用率 1 CPU算力 2 GPU算力 通用计算，可编程性强 并行计算, 3D Graphic • 多线程 WebWorker • Electron+FFMpeg多进程 • WebGPU Shader • WebGPU ML 3 NPU算力 存储计算一体，矩阵 乘积累加，函数优化 • TensorFlow.js
29. AI智能创作的新生态 1 基于工作流和节点搭建的 低代码开放生态 ComfyUI - StableDiffucion 2 生图、视频模型生态 • 模型托管，生图服务 • 小模型训练 • 垂类模型 3 端云协同 • PC端启动器，多版本控制 • 高品质生成迁移云化
30. 感悟 平台能力是足够的，不做是找借口 绑定用户价值，争取业务话语权 发挥脚本优势，自动化供给 脏活做漂亮，解放自己
31.
32. 谢谢 Q&A

inicio - Wiki
Copyright © 2011-2025 iteam. Current version is 2.139.0. UTC+08:00, 2025-01-10 04:09
浙ICP备14020137号-1 $mapa de visitantes$