1、徐明志徐明志 腾讯腾讯 前端开发工程师前端开发工程师|智影介绍与架构概览智影介绍与架构概览素材上传全链路优化素材上传全链路优化轨道区体验与性能提升轨道区体验与性能提升视频渲染与合成技术探秘视频渲染与合成技术探秘|目录目录|智影介绍与架构概览智影介绍与架构概览|视频云剪辑技术实战视频云剪辑技术实战云服务的便利云服务的便利桌面应用的体验桌面应用的体验云剪辑云剪辑|视频云剪辑技术实战视频云剪辑技术实战丰富的创辅工具数字人播报、文本配音、字幕工具、视频解说、智能横转竖、文章转视频等海量的创作素材腾讯视频版权素材、热门配乐音效、滤镜特效库、贴纸、版权图片库等强大的剪辑能力功能和体验对齐端产品的Web 剪

2、辑工具，云端存储，轻巧便捷，强大好用https:/https:/智影智影|视频云剪辑技术实战视频云剪辑技术实战智影智影|视频云剪辑技术实战视频云剪辑技术实战智影后台智影后台权限管理权限管理合成发布合成发布服务对接服务对接日志监控日志监控素材管理素材管理项目管理项目管理成片管理成片管理用户管理用户管理总体架构总体架构WebWeb端端资源管理资源管理预览播放预览播放属性调节属性调节监控上报监控上报轨道剪辑轨道剪辑数据管理数据管理资源缓存资源缓存资源加载资源加载视频中台视频中台视频上传视频上传视频转码视频转码音频分离音频分离雪碧图抽取雪碧图抽取接入层接入层页面管理页面管理接口鉴权接口鉴权数据处理数据

3、处理花字服务花字服务|视频云剪辑技术实战视频云剪辑技术实战PixianimejsthlsshaderWebGLService WorkerIndexedDBFFmpegTimer时间驱动器SourcePool资源加载管理InstanceList实例管理Store全局数据Metadata素材元信息Config全局配置素材选择素材上传模块素材录制模块编辑操作数据修正模块轨道布局引擎轨道渲染引擎属性调节FormItem 控件集合PropsContext媒体素材基类动画素材基类花字系统滤镜效果合成模块画面渲染引擎预览区预览区属性区属性区轨道区轨道区素材区素材区全局模块全局模块技术依赖技术依赖WebWe

4、b端架构端架构|素材上传全链路优化素材上传全链路优化|视频云剪辑技术实战视频云剪辑技术实战转码存储使用云端Service Worker上传上传提取信息上传等待时间长用户上传操作后，如何立即剪辑？读取到文件后，经过了哪些处理？素材上传素材上传|视频云剪辑技术实战视频云剪辑技术实战素材上传素材上传转码存储使用云端Service Worker上传信息提取计算指纹DB 比较编码格式封装格式宽高时长文件头尾+文件信息 sha1计算耗时从几百毫秒或几秒，下降到几十毫秒|视频云剪辑技术实战视频云剪辑技术实战素材上传素材上传存储使用云端Service Worker上传提取信息不支持的检测带封面的音频H264

5、mp4确定编码格式VP8 webmmp3转码FFmpeg依据是否有透明通道|视频云剪辑技术实战视频云剪辑技术实战HDRHDR 视频色彩失真视频色彩失真使用的开源 FFmpeg 版本不能正确解析 HDR不支持转成基于 zScale 色彩映射的 SDR 视频失真视频原视频素材上传素材上传存储使用云端Service Worker上传提取信息|视频云剪辑技术实战视频云剪辑技术实战重新编译重新编译 FFmpegFFmpeg WasmWasm1.支持 zScale，可以将 HDR 转成 SDR2.禁用不必要的依赖库3.启用编译优化选项包体积下降素材上传素材上传存储使用云端Service Worker上传提

6、取信息原视频智影竞品C|视频云剪辑技术实战视频云剪辑技术实战跨域隔离跨域隔离使用 SharedArrayBuffer 的方式：申请 Chrome origin trials（过渡方案，即将废弃）将站点开启跨域隔离（将站点开启跨域隔离（CrossCross-origin isolationorigin isolation）启用跨域隔离存在这几个问题：cdn 图片资源加载失败 跨域 js 加载失败 登录等使用 iframe 嵌入的页面无法访问解决方法：请资源提供方帮忙设置CORP标头（麻烦）使用官方提供的另一个COEP新值credentialless（兼容性差）只在必须开启的页面开启跨域隔离只在必

7、须开启的页面开启跨域隔离素材上传素材上传存储使用云端Service Worker上传提取信息|视频云剪辑技术实战视频云剪辑技术实战音、视频文件音、视频文件m3u8m3u8 分片数据分片数据音波图抽样点音波图抽样点雪碧图雪碧图音频踩点数据音频踩点数据日志、回放数据日志、回放数据IndexedDBIndexedDB素材上传素材上传转码使用云端Service Worker上传提取信息|视频云剪辑技术实战视频云剪辑技术实战素材上传素材上传转码存储云端Service Worker上传提取信息|视频云剪辑技术实战视频云剪辑技术实战RequestResponseService-WorkerIndexedDB

8、VideoAudioRequestResponseService-WorkerApi拦截 localCache url，从 IndexedDB 中返回相应 range 的响应数据拦截 Api 请求，将后端返回的在线 url 替换成 localCache url，前端使用无感知素材上传素材上传转码存储使用云端上传提取信息|视频云剪辑技术实战视频云剪辑技术实战素材上传素材上传转码存储使用Service Worker上传提取信息雪碧图抽取音频分离音波数据提取转码云端上传剪辑中云端存储|轨道区体验与性能提升轨道区体验与性能提升触摸板缩放拖拽自动滚动框选多选拖拽自动吸附预览轴主轨吸附包装素材关联切割模式

9、智影智影竞品J竞品X竞品B竞品C轨道轨道|视频云剪辑技术实战视频云剪辑技术实战智影智影竞品J竞品X竞品B竞品C时间轴canvascanvascanvascanvascanvascanvas片段canvascanvasdomdomdomdom雪碧图canvascanvascanvascanvasdomcanvas音波图canvascanvascanvascanvasdomcanvas基于 Pixi 框架，使用 WebGL 加速canvas 渲染，2w+2w+片段在轨，运行流畅实现细节优化：只渲染可视区内片段只绘制可视区内图像动态移除部分装饰元素Graphics 共享 Geomentry代码实现优

10、化等轨道轨道|视频云剪辑技术实战视频云剪辑技术实战轨道轨道DataSystem.TransformSystemLayerSystem逻辑处理历史记录数据维护数据修正PixiCore ECS每帧循环TrackEntityTrackComponentFloatComponentSizeComponentLayoutComponentSegmentEntityStickyComponentRenderComponentSizeComponentTransComponentOtherEntities逻辑集中统一管理模式简单高度可复用运行可控易优化优秀的渲染框架|视频云剪辑技术实战视频云剪辑技术实战雪碧

11、图雪碧图GET NEARDB抽帧模块GETThumbLoaderTextureCacheGETGETSETGETSETGET主屏幕主屏幕+前后屏Render取最近的返回触发频繁debounce各模块独立多重加载方式和缓存多队列控制渲染优先级主屏幕精准命中缓存|视频云剪辑技术实战视频云剪辑技术实战倒放下载GETSETGETSETGETSETGETSETDat 文件Json 文件下载资源WebAudio抽样CacheDBUrlLoaderPeaksLoader其中1种方式加载多重加载方式多队列控制并发提前加载本地使用音频DB命中率音波图DB命中率工具库：FFmpeg waveform音频加载音频加

12、载|视频渲染与合成技术探秘视频渲染与合成技术探秘|视频云剪辑技术实战视频云剪辑技术实战WebGL视频解码预览预览|视频云剪辑技术实战视频云剪辑技术实战WasmFFmpegWebCodecsVideo软解码，高分辨率解码吃力实现音视频同步复杂Wasm 有较好的计算能力，可扩展端上的 AI 能力硬解码，性能较好需考虑音视频同步，缓冲区等问题硬解码，性能较好，使用简单，稳定WebGL 可直接渲染 video 纹理支持的格式有限视频解码预览预览|视频云剪辑技术实战视频云剪辑技术实战花字花字|视频云剪辑技术实战视频云剪辑技术实战 样式叠加错位，实现层次感 图片加参数，定制预设气泡字 基于 animejs

13、，实现花字动画 拆行、分字、测距，实现中英文混排 纹理叠加，实现图片文本花字花字|视频云剪辑技术实战视频云剪辑技术实战配置预设样式花字添加气泡花字样式添加背景色添加动画背景插件样式插件读取背景位置选择预处理样式入场动画出场动画循环动画计算字符位置读取位置各种动画策略拆分字符字符动画整体动画渲染字符渲染按时间进度控制播放花字花字|视频云剪辑技术实战视频云剪辑技术实战前端渲染Puppeteer参数逐帧渲染轨道数据参数合成seek同构代码Png序列帧花字花字|视频云剪辑技术实战视频云剪辑技术实战滤镜滤镜|视频云剪辑技术实战视频云剪辑技术实战$name.vert$name.frag按需加载自定义 li

14、b/shadergl-transition参数标准化TransitionFilterTransitionFilter转场滤镜转场滤镜PixiFilterPixiFilterPixiPixi内置内置滤镜滤镜LutFilterLutFilter风格滤镜风格滤镜EffectFilterEffectFilter特效滤镜特效滤镜滤镜滤镜|视频云剪辑技术实战视频云剪辑技术实战shader示例滤镜滤镜|视频云剪辑技术实战视频云剪辑技术实战shadershadercodingAePagPag|视频云剪辑技术实战视频云剪辑技术实战AePagPag|视频云剪辑技术实战视频云剪辑技术实战滤镜特效贴纸蒙版背景转场导出

15、相同的 AE 动效内容，在文件解码速度和压缩率上均大幅领先于同类型方案高效的文件格式高效的文件格式运行时，可在保留动效效果前提下，动态修改替换文本或替换占位图内容运行时可编辑运行时可编辑是腾讯自主研发的一套完整的动画流程解决方案，致力于将 AE 动画一键导出，应用于各平台和终端PagPagPag|视频云剪辑技术实战视频云剪辑技术实战轨道数据canvasWebAudio绘制纹理matrix 变化VideoPagWebAudioTimer驱动属性叠加输入TavMedia处理输出资源读取效果处理3.03.0渲染渲染|视频云剪辑技术实战视频云剪辑技术实战AudioReaderVideoReaderPa

16、g ClipMovie ClipMovie ClipMovie ClipTransition ClipFilter ClipAudio ClipPagFFmpegTGFXMediaCodecVideoToolBoxOpenGLMetalVulkan转场特效音乐变声贴纸动画拼接剪裁字幕花字画幅调整变速循环滤镜调色EffectFilterTransitionMediaAudioMovieLut 调色画质增强音频变声Pag 特效运镜转场淡入淡出溶解切换Pag 转场Mp3AccAmrPcmComposition视频图片Pag 贴纸Clip解码导出Composition合成合成|视频云剪辑技术实战视频云剪辑技术实战新老引擎合成耗时比对00.511.522.55min30min全部新引擎老引擎渲染性能提升合成合成智能的分段导出策略，根据服务器的 CPU 数量，以及导出一段视频所需的线程数量，分段导出纯净的视频片段（该视频段没有特效滤镜），无需渲染，只转码导出，减少渲染耗时非常感谢您的观看|