美攝云非編是一款新型網(wǎng)頁端非線性編輯工具，應(yīng)用WebAssembly技術(shù)實(shí)現(xiàn)網(wǎng)頁端直接渲染圖像。本次LiveVideoStackCon 2020線上峰會我們邀請到了北京美攝網(wǎng)絡(luò)科技有限公司的研發(fā)總監(jiān)黃裔來做分享，對網(wǎng)頁端編輯、WebAssembly技術(shù)有興趣的聽眾可以從中了解到整個(gè)架構(gòu)的搭建、技術(shù)實(shí)施、注意事項(xiàng)以及一些常見問題的處理等。

文 / 黃裔

整理 / LiveVideoStack

大家好，我是北京美攝網(wǎng)絡(luò)科技有限公司的研發(fā)總監(jiān)黃裔，本次我分享的主題是美攝云非編系統(tǒng)，是一種web端視音頻實(shí)時(shí)編輯渲染方案。

本次內(nèi)容分為五個(gè)部分:一是美攝云非編方案的技術(shù)背景，也就是目前web端視音頻編輯的現(xiàn)狀以及我們采用新方案的原因；二是美攝云非編的技術(shù)整體方案，包括前端、后端及整體技術(shù)框架；三是美攝云非編方案的緩存機(jī)制，也是美攝云非編實(shí)時(shí)性的一個(gè)重要的保障；四是美攝云非編的整體工作流程；五是一些技術(shù)展望和本次問題的討論實(shí)踐。

1. 背景介紹

1.1 公司背景介紹

北京美攝科技有限公司，成立于2014年10月，是一家從新奧特集團(tuán)獨(dú)立出來，專注于視音頻領(lǐng)域開發(fā)20年的智能視音頻整體解決方案服務(wù)商。服務(wù)內(nèi)容包括移動端視音頻圖像智能處理、識別以及深度學(xué)習(xí)等，服務(wù)領(lǐng)域涵蓋移動APP、智能手機(jī)、智能硬件、廣電及通信運(yùn)營商等行業(yè)客戶。

1.2 技術(shù)背景

這部分我將介紹云非編相關(guān)的技術(shù)背景，在web端的非線性編輯軟件中，傳統(tǒng)的方法是由服務(wù)器端進(jìn)行音視頻解碼、特效處理和圖像渲染，再將音視頻流混合后發(fā)送給前端進(jìn)行播放和顯示，也就是說，web端只要做一次編輯就要和服務(wù)端進(jìn)行一次通信，服務(wù)端再進(jìn)行一系列的特效處理才能返回給web端預(yù)覽，對網(wǎng)絡(luò)依賴度過高，實(shí)時(shí)性也很差，客戶體驗(yàn)很不好。

美攝云非編系統(tǒng)是基于WebAssembly技術(shù)實(shí)現(xiàn)了web端圖像的實(shí)時(shí)渲染，利用緩存機(jī)制實(shí)現(xiàn)了大部分視音頻編輯去網(wǎng)絡(luò)化。

2. 技術(shù)整體方案

2.1 整體框架

美攝云非編整套系統(tǒng)的web端核心就是美攝的SDK，而能夠使美攝SDK跨平臺運(yùn)行在web端則是基于目前已經(jīng)比較成熟的WebAssembly技術(shù)。WebAssembly技術(shù)其實(shí)已經(jīng)提出幾年了，而最近才趨于成熟，并且開始應(yīng)用于一些web端的應(yīng)用，它的誕生與人們對web端的需求是密切相關(guān)的。

web端應(yīng)用想要提升性能，傳統(tǒng)的JS沒辦法實(shí)現(xiàn)，于是，三大瀏覽器廠商微軟、谷歌和火狐分別提出了自己的解決方案，微軟提出了TypeScript，谷歌提出了Dart，火狐提出了asm.js，但是這些方案互不兼容，各自為戰(zhàn)，違背了web端的統(tǒng)一標(biāo)準(zhǔn)，所以就出現(xiàn)了WebAssembly。

WebAssembly顧名思義就是web端的匯編技術(shù)，它編譯生成的二進(jìn)制文件WASM更接近機(jī)器指令，執(zhí)行速度就更快。目前對于WebAssembly支持最好的編譯環(huán)境是LLVM，更加完善的一款工具就是Emscripten，它提供了很多API，可以讓W(xué)ebAssembly的使用更簡單，但是它的文檔描述有些不太清楚，有些API使用還得需要一些推敲才能確定。

WebAssembly可以將很多種語言進(jìn)行編譯提供給web端使用，美攝SDK使用的是C/C++代碼實(shí)現(xiàn)的，所以通過Emscripten編譯成WASM格式的二進(jìn)制文件后，美攝SDK的核心功能就能無縫銜接的移植到web端，大大的節(jié)省了美攝云非編的開發(fā)工作量，縮短了開發(fā)周期，同時(shí)又能保證web端的所有效果都和美攝其他平臺展示的一樣。同時(shí)WebAssembly也比asm.js機(jī)制更加快速和安全，雖然在瀏覽器兼容方面不如asm.js，但是現(xiàn)在已經(jīng)有越來越多的瀏覽器能夠很好地支持WebAssembly了，所以我們堅(jiān)定的選擇了它。

圖中WASM就相當(dāng)于美攝的SDK，除了瀏覽器本身對多線程的一些限制和渲染機(jī)制有些區(qū)別以外，其他的功能都是無差別、可使用的。中間部分是web端的js業(yè)務(wù)邏輯層，包括所有的非線性編輯處理邏輯及頁面UI展示，同時(shí)它支持從本地導(dǎo)入上傳視音頻文件，合成的成片下載到本地等功能。下部是服務(wù)端，主要包括兩大業(yè)務(wù)功能：一是對上傳的視音頻文件進(jìn)行分片轉(zhuǎn)碼，二是對編輯完成的工程進(jìn)行成片輸出。這些視音頻資源保存在云存儲，并和用戶關(guān)聯(lián)一起記錄在數(shù)據(jù)庫中。

2.2 實(shí)現(xiàn)流程

以下我將介紹web端的內(nèi)部邏輯及實(shí)現(xiàn)流程。web端加載WASM并初始化完成之后，用戶便可以導(dǎo)入本地的視音頻進(jìn)行使用，考慮到導(dǎo)入的視音頻分辨率、碼率、時(shí)長等信息不同，甚至有一些gif圖、tga序列等情況，如果都只是用原視頻來編輯，就增加了對網(wǎng)絡(luò)的要求，無法保證實(shí)時(shí)性，而且對于非線性編輯中經(jīng)常使用的裁剪、移動、覆蓋、多軌等要求，這種方式也是低效的，所以，我們統(tǒng)一進(jìn)行了轉(zhuǎn)碼，并且進(jìn)行了分片。

轉(zhuǎn)碼成低分辨率的視音頻切片，既可以提高下載速度，又便于緩存和讀取使用。轉(zhuǎn)碼切片的信息文件，我們采用了主流的m3u8文件格式，這既考慮到其他播放需求，又?jǐn)U展了我們自己的一些私有信息，比如分辨率，時(shí)長等web端使用需要的信息。m3u8數(shù)據(jù)返回到web端之后，會保存在IndexedDB中。

使用m3u8添加視音頻素材上軌進(jìn)行編輯時(shí)，WASM會檢查FS緩存中是否有緩存過當(dāng)前要編輯的切片。如果FS中沒有緩存，則檢查IndexedDB中是否下載保存過這個(gè)切片；如果已經(jīng)緩存過，就可以直接讀取FS中的緩存數(shù)據(jù)進(jìn)行解碼編輯。如果IndexedDB中也沒有，就需要從服務(wù)器的云存儲上下載相應(yīng)的切片，并且保存在IndexedDB中供編輯使用。

整個(gè)過程都是在預(yù)加載的過程中完成的，這樣既能按需加載，又能保證播放預(yù)覽的實(shí)時(shí)性要求，即使是多軌視音頻編輯，也能流暢的播放、預(yù)覽。而且，使用了這套緩存機(jī)制后，只要是曾經(jīng)播放過或者加載過視音頻片段，就不再需要下載了，完全可以離線進(jìn)行編輯，去網(wǎng)絡(luò)化讓用戶感覺就像在本地使用一樣流暢，體驗(yàn)和以往的云非編完全不同。

同理，云非編里面使用的字幕樣式、動畫貼紙、粒子、濾鏡、字體、主題等特效包，也是通過這樣的緩存機(jī)制由web端進(jìn)行管理和使用的，同樣是下載之后就緩存在web端了，符合去網(wǎng)絡(luò)化的設(shè)計(jì)思路。可能有些web端的開發(fā)者不太熟悉IndexedDB和FS，因?yàn)閷τ谝话愕膚eb端應(yīng)用，其實(shí)很多時(shí)候是用不到它們的。

IndexedDB作為瀏覽器端的數(shù)據(jù)庫存儲形式已經(jīng)有一段時(shí)間了，它以key-value的形式存儲，便于查找，value可以是復(fù)雜的數(shù)據(jù)結(jié)構(gòu)，用途很廣，更重要的是它的存儲空間很大，相對于LocalStorge的四五兆的存儲，可謂是天壤之別，用于流媒體緩存數(shù)據(jù)再合適不過了。但是由于IndexedDB的操作大多是異步的，所以在使用的時(shí)候，需要把數(shù)據(jù)及時(shí)加載到FS中，而FS其實(shí)就是web端的一個(gè)文件系統(tǒng)，具有文件讀寫等操作的能力，這個(gè)文件系統(tǒng)的路徑也是WASM可識別的，很適合用來作為中間的緩存區(qū)。

2.3 云非編的數(shù)據(jù)結(jié)構(gòu)及流媒體的工作流程

其實(shí)云非編整體的結(jié)構(gòu)和移動端的以及傳統(tǒng)的非編是一樣的，主要還是基于時(shí)間線的一整套視音頻流的處理，添加特效等等。對于視音頻編輯而言，時(shí)間線是視音頻編輯的一個(gè)大的框架和載體，它就像播放器的控制滑桿一樣，承載著所有的視音頻數(shù)據(jù)。時(shí)間線的內(nèi)部其實(shí)是由很多的軌道組合成的，這些軌道大概分為視頻軌道、音頻軌道和特效軌道，其中視頻軌道和特效軌道是有層級關(guān)系的，層級決定了它們的渲染順序，也就是最終圖像的效果哪個(gè)在視覺的最前端。而音頻軌道因?yàn)槭腔煲粜Ч?#xff0c;所以只分聲道，并沒有層級關(guān)系。軌道上添加的視音頻片段、字幕、貼紙等特效就構(gòu)成了最終輸出的圖像，輸出到不同系統(tǒng)的預(yù)覽窗口上，對于云非編系統(tǒng)，就是輸出到web端的一個(gè)canvas上。

比較重要的一環(huán)就是合成視頻，因?yàn)槎鄶?shù)編輯的目的都是為了輸出一個(gè)完整的視頻。對于美攝云非編，同樣還支持美攝SDK可以使用的特效資源包，這些特效包就像插件一樣，即插即用，給云非編帶來了更多的炫酷效果。

整個(gè)時(shí)間線構(gòu)建好之后，所有的渲染就交給流媒體引擎了，視音頻的編解碼，視音頻流的調(diào)度、同步、預(yù)取等一系列復(fù)雜的工作，都是流媒體引擎完成的。

2.4 工作流程

之所以介紹這個(gè)工作流程，不僅因?yàn)樗闹匾?#xff0c;還因?yàn)樵品蔷幭到y(tǒng)在渲染和最終輸出的顯示和之前是不同的，而這也是云非編架構(gòu)的重要一環(huán)，就是最終的渲染和輸出。

首先輸入源就是視頻源和音頻源，視頻源通過video processor以video frame的格式進(jìn)行調(diào)度，這里包括視頻文件的解碼，視頻格式的轉(zhuǎn)換，封裝等等，傳給video output。音頻源以audio sample的格式傳給audio output，在輸出之前視音頻數(shù)據(jù)要以video frame的時(shí)間戳進(jìn)行同步。

在美攝云非編系統(tǒng)里，video output最終是通過Web GL渲染成Image Bitmap畫在canvas上進(jìn)行預(yù)覽的，audio output是通過Web Audio的輸出到揚(yáng)聲器的。對于合成視頻，則是直接將視音頻數(shù)據(jù)編碼寫入文件即可。

2.5 配音功能的實(shí)現(xiàn)

配音也是非編軟件里面一個(gè)重要的功能，美攝云非編里面的錄音功能的實(shí)現(xiàn)步驟是：首先，開啟web端的麥克風(fēng)之后，使用Web Audio進(jìn)行音頻數(shù)據(jù)采集，通過分段的形式將音頻數(shù)據(jù)傳給WASM，編碼輸出成m4a的音頻格式。

之所以選擇通過WASM來輸出音頻文件，一方面是web端提供的輸出音頻的格式比較有限，無法錄制出我們需要的音頻格式，另一方面是在WASM提供了這樣的輸出音頻文件的API之后，對于開發(fā)者使用起來也特別方便了，即使是不太了解音頻編碼的開發(fā)者，也可以很容易的輸出錄音文件。

對于Web Audio在錄音時(shí)的使用，需要注意它的延時(shí)性，在不同的瀏覽器上的表現(xiàn)也有所不同，所以在開始錄制時(shí)，一定要把開始的一部分audio sample數(shù)據(jù)進(jìn)行過濾，這樣才能保證配音的時(shí)間和時(shí)間線對應(yīng)好，確保聲畫同步。配音出來的音頻文件同樣要上傳服務(wù)器進(jìn)行分片轉(zhuǎn)碼。為了保證web端體驗(yàn)的流暢性，需要將錄制好的音頻文件添加到時(shí)間線的音頻軌道上，進(jìn)行編輯使用，等分片轉(zhuǎn)碼完成之后再將軌道上的數(shù)據(jù)替換成轉(zhuǎn)碼后的數(shù)據(jù)，讓用戶使用起來不會有被中斷的感覺。

3. 服務(wù)端技術(shù)方案

美攝云非編的服務(wù)器端的整體框架如圖所示，總控服務(wù)器是負(fù)責(zé)和web端進(jìn)行交互的，所有web API都是它提供的，包括用戶信息、素材信息、轉(zhuǎn)碼任務(wù)、合成任務(wù)等。另外兩個(gè)核心的功能模塊是轉(zhuǎn)碼服務(wù)器集群和合成服務(wù)器集群，這兩個(gè)服務(wù)器集群中的每一臺服務(wù)器都分別部署了Transcoder Manager和Process Server Manager，它們接收到總控服務(wù)器發(fā)送的轉(zhuǎn)碼和合成任務(wù)時(shí)，會創(chuàng)建新Transcoder和ProcessServer進(jìn)程來處理任務(wù)，完成后退出進(jìn)程。

此外，轉(zhuǎn)碼服務(wù)器處理的工作不僅僅是轉(zhuǎn)碼分片一項(xiàng)工作，其實(shí)它還處理了很多前期需要的準(zhǔn)備，比如生成封面、縮略圖，音頻波形等等，并且web reader做了很多的優(yōu)化，避免了傳統(tǒng)的reader緩慢讀取一些網(wǎng)絡(luò)視頻地址的問題，所以轉(zhuǎn)碼效率很高，并且這些數(shù)據(jù)生成都是在一整套流程里面完成的，不需要二次讀取解碼等，也節(jié)省了很多時(shí)間。

這張圖詳細(xì)的解釋了服務(wù)器集群中的消息和數(shù)據(jù)處理，其中有數(shù)據(jù)的同步，消息的請求和發(fā)送。總控服務(wù)器還負(fù)責(zé)集群的負(fù)載均衡處理，如果滿負(fù)載之后則會進(jìn)行任務(wù)排隊(duì)，并且在某個(gè)任務(wù)失敗之后，根據(jù)失敗的類型區(qū)分是否需要重試，還要對任務(wù)的執(zhí)行進(jìn)程進(jìn)行心跳監(jiān)測，保證任務(wù)的正常進(jìn)行。

消息的具體實(shí)現(xiàn)流程圖

上圖展示了美攝云非編的簡單使用流程，先是用戶注冊、登錄，然后創(chuàng)建工程或者打開已有工程，接著加載WASM相關(guān)文件，并初始化WASM里面的流媒體上下文，然后創(chuàng)建時(shí)間線并連接到預(yù)覽窗口。開始編輯時(shí)，上傳視音頻資源到服務(wù)器進(jìn)行轉(zhuǎn)碼分片，生成相應(yīng)的m3u8分片信息文件，使用m3u8文件上軌進(jìn)行編輯，WASM進(jìn)行視音頻分片預(yù)取及緩存處理。如果添加特效資源包，則下載并緩存資源包，再安裝使用，編輯的工程所有數(shù)據(jù)通過xml形式保存到服務(wù)器，再通過合成任務(wù)生成出成片，供web端進(jìn)行下載使用或預(yù)覽。

這張是美攝云非編的主編輯界面的展示圖。主要有手繪粒子、拍唱詞、波形展示以及多種編輯模式。

4. 實(shí)際應(yīng)用案例

圖中是美攝在各個(gè)領(lǐng)域的合作伙伴，就不一一列舉了。目前，美攝的云非編方案已經(jīng)在Bilibili的web端應(yīng)用并上線。

最后對目前的技術(shù)做幾個(gè)總結(jié)：

首先使用WebAssembly編程時(shí)，一定要對內(nèi)存及時(shí)釋放，因?yàn)閃ebAssembly并沒有自動回收機(jī)制，尤其是前端的開發(fā)工程師，可能不太善于處理對象的釋放，但是這里一定要記得手動釋放內(nèi)存，否則造成內(nèi)存泄漏將是災(zāi)難性的；

其次是在開啟Web Audio時(shí)，如果是chrome內(nèi)核的瀏覽器，并且內(nèi)核版本大于等于70，那么是不能自動開啟的，需要在一個(gè)操作里面才能開啟；目前美攝云非編需要多線程對內(nèi)存做很多操作，所以就需要使用共享內(nèi)存的機(jī)制，也就是瀏覽器要支持SharedArrayBuffer，這對瀏覽器是有一些限制的，但是為了提高運(yùn)行效率，只能犧牲一部分不支持的瀏覽器版本。

此外，在WASM里面需要使用web端Dom節(jié)點(diǎn)或者需要JS來實(shí)現(xiàn)一些簡單工作時(shí)，可以使用內(nèi)嵌JS的方式，簡單實(shí)用，但是要注意的是參數(shù)傳遞不要過于復(fù)雜；還有錄音數(shù)據(jù)要分片并且做適當(dāng)?shù)钠啤?/p>

我們對web端的一些期望和關(guān)注是：

瀏覽器對WebAssembly的支持，以及對SharedArrayBuffer等流媒體要使用的支持，不論是國內(nèi)的瀏覽器還是國外的，包括移動端，都能對這些標(biāo)準(zhǔn)更加統(tǒng)一的對齊，這樣對于web端的開發(fā)者將是一道福音，屆時(shí)一定會有越來越多的web端應(yīng)用使用WebAssembly。

---

LiveVideoStackCon 2020?北京

2020年10月31日-11月1日

點(diǎn)擊【閱讀原文】了解更多詳細(xì)信息

總結(jié)

以上是生活随笔為你收集整理的美摄云非编系统——网页端实时编辑渲染方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。