?Labs 導(dǎo)讀

音視頻編解碼在服務(wù)端以及客戶端，已經(jīng)是比較成熟的技術(shù)。但是在Web瀏覽器上，如何快速的對(duì)音視頻進(jìn)行編解碼，實(shí)現(xiàn)音視頻內(nèi)容制作、自定義視頻播放器等功能，且不依賴于服務(wù)端，一直是較難實(shí)現(xiàn)的行業(yè)痛點(diǎn)。

1FFmpeg

FFmpeg是一套可以用來記錄、轉(zhuǎn)換數(shù)字音頻、視頻，并能將其轉(zhuǎn)化為流的開源計(jì)算機(jī)程序。采用LGPL或GPL許可證。它提供了錄制、轉(zhuǎn)換以及流化音視頻的完整解決方案。它包含了非常先進(jìn)的音頻/視頻編解碼庫(kù)libavcodec。FFmpeg擁有非常強(qiáng)大的功能包括視頻采集功能、視頻格式轉(zhuǎn)換、視頻抓圖、給視頻加水印等。

業(yè)內(nèi)絕大部分音視頻編解碼能力底層都是使用FFmpeg進(jìn)行二次封裝。FFmpeg在Linux平臺(tái)下開發(fā)，采用C語言編寫，并且可以在各大操作系統(tǒng)環(huán)境中編譯運(yùn)行，包括Linux、Windows、Mac OS X等。

如何讓FFmpeg在瀏覽器Javascript運(yùn)行時(shí)里運(yùn)行，一直是一個(gè)困擾Web開發(fā)者的難題。

2“官配”WebAssembly

WebAssembly是由主流瀏覽器廠商組成的W3C社區(qū)團(tuán)體制定的一個(gè)新的規(guī)范。它是一種低級(jí)的類匯編語言，具有緊湊的二進(jìn)制格式，可以以接近原生的性能運(yùn)行，并為諸如C / C ++等語言提供一個(gè)編譯目標(biāo)，以便它們可以在Web上運(yùn)行。它也被設(shè)計(jì)為可以與JavaScript共存，允許兩者一起工作。

WebAssembly的出現(xiàn)仿佛成為了FFmpeg的官配，WebAssembly+FFmpeg的組合出現(xiàn)在越來越多的Web應(yīng)用上，用于在Web瀏覽器上進(jìn)行輕量快速的音視頻處理。

通過Emscripten compiler，可將C/C++項(xiàng)目(或任何其他語言的項(xiàng)目)使用 LLVM編譯，編譯出Javascript文件或WASM，在瀏覽器、 Node.js，或wasm runtimes上運(yùn)行。

3應(yīng)用實(shí)踐

“超級(jí)編輯部”中的“視頻截取上傳”和“截取關(guān)鍵幀”功能就是基于WebAssembly+FFmpeg實(shí)現(xiàn)了Web端本地音視頻處理。無需調(diào)用后臺(tái)api，也無需網(wǎng)絡(luò)傳輸，實(shí)現(xiàn)了音視頻快速剪輯，節(jié)約了時(shí)間和網(wǎng)絡(luò)帶寬，減輕了服務(wù)器壓力。

另外，由于FFmpeg需要進(jìn)行大量的運(yùn)算，為了避免運(yùn)算占用瀏覽器JavaScript主線程，我們采用了Web Worker新開啟一個(gè)獨(dú)立線程，異步地運(yùn)行FFmpeg，待FFmpeg運(yùn)算處理結(jié)束后再將運(yùn)算結(jié)果推送到Javascript主線程，從而提高了效率，并且避免了主線程阻塞。

4WebCodecs

WebAssembly+FFmpeg的方案能解決幾乎所有Web瀏覽器上的編解碼需求。但是這樣做，有一個(gè)很大的缺點(diǎn)，就是無法應(yīng)用硬件(GPU)對(duì)編解碼過程進(jìn)行加速，只能通過軟件(CPU)進(jìn)行運(yùn)算。這無疑是一種性能不夠有益的方案，沒有充分利用現(xiàn)代計(jì)算機(jī)的硬件優(yōu)勢(shì)。

為了解決這些問題，W3C WICG工作組提出了WebCodecs提案，WebCodecs API提供了一套比較底層的接口，能讓開發(fā)者直接訪問瀏覽器的編碼器與解碼器：

• Video and audio decoders
• Video and audio encoders
• Raw video frames
• Image decoders

這些接口現(xiàn)在在Chrome94的測(cè)試版上面已正式可用。可以通過以下方法檢測(cè)一下瀏覽器是否支持：

接下來我們以H264的解碼過程為例，展示W(wǎng)ebCodecs對(duì)視頻的解碼過程：

① 首先我們將回調(diào)函數(shù)和解碼器參數(shù)傳遞給VideoDecoder構(gòu)造器，創(chuàng)建解碼器實(shí)例；

② 一旦解碼器被初始化，你就可以開始給它提供EncodedVideoChunk對(duì)象了。所以我們接下來需要根據(jù)視頻流構(gòu)造EncodedVideoChunk對(duì)象提供給解碼器進(jìn)行解碼；

③ 解碼器會(huì)將解碼后的數(shù)據(jù)通過我們傳遞的handlerFrame回調(diào)輸出。如果我們是開發(fā)視頻播放器的話，拿到解碼后的數(shù)據(jù)：

• 等待合適的時(shí)間，顯示視頻幀
• 通過canvas.drawImage(frame)繪制幀

一旦不再需要某個(gè)幀，調(diào)用 close() 以在垃圾回收器到達(dá)之前主動(dòng)釋放底層內(nèi)存，這將減少Web應(yīng)用程序使用的平均內(nèi)存量。

5結(jié)語

可以看到經(jīng)過越來越多的探索以及標(biāo)準(zhǔn)的制定，在Web瀏覽器上對(duì)音視頻編解碼已經(jīng)逐漸走向成熟。相信通過越來越多開發(fā)者不斷的探索和實(shí)踐，在Web瀏覽器上實(shí)現(xiàn)媲美原生并且跨平臺(tái)的視頻播放器，音視頻剪輯工具等將成為可能。

同時(shí)，WebCodecs搭配WebTransport、WebGPU等一系列新型的提案和Api，將給Web上的音視頻處理帶來更多的可能性：

① 低延時(shí)Web端直播

改善目前Web端基于http-flv/hls直播的體驗(yàn)，WebTransport 替代HTTP， WebCodecs替代MSE, 相信Web端直播的延遲和卡頓數(shù)據(jù)會(huì)大大改善。

② 低延時(shí)云游戲、遠(yuǎn)程桌面

目前Web端的云游戲方案大都使用WebRTC, WebRTC為通話場(chǎng)景設(shè)計(jì)，本身的JitterBuffer，音視頻同步，渲染延遲設(shè)計(jì)會(huì)引入額外的延遲，且Web端并沒有暴露出來可以控制延遲的API, 使用WebTransport + WebCodecs 可以做到更可控的極致低延遲，相信未來在云游戲、遠(yuǎn)程桌面等場(chǎng)景WebTransport + WebCodecs的方案會(huì)成為主流。

③ 基于Web端的視頻內(nèi)容制作

OBS是直播推流與視頻錄制常用的工具，隨著我們有了WebCodecs的直接編解碼能力，配合WebTransport 的瀏覽器推流的能力，一個(gè)Web版本的OBS所需要的能力也越來越完備，我們拭目以待一個(gè)WebOBS工具出現(xiàn)。

④ 元宇宙

通過WebGPU用于瀏覽器的3D模型渲染，配合WebCodecs對(duì)渲染幀進(jìn)行編解碼處理，在元宇宙的內(nèi)容制作上將會(huì)有更多想象空間。