WebCodecs —— 5G時代最值得學(xué)習(xí)的 “低層次” 音視頻編解碼API
前言 & 動機
在現(xiàn)代的Web技術(shù)中，瀏覽器為我們提供了很多與多媒體相關(guān)的API，例如：「HTMLMediaElement」, 「Media Source Extensions」, 「WebAudio」,「MediaRecorder」, 「WebRTC」 但是這些API都是處于“高層次”，也就是說它們專注于解決某一問題的API。但是如果開發(fā)者想要使用一些“低層次”的能力，比如轉(zhuǎn)碼等任務(wù)時，這些API顯得有些力不從心。為了解決這個問題，大部分的開發(fā)者可能會應(yīng)用 WebAssembly來解決音視頻編解碼的問題，但是這無疑會帶來巨大的性能開銷，并且開發(fā)起來也很費時費力。
現(xiàn)在，我們可以使用 WebCodecs 這一瀏覽器提供的API來實現(xiàn)音視頻的編解碼工作。今天就帶大家來初步認識一下 WebCodecs 這一瀏覽器提供的新API。
WebCodecs的設(shè)計目標
「流式處理能力（Streamability）」: 能夠處理流式數(shù)據(jù)，這意味著我們的音視頻數(shù)據(jù)不必完全被下載到磁盤中才能夠被處理，當(dāng)一部分數(shù)據(jù)通過網(wǎng)絡(luò)被下載時，我們就可以進行編解碼工作。 「高效（Efficiency）」：能夠利用系統(tǒng)級別或者是相關(guān)硬件的能力來進行編解碼過程，使其更加的高效。并且將GC的壓力限制在最低的限度，允許編解碼的過程脫離主線程運行。 「可組合型（Composability）」：與現(xiàn)有的WebAPI具有良好的兼容性，比如 Streams，WebTransport， WebAssembly。 「靈活性（Flexibility）」：能夠在全場景中使用該API（硬實時系統(tǒng)、軟實時系統(tǒng)、非實時系統(tǒng)） 「對稱性（Symmetry）」：對于編碼與解碼過程有相似的API設(shè)計。
但是我們需要注意一下，以下兩點不是 WebCodecs 的設(shè)計初衷：
對音視頻文件進行封裝、解封裝。這里額外說明一下，我們常見的mp4, flv 都是對編碼好的視頻數(shù)據(jù)(h.264, h.265)和音頻數(shù)據(jù)(aac等)的封裝格式。WebCodecs 不負責(zé)將這些格式解封為裸視頻、裸音頻數(shù)據(jù)。要實現(xiàn)這個功能，可以使用 mp4box.js 這類的解封裝的庫
使用WebAssembly或 JavaScript 編寫編解碼器
而WebCodecs提供了“低層次”的API，能夠更好地支持一些諸如：低延遲的游戲視頻流、客戶端側(cè)進行視頻轉(zhuǎn)碼、兼容性更高的多媒體播放器。這樣我們就不會使用JavaScript或者是WebAssembly來實現(xiàn)編解碼的邏輯。
WebCodecs的關(guān)鍵應(yīng)用場景
超低延時的直播流 云游戲 直播流上傳 非實時的音視頻編碼/解碼/轉(zhuǎn)碼，比如本地音視頻文件編輯 對圖片進行編解碼 對多個輸入音視頻文件合并為一個音視頻文件（音視頻剪輯系統(tǒng)）
WebCodecs核心概念及關(guān)鍵流程
Frames（幀）是視頻處理中最為重要的概念。WebCodecs大部分的類不是在消耗幀就是在生產(chǎn)幀。例如視頻編碼器就是在不斷消耗幀，將幀變?yōu)榫幋a數(shù)據(jù)(encoded chunks)
而解碼器恰恰相反，它將編碼數(shù)據(jù)解碼為幀。
WebCodecs 現(xiàn)狀及兼容性
WebCodecs 這一API還是很新的，該API正式發(fā)布于 Chrome 94的版本中。目前在桌面端還僅僅被chromium系內(nèi)核的瀏覽器所支持：
Chrome 94及以上 Edge 94及以上 Opera 80及以上
移動端：
Webview Android Chrome Android
可以看出，目前 WebCodec 的兼容性還不太好。不過如果專業(yè)的編輯工具來開發(fā)，還是可以要求用戶使用最新的瀏覽器進行使用的。
開發(fā)工具支持
在chromium內(nèi)核的DevTools中，新增了“媒體”選項卡，以顯示 WebCodecsAPI的相關(guān)信息及日志。
檢測當(dāng)前環(huán)境是否支持
我們可以判斷 window 中是否具有 VideEncoder 對象即可。
if?('VideoEncoder'?in?window)?{
//?WebCodecs?API?is?supported.\
}
5G時代的機遇
在現(xiàn)在的5G時代，在人們的日常生活中充斥了大量的音視頻信息，比如現(xiàn)在最為火爆的短視頻應(yīng)用“抖音”等等，視頻作為一種信息傳播媒介，為人們帶來了以前從沒有達到過的信息維度。那么 WebCodecs 作為跟音視頻相關(guān)的一個API，我們可以嘗試解決一些現(xiàn)有技術(shù)的痛點：
Media Source Extensions(MSE)的問題
Media Source Extensions 作為目前各大視頻網(wǎng)站、直播平臺最廣泛使用的技術(shù)，目前還存在以下的問題
1、必須將相關(guān)數(shù)據(jù)封裝為特定格式再輸入到Buffer中 2、一些不需要將視頻回放的使用場景（比如：云游戲），我們必須手動刪除之前的Buffer。3、在MSE不能夠很好的使用解碼后的數(shù)據(jù)（比如：轉(zhuǎn)碼）
輕量級的移動剪輯需求
現(xiàn)在的短視頻十分的爆火，但是這短視頻爆火的背后離不開大量的視頻制作技術(shù)，對于一些輕量級的需求，現(xiàn)在完全可以使用瀏覽器來完成，一些軟件公司勢必會使用WebCodecs 這一API制作出相應(yīng)的Web平臺的視頻編輯器。使用Web技術(shù)制作編輯器不僅具有良好的兼容性，而且可以提高開發(fā)效率和降低人力成本。
總結(jié)
雖然目前 WebCodecs 這一API還是一位”新人“。但是作者相信其潛力還是非常大的，尤其是在當(dāng)前的這樣的一個具有無限可能的5G時代。作為5G時代的開發(fā)者，我們應(yīng)該抓住這樣的一個機遇，現(xiàn)在就開始學(xué)習(xí)起來吧！