導(dǎo)讀:隨著移動(dòng)互聯(lián)網(wǎng)的發(fā)展,視頻化浪潮借著5G的東風(fēng)撲面而來(lái)。然而眾多用戶在進(jìn)行視頻化創(chuàng)作的過程中,被傳統(tǒng)視頻編輯器復(fù)雜的功能和陡峭的學(xué)習(xí)曲線勸退。為此,百度百家號(hào)業(yè)務(wù)研發(fā)團(tuán)隊(duì)結(jié)合用戶的實(shí)際創(chuàng)作需求,開發(fā)出一款簡(jiǎn)單易用的在線視頻編輯和發(fā)布工具——百家號(hào)在線視頻編輯器。本文將細(xì)致地介紹這一編輯器的技術(shù)原理,架構(gòu)和演進(jìn)方向,并從一角揭示百度內(nèi)部的技術(shù)合作與創(chuàng)新機(jī)制。
*第四期百度架構(gòu)師「周一見」活動(dòng)進(jìn)行中,本期贈(zèng)送小度音箱,詳細(xì)活動(dòng)規(guī)則見二條推文~
前言
隨著移動(dòng)互聯(lián)網(wǎng)的快速發(fā)展,人們?cè)絹?lái)越習(xí)慣于在手機(jī)上觀看視頻內(nèi)容。百家號(hào)作為手百的內(nèi)容生產(chǎn)平臺(tái),需要為作者提供簡(jiǎn)單易用的視頻編輯和發(fā)布工具。在線視頻編輯器正是在這種需求下應(yīng)運(yùn)而生。這篇內(nèi)容將細(xì)致地介紹百家號(hào)視頻編輯器所采用的技術(shù)。
名詞解釋
BOS:百度對(duì)象存儲(chǔ)BOS(Baidu Object Storage)提供穩(wěn)定、安全、高效以及高擴(kuò)展存儲(chǔ)服務(wù)
VOD:視頻點(diǎn)播服務(wù),本文特指百度VideoWorks(原VOD 音視頻點(diǎn)播服務(wù))
一、一個(gè)在線視頻編輯器都要實(shí)現(xiàn)哪些功能?
1.1 編輯器的基礎(chǔ)功能
素材源文件管理,加載和編輯 多軌道編輯器 拖拽操作(添加/刪除素材, 添加/刪除效果, 快速剪輯, 切換軌道 等) 音視頻軌道分離 素材效果(浮雕、懷舊等),轉(zhuǎn)場(chǎng)動(dòng)畫(淡入淡出、螺旋等),素材動(dòng)畫(單點(diǎn)縮放、模擬晃動(dòng)等) 字幕編輯和嵌入 視頻預(yù)覽 多種格式渲染導(dǎo)出
1.2 在線編輯器的獨(dú)特功能
素材管理:要實(shí)現(xiàn)素材源文件的上傳和刪除 視頻預(yù)覽:由前端js實(shí)現(xiàn)的簡(jiǎn)單預(yù)覽 導(dǎo)出:在線視頻編輯器主要為百家號(hào)發(fā)布器服務(wù),因此不導(dǎo)出視頻文件,而是接入視頻發(fā)布流程
二、如何實(shí)現(xiàn)一個(gè)在線視頻編輯器?
2.1 后端技術(shù)選型
2.2 FFmpeg介紹

2.2.1 FFmpeg 特性
自由軟件,代碼開源; 自帶眾多濾鏡(插件),能滿足現(xiàn)階段全部業(yè)務(wù)需求; 支持第三方濾鏡(插件),能滿足未來(lái)業(yè)務(wù)需求; 支持自定義編譯,支持動(dòng)態(tài)編譯,盡可能降低內(nèi)存占用; 支持遠(yuǎn)程文件(http、ftp等)作為輸入,減少本地磁盤占用; 支持GPU編解碼,降低CPU占用,提升編解碼速度(本業(yè)務(wù)咱時(shí)未使用GPU集群); 語(yǔ)法簡(jiǎn)單,便于二次封裝或組裝。
2.2.2 命令行用法

例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濾鏡基本規(guī)則

2.2.4 基礎(chǔ)濾鏡及其示意圖
縮放scale(靜態(tài))
ffmpeg -i video_1080p.mp4 -vf scale=w=640:h=360 video_360p.mp4

縮放平移zoompan(動(dòng)態(tài))
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

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

疊加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

2.2.5 FFmpeg管道式語(yǔ)法
規(guī)則:
用[name] 來(lái)命名流 濾鏡之間用 , 分隔 流之間用 ; 分隔 第i個(gè)輸入命為[i-1] 第一個(gè)輸入文件的視頻流和音頻流為[0:v] 和[0:a] 最后一個(gè)流名可省略
舉例:
"
v]split[front][back]; //復(fù)制并分離成front和back兩條流 :
//背景流
scale=1280:-2, //等比例縮放到輸出寬度1280
boxblur=luma_radius='min(h,w)/30':luma_power=2, //模糊
crop=iw:720[background]; //剪裁到1280:720
-2:720[foreground]; //等比例縮放到輸出高度720 =
(W-w)/2:(H-h)/2 //疊加 =
"

實(shí)際效果:

2.3 前端技術(shù)選型
2.4 前后端功能邊界及交互
2.4.1 前后端功能邊界
用戶與視頻編輯器的交互 視頻簡(jiǎn)單預(yù)覽(受限于前后端技術(shù)棧差異和使用的資源差異,預(yù)覽效果與最終結(jié)果可能不盡相同) 將用戶在編輯界面操作的結(jié)果轉(zhuǎn)換成時(shí)間軸數(shù)據(jù)結(jié)構(gòu) ...
時(shí)間軸轉(zhuǎn)譯成FFmpeg命令 視頻產(chǎn)出后調(diào)用視頻發(fā)布流程 ...
字幕 <==> 音頻 素材上傳 ...
黃線內(nèi)的功能區(qū) 綠線內(nèi)的多軌道編輯區(qū) 紅線內(nèi)的快速預(yù)覽區(qū)

2.4.2 時(shí)間軸數(shù)據(jù)結(jié)構(gòu)
{"timeline":{"video_track": [ //視頻軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video, 圖片image, 轉(zhuǎn)場(chǎng)動(dòng)畫transition, 黑屏blank"height": 720,"width": 1280,"in_effect": "fade_in", //入場(chǎng)效果"out_effect": "fade_out", //退出效果"style": "negative", // 效果: 負(fù)片,模糊,浮雕,黑白 等等"duration": 1.5, //時(shí)長(zhǎng)"speed": 1, //播放速度"animation": "zoompan", //視頻資源的動(dòng)畫效果, 如鏡頭晃動(dòng), 平移放大等"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp4"}],"audio_track": [ //音頻軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"in_effect": "fade_in", //入場(chǎng)效果"out_effect": "fade_out", //退出效果"style": "jazz", // 效果: 爵士, 搖滾, 人聲 等等平衡器效果"duration": 1.5, //時(shí)長(zhǎng)"speed": 1, //播放速度"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.mp3","auto_subtitle": true, //語(yǔ)音轉(zhuǎn)字幕}],"subtitle": [ //字幕軌道{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"type": "video", //可以是視頻video(視頻音軌), 音頻audio, 空白靜音slience"style": "Arial,23,yellow,white", // 效果: 字體,大小,顏色,描邊顏色"duration": 1.5, //時(shí)長(zhǎng)"text": "這是一條字幕","pos_x": 100, //字幕定位"pos_y": 200, //字幕定位"tts": true, //使用字幕合成語(yǔ)音}],"watermark": [ //水印,特圖{"start": 0.0, //開始時(shí)間"end": 1.5, //結(jié)束時(shí)間 = start + duration * speed"style": "transparent", //可以是透明transparent, 負(fù)片 等效果"style_params": "0.8", //效果的具體參數(shù), 如透明度等"duration": 1.5, //時(shí)長(zhǎng)"sourceUrl": "http://*.baidu.com/c20ad4d76fe97759aa27a0c99bff6710.png","pos_x": 100, //貼圖定位"pos_y": 200, //貼圖定位"height": 100, //貼圖高度"width": 100, //貼圖寬度}]},"author_info":{}, //作者信息"extra":{}, //其他信息}
2.4.3 異步調(diào)用和輪詢
2.5 后端時(shí)間軸轉(zhuǎn)譯流程

3. 百家號(hào)在線視頻編輯器的具體實(shí)現(xiàn)
3.1 百家號(hào)視頻編輯器整體架構(gòu)

3.2 用戶界面和服務(wù)接口
3.3 業(yè)務(wù)層: 時(shí)間軸轉(zhuǎn)譯
3.3.1 圖片視頻化
blur:傳入視頻/圖片比例和尺寸可能與最終輸出結(jié)果不一致,如手機(jī)豎屏拍攝的視頻、網(wǎng)上下載的圖片等等。之前業(yè)內(nèi)對(duì)于不同比例的視頻,要么留黑邊,要么局部裁剪。隨著手機(jī)短視頻的興起,現(xiàn)在流行的做法是如圖13所示,,用模糊放大的背景圖代替黑邊。
zoompan:對(duì)于傳入的靜態(tài)圖片,通常要將圖片運(yùn)動(dòng)起來(lái),使畫面不至于太死板,獲得更好的展現(xiàn)效果。
3.3.2 視頻連接及轉(zhuǎn)場(chǎng)
concat:將傳入的個(gè)圖片/視頻流進(jìn)行合并,連接成一條更長(zhǎng)的視頻軌。 overlay:在視頻和視頻相連接的時(shí)刻,添加一層轉(zhuǎn)場(chǎng)動(dòng)畫,避免生硬的直接畫面切換。

3.3.3 音頻
將傳入的多段視頻伴音/配音/TTS朗讀接合成一條長(zhǎng)音軌。 根據(jù)用戶選擇添加BGM,使視頻更有氛圍。 處理淡入淡出,避免生硬切換。
3.3.4 字幕
添加ass特效字幕頭。 根據(jù)時(shí)間軸中的文本,生成ass字幕文件。 將ass字幕文件壓制到視頻流中。

3.3.5 組裝
將所有濾鏡命令用管道式濾鏡流方式組合,生成濾鏡流腳本。 將濾鏡流腳本與生成的ass字幕同時(shí)分別上傳到BOS上,便于后續(xù)FFmpeg命令直接讀取和執(zhí)行。
3.3.6 其他
需要在空白位置添加特定長(zhǎng)度的空白視頻/音頻,保證產(chǎn)出視頻的時(shí)間軸與視頻編輯器界面的時(shí)間軸一致。 對(duì)較長(zhǎng)的文本,需要精細(xì)拆分,以保證每段字幕都與TTS朗讀同步(這一步驟在UI層進(jìn)行計(jì)算)。
3.4 內(nèi)部服務(wù)
3.5 離線調(diào)度
4. 離線調(diào)度框架:實(shí)現(xiàn)分布式FFmpeg調(diào)度
4.1 Dispatch架構(gòu)圖

4.2 Dispatch實(shí)現(xiàn)原理
實(shí)例啟動(dòng)時(shí),Redis Hash數(shù)據(jù)結(jié)構(gòu)注冊(cè)自己,member=ip,value = 當(dāng)前隊(duì)列長(zhǎng)度:當(dāng)前狀態(tài):更新時(shí)間戳; 任何一個(gè)接收到Service層模塊的請(qǐng)求后,如果自己當(dāng)前隊(duì)列長(zhǎng)度為0,直接本地執(zhí)行,否則將請(qǐng)求轉(zhuǎn)發(fā)給隊(duì)列最短的正常實(shí)例; 轉(zhuǎn)發(fā)請(qǐng)求前先要從Redis獲取所有Dispatch數(shù)據(jù),解析所有實(shí)例的 ip、隊(duì)列長(zhǎng)度、狀態(tài)、更新時(shí)間戳,根據(jù)規(guī)則選擇一個(gè)最佳實(shí)例轉(zhuǎn)發(fā)請(qǐng)求; 消費(fèi)隊(duì)列中的請(qǐng)求時(shí),調(diào)用FFmpeg從BOS上獲取輸入文件,管道化濾鏡流腳本,ass字幕文件, 然后執(zhí)行道化濾鏡流腳本,在本地磁盤生成產(chǎn)出文件,并上傳BOS/VOD; 根據(jù)請(qǐng)求參數(shù),回調(diào)Service層模塊接口,更新任務(wù)狀態(tài)。
5. 圖文轉(zhuǎn)視頻技術(shù)項(xiàng)目:依托于視頻編輯器后端服務(wù)的技術(shù)性嘗試
5.1 以場(chǎng)景為單元編輯視頻

5.2 文章落地頁(yè)URL轉(zhuǎn)視頻

5.3 圖文轉(zhuǎn)視頻Demo
6. 總結(jié)與展望
6.1 組合創(chuàng)新,適應(yīng)潮流
6.2 技術(shù)共享,合作共贏
往期推薦