百家號在線視頻編輯器的技術演進

時間 2021-04-02

標籤 html 前端 html5 後端瀏覽器安全網絡數據結構架構框架欄目 HTML 简体版

原文原文鏈接

導讀：隨着移動互聯網的發展，視頻化浪潮藉着5G的東風撲面而來。然而衆多用戶在進行視頻化創做的過程當中，被傳統視頻編輯器複雜的功能和陡峭的學習曲線勸退。爲此，百度百家號業務研發團隊結合用戶的實際創做需求，開發出一款簡單易用的在線視頻編輯和發佈工具——百家號在線視頻編輯器。本文將細緻地介紹這一編輯器的技術原理，架構和演進方向，並從一角揭示百度內部的技術合做與創新機制。html

前言

隨着移動互聯網的快速發展，人們愈來愈習慣於在手機上觀看視頻內容。百家號做爲手百的內容生產平臺，須要爲做者提供簡單易用的視頻編輯和發佈工具。在線視頻編輯器正是在這種需求下應運而生。這篇內容將細緻地介紹百家號視頻編輯器所採用的技術。前端

名詞解釋html5

BOS：百度對象存儲BOS（Baidu Object Storage）提供穩定、安全、高效以及高擴展存儲服務後端

VOD：視頻點播服務，本文特指百度VideoWorks（原VOD 音視頻點播服務）瀏覽器

1、一個在線視頻編輯器都要實現哪些功能？

1.1 編輯器的基礎功能

咱們調查了本地視頻編輯器，列舉出一些視頻編輯器必需要實現的功能：安全

素材源文件管理，加載和編輯
多軌道編輯器
拖拽操做（添加/刪除素材, 添加/刪除效果, 快速剪輯, 切換軌道等）
音視頻軌道分離
素材效果（浮雕、懷舊等），轉場動畫（淡入淡出、螺旋等），素材動畫（單點縮放、模擬晃動等）
字幕編輯和嵌入
視頻預覽
多種格式渲染導出

1.2 在線編輯器的獨特功能

一款在線視頻編輯器，一樣也要實現上述功能，只是具體實現上有所不一樣，例如：網絡

素材管理：要實現素材源文件的上傳和刪除
視頻預覽：由前端js實現的簡單預覽
導出：在線視頻編輯器主要爲百家號發佈器服務，所以不導出視頻文件，而是接入視頻發佈流程

此外，依託於百度和百家號技術體系，還能夠實現音頻轉字幕，字幕合成音頻，百家號圖文內容轉視頻等額外功能。數據結構

2、如何實現一個在線視頻編輯器?

2.1 後端技術選型

FFmpeg是業界最經常使用的視頻編解碼集成框架，不只功能強大，並且編解碼效率很高。所以，後端服務採用FFmpeg做爲視頻編解碼底層。架構

2.2 FFmpeg介紹

FFmpeg是一個自由軟件，能夠運行音頻和視頻多種格式的錄影、轉換、流功能。包含了libavcodec——一個用於多個項目中音頻和視頻的解碼器庫，以及libavformat——一個音頻與視頻格式轉換庫。框架

△圖 1 ffmpeg

2.2.1 FFmpeg 特性

自由軟件，代碼開源；
自帶衆多濾鏡（插件），能知足現階段所有業務需求；
支持第三方濾鏡（插件），能知足將來業務需求；
支持自定義編譯，支持動態編譯，儘量下降內存佔用；
支持遠程文件（http、ftp等）做爲輸入，減小本地磁盤佔用；
支持GPU編解碼，下降CPU佔用，提高編解碼速度(本業務咱時未使用GPU集羣）；
語法簡單，便於二次封裝或組裝。

2.2.2 命令行用法

△圖 2 ffmpeg命令行用法

例1: ffmpeg -i in.wmv -vcodec libxvid out.mp4
例2: ffmpeg -framerate 1 -t 1 -loop 1 -i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg" -vcodec libx264 -pix\_fmt yuv420p -y test.mp4

2.2.3 FFmpeg濾鏡基本規則

FFmpeg中的Filter（avfilter）一般翻譯爲過濾器/濾鏡，濾鏡的做用就是過濾（Filtering)）。

任何對解碼後的多媒體資源進行的編輯操做都可以稱做廣義上的Filtering，而進行這些操做的組件和插件，就是濾鏡。

例如，音頻升降調/速、視頻插幀/抽幀、剪裁/截取/合併/疊加等等。

△圖 3 FFmpeg轉碼和Filter過程

2.2.4 基礎濾鏡及其示意圖

基礎濾鏡使用很是簡單，只要在輸入文件（及選項）和輸出文件（及選項）之間，使用-vf來添加須要的濾鏡便可。例如：

縮放scale（靜態）

ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4

△圖 4 scale示意圖

縮放平移zoompan（動態）

ffmpeg -framerate 1 -t 1 -loop 1-i "http://pic.rmb.bdstatic.com/2b18b480a1f2d15e3667e01c45dfc157.jpeg"-vf"zoompan=z='if(eq(on,0),1,if(lt(zoom,1.25),zoom+0.0005,1.25))':d=16.06*25:x='if(lt(zoom,1.25),0,(x-1))':y='if(lt(zoom,1.25),0,(y+1))':s='1024x720'" -y tmp.mp4

△圖 5 zoompan示意圖

模糊boxblur

ffmpeg -i tmp.mp4 -filter_complex "boxblur=luma_radius='min(h,w)/30':luma_power=2" -y boxblur.mp4  模糊虛化

△圖 6 boxblur示意圖

疊加overlay

ffmpeg -i tmp.mp4 -i watermark.png -filter_complex "[1:v]scale=-2:48[logo];[0:v][logo]overlay=48:48" -y watermark.mp4  左上logo

△圖 7 overlay示意圖

2.2.5 FFmpeg管道式語法

規則：

用[name] 來命名流
濾鏡之間用 , 分隔
流之間用 ; 分隔
第i個輸入命爲[i-1]
第一個輸入文件的視頻流和音頻流爲[0:v] 和[0:a]
最後一個流名可省略

舉例：

\-filter\_complex "
    \[0:v\]split\[front\]\[back\];  //複製並分離成front和back兩條流
    \[back\] //背景流
            scale=1280:-2, //等比例縮放到輸出寬度1280
            boxblur=luma\_radius='min(h,w)/30':luma\_power=2, //模糊
            crop=iw:720\[background\]; //剪裁到1280:720
    \[front\]scale=-2:720\[foreground\]; //等比例縮放到輸出高度720
    \[background\]\[foreground\]overlay=(W-w)/2:(H-h)/2  //疊加
"

△圖 8 管道化濾鏡流示意圖

實際效果：

△圖 9 管道化濾鏡流執行結果

2.3 前端技術選型

前端界面使用React框架實現，快速預覽功能基於瀏覽器的html5音視頻播放器實現，經過html標籤傳遞調整參數給播放器，實現簡單的負片、浮雕、黑白等播放效果，經過在視頻上疊加動圖的方式模擬轉場效果。

受限於前端預覽方案的性能和複雜度，前端快速預覽只能展示部分編輯效果。

2.4 先後端功能邊界及交互

2.4.1 先後端功能邊界

進行具體的功能開發以前，須要根據需求和技術能力特色劃分先後端功能邊界，例如：

前端界面實現

用戶與視頻編輯器的交互
視頻簡單預覽（受限於先後端技術棧差別和使用的資源差別，預覽效果與最終結果可能不盡相同）
將用戶在編輯界面操做的結果轉換成時間軸數據結構
...

後端服務實現

時間軸轉譯成FFmpeg命令
視頻產出後調用視頻發佈流程
...

須要先後端共同實現

字幕 <==> 音頻
素材上傳
...

根據咱們的功能需求和先後端的功能劃分，百家號在線視頻編輯器的用戶界面大體劃分紅3個區域：

黃線內的功能區
綠線內的多軌道編輯區
紅線內的快速預覽區

△圖 10 百家號在線視頻編輯器界面分區

2.4.2 時間軸數據結構

爲了能在先後端之間進行交互，須要定義一種數據結構，這種數據結構要既便於前端多軌道編輯器的加載，修改和存儲，又便於後端提取結構化數據。

咱們定義了一種時間軸數據結構，時間軸中的軌道與多軌道編輯器中的軌道一一對應：

{"timeline":{"video_track": [ //視頻軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //能夠是視頻video, 圖片image, 轉場動畫transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "negative", // 效果: 負片,模糊,浮雕,黑白 等等"duration": 1.5, //時長"speed": 1, //播放速度"animation": "zoompan",  //視頻資源的動畫效果, 如鏡頭晃動, 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音頻軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //能夠是視頻video(視頻音軌), 音頻audio, 空白靜音slience"in_effect": "fade_in", //入場效果"out_effect": "fade_out", //退出效果"style": "jazz", // 效果: 爵士, 搖滾, 人聲 等等平衡器效果"duration": 1.5, //時長"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //語音轉字幕}],"subtitle": [ //字幕軌道{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"type": "video", //能夠是視頻video(視頻音軌), 音頻audio, 空白靜音slience"style": "Arial,23,yellow,white", // 效果: 字體,大小,顏色,描邊顏色"duration": 1.5, //時長"text": "這是一條字幕","pos_x": 100, //字幕定位"pos_y": 200,  //字幕定位"tts": true, //使用字幕合成語音}],"watermark": [ //水印,特圖{"start": 0.0, //開始時間"end": 1.5, //結束時間 = start + duration * speed"style": "transparent", //能夠是透明transparent, 負片 等效果"style_params": "0.8", //效果的具體參數, 如透明度等"duration": 1.5, //時長"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //貼圖定位"pos_y": 200,  //貼圖定位"height": 100, //貼圖高度"width": 100, //貼圖寬度}]},"author_info":{}, //做者信息"extra":{}, //其餘信息}

2.4.3 異步調用和輪詢

當用戶在完成編輯工做後，需點擊"保存"按鈕提交。這時前端會將多軌道編輯器內全部資源要素封裝成時間軸結構傳遞給後端服務。後端服務接到時間軸結構後會進行轉譯，並調用FFmpeg進行視頻編解碼。

後端這一階段的工做是計算密集型的，一般須要消耗時間軸長度2-5倍的時間來完成視頻最終合成。所以點擊"保存"按鈕後，前端採用異步調用 + 按期輪詢狀態的方式檢查後端視頻合成是否完成。

2.5 後端時間軸轉譯流程

前面提到後端服務要對前端傳遞來的時間軸進行轉譯，轉寫成FFmpeg命令。

這一步的主要流程以下圖所示：

△圖 11 時間軸轉譯FFmpeg命令程圖

3. 百家號在線視頻編輯器的具體實現

3.1 百家號視頻編輯器總體架構

△圖 12 總體架構

3.2 用戶界面和服務接口

目前視頻編輯器提供了兩種使用方法：面向最終用戶的圖形界面和麪向開發者的服務接口。

其中圖形界面集成在百家號內容創做後臺，現已對部分百家號做者開放，而經過接口提供的音頻轉碼，視頻合併等服務也已經應用到了百家號線上服務當中。

3.3 業務層: 時間軸轉譯

在業務層中，爲了隔離內外部網絡請求，添加了UI層模塊，用於處理來自於圖形界面的視頻編輯請求。Service模塊是基於PHP開發的編輯器核心模塊，主要做用是將圖形界面和服務接口這兩種類型的請求打平，將時間軸數據結構轉譯出可以直接執行的FFmpeg命令，並送給離線調度模塊執行。

業務層Service模塊在轉譯時主要完成了以下工做：

3.3.1 圖片視頻化

blur：傳入視頻/圖片比例和尺寸可能與最終輸出結果不一致，如手機豎屏拍攝的視頻、網上下載的圖片等等。以前業內對於不一樣比例的視頻，要麼留黑邊，要麼局部裁剪。隨着手機短視頻的興起，如今流行的作法是如圖13所示,，用模糊放大的背景圖代替黑邊。
zoompan：對於傳入的靜態圖片，一般要將圖片運動起來，使畫面不至於太死板，得到更好的展示效果。

3.3.2 視頻鏈接及轉場

concat：將傳入的個圖片/視頻流進行合併，鏈接成一條更長的視頻軌。
overlay：在視頻和視頻相鏈接的時刻，添加一層轉場動畫，避免生硬的直接畫面切換。

△圖 13 overlay添加過場動畫

3.3.3 音頻

將傳入的多段視頻伴音/配音/TTS朗讀接合成一條長音軌。
根據用戶選擇添加BGM，使視頻更有氛圍。
處理淡入淡出，避免生硬切換。

3.3.4 字幕

添加ass特效字幕頭。
根據時間軸中的文本，生成ass字幕文件。
將ass字幕文件壓制到視頻流中。

△圖 14 特效字幕頭

3.3.5 組裝

將全部濾鏡命令用管道式濾鏡流方式組合，生成濾鏡流腳本。
將濾鏡流腳本與生成的ass字幕同時分別上傳到BOS上，便於後續FFmpeg命令直接讀取和執行。

3.3.6 其餘

須要在空白位置添加特定長度的空白視頻/音頻，保證產出視頻的時間軸與視頻編輯器界面的時間軸一致。
對較長的文本，須要精細拆分，以保證每段字幕都與TTS朗讀同步（這一步驟在UI層進行計算）。

3.4 內部服務

在業務層中，涉及到用戶信息、物料信息、語音合成等各類查詢和調用，這些功能均由百家號和百度內部服務提供。

3.5 離線調度

Dispatch是一個分佈式的任務調度系統，負責在多個實例（或容器內）均衡地執行FFmpeg請求，將生成資源上傳BOS/VOD，回調Service層模塊返回任務調度的執行結果。

FFmpeg是一套開源的、完善的音視頻流轉編碼自由軟件，負責最終執行FFmpeg命令，生成音視頻文件。

4. 離線調度框架：實現分佈式FFmpeg調度

4.1 Dispatch架構圖

△圖 15 Dispatch架構

4.2 Dispatch實現原理

實例啓動時，Redis Hash數據結構註冊本身，member=ip，value = 當前隊列長度：當前狀態：更新時間戳；
任何一個接收到Service層模塊的請求後，若是本身當前隊列長度爲0，直接本地執行，不然將請求轉發給隊列最短的正常實例；
轉發請求前先要從Redis獲取全部Dispatch數據，解析全部實例的 ip、隊列長度、狀態、更新時間戳，根據規則選擇一個最佳實例轉發請求；
消費隊列中的請求時，調用FFmpeg從BOS上獲取輸入文件，管道化濾鏡流腳本，ass字幕文件, 而後執行道化濾鏡流腳本，在本地磁盤生成產出文件，並上傳BOS/VOD；
根據請求參數，回調Service層模塊接口，更新任務狀態。

5. 圖文轉視頻技術項目：依託於視頻編輯器後端服務的技術性嘗試

5.1 以場景爲單元編輯視頻

相比視頻編輯器，圖文轉視頻項目的用戶界面取消了時間軸，轉而採用"場景（Scene）"這一律念。即一張圖+一段話即是一個場景，視頻就是由場景串接起來的。

△圖 16 以場景爲單元建立視頻（設計稿）

5.2 文章落地頁URL轉視頻

得益於場景這一簡單概念，能夠將落地頁URL簡單地轉成場景，從而讓圖文/圖集做者能夠一鍵開始視頻內容的編輯和創做。

圖17展現了這一創做過程的流程圖。

△圖17 URL轉視頻流程

當轉成時間軸以後，便可調用視頻編輯器的接口，生成和發佈視頻。

5.3 圖文轉視頻Demo

文末會附上幾個圖文轉視頻項目在技術驗證時生成的視頻，以展示實際效果。

請前往該連接觀看：https://mp.weixin.qq.com/s/wH...

6. 總結與展望

6.1 組合創新，適應潮流

百家號的在線視頻編輯器技術能夠簡單總結爲：後端使用PHP將前端JS生成的時間軸格式數據轉譯成FFmpeg命令，並經過Dispatch調度調度框架來執行FFmpeg產出最終視頻。從這一層面看，這一技術沒有高深的技術門檻，沒有複雜抽象的邏輯模型，咱們的技術創新，主要是組合現有技術，造成一項適應潮流的新的技術方案。

伴隨着視頻化浪潮到來的，不只是普通用戶對視頻內容的大量需求，還有創做者對視頻編輯工具便利性的熱切期待。百家號一直站創做者的角度，爲創做者們提供更加優秀的視頻編輯器。但願經過咱們的努力，給視頻化浪潮裏的創做者們帶去得力的船槳。