DataFun-上午-1st-騰訊內容創作視頻云剪輯技術實戰-mingzhixu(徐明志).pdf

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 數量，以及導出一段視頻所需的線程數量，分段導出純凈的視頻片段（該視頻段沒有特效濾鏡），無需渲染，只轉碼導出，減少渲染耗時非常感謝您的觀看|