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

文 / 黃裔

整理 / LiveVideoStack

大家好，我是北京美攝網絡科技有限公司的研發總監黃裔，本次我分享的主題是美攝云非編系統，是一種web端視音頻實時編輯渲染方案。

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

1. 背景介紹

1.1 公司背景介紹

北京美攝科技有限公司，成立于2014年10月，是一家從新奧特集團獨立出來，專注于視音頻領域開發20年的智能視音頻整體解決方案服務商。服務內容包括移動端視音頻圖像智能處理、識別以及深度學習等，服務領域涵蓋移動APP、智能手機、智能硬件、廣電及通信運營商等行業客戶。

1.2 技術背景

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

美攝云非編系統是基于WebAssembly技術實現了web端圖像的實時渲染，利用緩存機制實現了大部分視音頻編輯去網絡化。

2. 技術整體方案

2.1 整體框架

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

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

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

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

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

2.2 實現流程

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

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

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

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

同理，云非編里面使用的字幕樣式、動畫貼紙、粒子、濾鏡、字體、主題等特效包，也是通過這樣的緩存機制由web端進行管理和使用的，同樣是下載之后就緩存在web端了，符合去網絡化的設計思路。可能有些web端的開發者不太熟悉IndexedDB和FS，因為對于一般的web端應用，其實很多時候是用不到它們的。

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

2.3 云非編的數據結構及流媒體的工作流程

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

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

整個時間線構建好之后，所有的渲染就交給流媒體引擎了，視音頻的編解碼，視音頻流的調度、同步、預取等一系列復雜的工作，都是流媒體引擎完成的。

2.4 工作流程

之所以介紹這個工作流程，不僅因為它的重要性，還因為云非編系統在渲染和最終輸出的顯示和之前是不同的，而這也是云非編架構的重要一環，就是最終的渲染和輸出。

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

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

2.5 配音功能的實現

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

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

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

3. 服務端技術方案

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

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

這張圖詳細的解釋了服務器集群中的消息和數據處理，其中有數據的同步，消息的請求和發送。總控服務器還負責集群的負載均衡處理，如果滿負載之后則會進行任務排隊，并且在某個任務失敗之后，根據失敗的類型區分是否需要重試，還要對任務的執行進程進行心跳監測，保證任務的正常進行。

消息的具體實現流程圖

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

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

4. 實際應用案例

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

最后對目前的技術做幾個總結：

首先使用WebAssembly編程時，一定要對內存及時釋放，因為WebAssembly并沒有自動回收機制，尤其是前端的開發工程師，可能不太善于處理對象的釋放，但是這里一定要記得手動釋放內存，否則造成內存泄漏將是災難性的；

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

此外，在WASM里面需要使用web端Dom節點或者需要JS來實現一些簡單工作時，可以使用內嵌JS的方式，簡單實用，但是要注意的是參數傳遞不要過于復雜；還有錄音數據要分片并且做適當的偏移。

我們對web端的一些期望和關注是：

瀏覽器對WebAssembly的支持，以及對SharedArrayBuffer等流媒體要使用的支持，不論是國內的瀏覽器還是國外的，包括移動端，都能對這些標準更加統一的對齊，這樣對于web端的開發者將是一道福音，屆時一定會有越來越多的web端應用使用WebAssembly。

---

LiveVideoStackCon 2020?北京

2020年10月31日-11月1日

點擊【閱讀原文】了解更多詳細信息

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。