基於Web瀏覽器對音視訊編解碼的探索和實踐
Labs 導讀
音視訊編解碼在服務端以及客戶端,已經是比較成熟的技術。但是在Web瀏覽器上,如何快速的對音視訊進行編解碼,實現音視訊內容製作、自定義視訊播放器等功能,且不依賴於服務端,一直是較難實現的行業痛點。
1FFmpeg
FFmpeg是一套可以用來記錄、轉換數字音訊、視訊,並能將其轉化為流的開源計算機程式。採用LGPL或GPL許可證。它提供了錄製、轉換以及流化音視訊的完整解決方案。它包含了非常先進的音訊/視訊編解碼庫libavcodec。FFmpeg擁有非常強大的功能包括視訊採集功能、視訊格式轉換、視訊抓圖、給視訊加水印等。
業內絕大部分音視訊編解碼能力底層都是使用FFmpeg進行二次封裝。FFmpeg在Linux平臺下開發,採用C語言編寫,並且可以在各大作業系統環境中編譯執行,包括Linux、Windows、Mac OS X等。
如何讓FFmpeg在瀏覽器Javascript執行時裡執行,一直是一個困擾Web開發者的難題。
2“官配”WebAssembly
WebAssembly是由主流瀏覽器廠商組成的W3C社群團體制定的一個新的規範。它是一種低階的類組合語言,具有緊湊的二進位制格式,可以以接近原生的效能執行,併為諸如C / C ++等語言提供一個編譯目標,以便它們可以在Web上執行。它也被設計為可以與JavaScript共存,允許兩者一起工作。
WebAssembly的出現彷彿成為了FFmpeg的官配,WebAssembly+FFmpeg的組合出現在越來越多的Web應用上,用於在Web瀏覽器上進行輕量快速的音視訊處理。
通過Emscripten compiler,可將C/C++專案(或任何其他語言的專案)使用 LLVM編譯,編譯出Javascript檔案或WASM,在瀏覽器、 Node.js,或wasm runtimes上執行。
3應用實踐
“超級編輯部”中的“視訊擷取上傳”和“擷取關鍵幀”功能就是基於WebAssembly+FFmpeg實現了Web端本地音視訊處理。無需呼叫後臺api,也無需網路傳輸,實現了音視訊快速剪輯,節約了時間和網路頻寬,減輕了伺服器壓力。
另外,由於FFmpeg需要進行大量的運算,為了避免運算佔用瀏覽器JavaScript主執行緒,我們採用了Web Worker新開啟一個獨立執行緒,非同步地執行FFmpeg,待FFmpeg運算處理結束後再將運算結果推送到Javascript主執行緒,從而提高了效率,並且避免了主執行緒阻塞。
4WebCodecs
WebAssembly+FFmpeg的方案能解決幾乎所有Web瀏覽器上的編解碼需求。但是這樣做,有一個很大的缺點,就是無法應用硬體(GPU)對編解碼過程進行加速,只能通過軟體(CPU)進行運算。這無疑是一種效能不夠有益的方案,沒有充分利用現代計算機的硬體優勢。
為了解決這些問題,W3C WICG工作組提出了WebCodecs提案,WebCodecs API提供了一套比較底層的介面,能讓開發者直接訪問瀏覽器的編碼器與解碼器:
- Video and audio decoders
- Video and audio encoders
- Raw video frames
- Image decoders
這些介面現在在Chrome94的測試版上面已正式可用。可以通過以下方法檢測一下瀏覽器是否支援:
接下來我們以H264的解碼過程為例,展示WebCodecs對視訊的解碼過程:
① 首先我們將回調函式和解碼器引數傳遞給VideoDecoder構造器,建立解碼器例項;
② 一旦解碼器被初始化,你就可以開始給它提供EncodedVideoChunk物件了。所以我們接下來需要根據視訊流構造EncodedVideoChunk物件提供給解碼器進行解碼;
③ 解碼器會將解碼後的資料通過我們傳遞的handlerFrame回撥輸出。如果我們是開發視訊播放器的話,拿到解碼後的資料:
- 等待合適的時間,顯示視訊幀
- 通過canvas.drawImage(frame)繪製幀
一旦不再需要某個幀,呼叫 close() 以在垃圾回收器到達之前主動釋放底層記憶體,這將減少Web應用程式使用的平均記憶體量。
5結語
可以看到經過越來越多的探索以及標準的制定,在Web瀏覽器上對音視訊編解碼已經逐漸走向成熟。相信通過越來越多開發者不斷的探索和實踐,在Web瀏覽器上實現媲美原生並且跨平臺的視訊播放器,音視訊剪輯工具等將成為可能。
同時,WebCodecs搭配WebTransport、WebGPU等一系列新型的提案和Api,將給Web上的音視訊處理帶來更多的可能性:
① 低延時Web端直播
改善目前Web端基於http-flv/hls直播的體驗,WebTransport 替代HTTP, WebCodecs替代MSE, 相信Web端直播的延遲和卡頓資料會大大改善。
② 低延時雲遊戲、遠端桌面
目前Web端的雲遊戲方案大都使用WebRTC, WebRTC為通話場景設計,本身的JitterBuffer,音視訊同步,渲染延遲設計會引入額外的延遲,且Web端並沒有暴露出來可以控制延遲的API, 使用WebTransport + WebCodecs 可以做到更可控的極致低延遲,相信未來在雲遊戲、遠端桌面等場景WebTransport + WebCodecs的方案會成為主流。
③ 基於Web端的視訊內容製作
OBS是直播推流與視訊錄製常用的工具,隨著我們有了WebCodecs的直接編解碼能力,配合WebTransport 的瀏覽器推流的能力,一個Web版本的OBS所需要的能力也越來越完備,我們拭目以待一個WebOBS工具出現。
④ 元宇宙
通過WebGPU用於瀏覽器的3D模型渲染,配合WebCodecs對渲染幀進行編解碼處理,在元宇宙的內容製作上將會有更多想象空間。
- 使用 Podman Desktop 在 Fedora Linux 上管理容器
- 你是怎麼在 Linux 幹掉程序的?
- 玩轉核心連結串列Llist_Head,教你管理不同型別節點的實現
- Fedora 37 可以測試了,Linux 之父日常作業系統帶來 GNOME 43
- Windows 12來了!原來又是設計師腦洞大開的傑作
- 軟體開發人員的理想 Linux 發行版
- 你應該知道的 22 個基本的 Linux 網路命令
- 谷歌為Chrome瀏覽器今年的第五個 "0 day漏洞" 打補丁
- 基於Web瀏覽器對音視訊編解碼的探索和實踐
- 61秒,摸透Linux的健康狀態!
- HarmonyOS應用開發:鴻蒙JS實戰,計算器功能開發!
- Linux 怎麼防止 ssh 被暴力破解
- 比各種清理大師靠譜!Edge瀏覽器新技術大幅提速
- 最近版 Opera 引發 Windows 可靠性監視器錯亂
- 修復 Ubuntu 中的 “cannot find signatures with metadata for snap” 錯誤
- 不想升級Windows 11?教你堅守Windows 10的正確姿勢
- 這六個 VS Code 主題你不應該錯過
- 要想Linux命令列玩的溜,還得apropos!此文運維必看
- Linux 之父發話:Rust 將合併到 Linux 5.20 核心中去
- Ubuntu Core 22 來了,適用於物聯網和邊緣裝置