538
通常，攝像機H265視頻編碼在傳輸快、存儲小、畫質(zhì)高等方面的優(yōu)勢使得其備受企業(yè)青睞，但是由于主流瀏覽器不能夠支持這種格式，因此在瀏覽器下播放和解析視頻都受到一定的約束。那么，如何實現(xiàn) Web 視頻播放的通用就成為了我們必須研究的課題。本期技術(shù)的真相將帶你了解曠視盤古系統(tǒng)是如何解決 Web 視頻播放通用方案這一難題的。
一、背景
在視頻智能分析領(lǐng)域，絕大部分?jǐn)z像機視頻碼流均支持 H264 和 H265 兩種編碼格式，H265 視頻編碼相比 H264 有著諸多優(yōu)點：視頻數(shù)據(jù)傳輸帶寬減半、存儲減半、畫質(zhì)提升等。因此，在大部分智慧安全管理項目中， H265 視頻編碼使用較為廣泛，能夠直接減少用戶項目成本。
但當(dāng)下主流瀏覽器對 H265 視頻編碼格式仍然未能夠支持，主要還是支持 H264 視頻編碼格式，隨著 Flash 插件退出市場后，在 Chrome 瀏覽器下支持視頻播放難度雪上加霜，所以大部分智慧安全管理廠家依然是在 IE 瀏覽器插件機制下支持著攝像機視頻播放。
曠視在瀏覽器端視頻播放也有諸多實踐，曠視的盤古系統(tǒng)深耕智慧園區(qū)領(lǐng)域，在業(yè)內(nèi)各項指標(biāo)均遙遙領(lǐng)先，系統(tǒng)功能繁多，其中視頻播放就是其必不可少的一部分，面向 ToB 市場，盤古平臺系統(tǒng)自然需要適配用戶各種使用場景，能夠在不同瀏覽器中進行視頻播放是基本要求。因此，在視頻播放方面，我們需要研究一套通用的 Web 視頻播放解決方案，來適配不同使用場景：高性能多路視頻播放、強實時性視頻播放等，并能夠兼容不同的瀏覽器（IE / 360 / Chrome）。
二、當(dāng)前解決方案
盤古系統(tǒng)中視頻數(shù)據(jù)來源
如上圖所示，盤古系統(tǒng)中，視頻數(shù)據(jù)來源各異、數(shù)據(jù)內(nèi)容各異、甚至視頻編碼也各不相同，怎么樣實現(xiàn) PC 端跨瀏覽器進行 Web 視頻播放，當(dāng)前也有諸多方案，下面簡易介紹下各個方案的實現(xiàn)關(guān)鍵點。
2.1 Web 前端封裝 FMP4 + H5 video 播放顯示
方案說明：
Web 前端收取到視頻流后，進行 FMP4 封包，并使用 MSE 擴展 video 標(biāo)簽進行視頻播放，對于智能幀（ Intelligence Frame 即結(jié)構(gòu)化信息）采取透傳方式，前端 Canvas 繪制。
MSE 即 Media Source Extensions，是一個 W3C 草案，MSE 擴展了 HTML5 的 Video 和 Audio 標(biāo)簽?zāi)芰?，目前支持的視頻封裝格式是 MP4，支持的視頻編碼是 H.264 和 MPEG4 ,支持的音頻編碼是 AAC 和 MP3，F(xiàn)MP4 即 Fragment mp4，前端將封裝好的 FMP4 數(shù)據(jù)直接送進 MediaSource 即可實現(xiàn)瀏覽器視頻播放，當(dāng)前主流瀏覽器支持情況：
當(dāng)前瀏覽器對MSE支持情況
2.2 Web 前端 WebAssembly 解碼 + Canvas 顯示
方案說明：
前端收取到視頻流后直接使用 ffmpeg 生成的 WebAssembly 進行軟解碼，輸出 YUV、PCM，前端通過 WebGL 在 Canvas 上繪制視頻畫面，同時通過 Web Audio API 播放音頻。
WebAssembly 是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運行，它是一種低級的類匯編語言，具有緊湊的二進制格式，并為其他語言提供一個編譯目標(biāo)，以便它們可以在 Web 上運行。它也被設(shè)計為可以與 JavaScript 共存，允許兩者一起工作。近幾年已經(jīng)被各主流瀏覽器所廣泛支持，支持情況：
2.3 后端解轉(zhuǎn)碼 + H5 video 播放顯示
方案說明：
前兩方案基本是依靠 Web 前端實現(xiàn)視頻播放，壓力基本都在前端，播放路數(shù)受限，而此方案是需要部署一臺服務(wù)器，進行視頻碼流的解碼、編碼、封裝等動作，前端 Web 拿到 FMP4 視頻數(shù)據(jù)后，依靠 MSE 擴展 video 標(biāo)簽的方式進行視頻播放。 上述方案各有優(yōu)缺點，如下：
那么我們依然面對以下問題：
- 如何面對服務(wù)器端資源緊張的情況下播放多路視頻？如何面對跨瀏覽器播放各種音視頻編碼視頻數(shù)據(jù)？如何面對端到端實時性要求高的使用場景？
三、Web 視頻通用解決方案
我們經(jīng)過大量分析討論及預(yù)研，發(fā)現(xiàn)要解決這些問題的依然可行，在沒有服務(wù)端資源情況下，我們只能將視頻播放資源消耗前置，但考慮到瀏覽器對密集型數(shù)據(jù)計算并不擅長，我們決定在視頻播放端使用后臺程序，來實現(xiàn)視頻封裝、解碼等動作。
在這個架構(gòu)基礎(chǔ)下，我們能夠支持各種音視頻編碼格式，如 H264、H265、MJPEG、SVAC 等，同時，我們增加了多種模式來應(yīng)對不同的使用場景。
3.1 適配兼容性好，實時性優(yōu)先的視頻播放需求：解碼成 YUV + Web 前端 WebGL 顯示
具體流程：
- 組件獲取音視頻碼流，CPU 軟解成視頻幀 YUV 、音頻幀 PCM ；電腦環(huán)回地址 Websocket 數(shù)據(jù)傳輸，不受網(wǎng)絡(luò)帶寬限制； 前端視頻幀 WebGL 渲染，音頻幀 Audio 標(biāo)簽音頻播放，支持各種瀏覽器；通用性較強，支持各種音視頻編碼格式；支持 4 路 1080P 或者 9 路 4CIF ，端到端播放延遲 300ms 左右
3.2 適配視頻碼流自適應(yīng)、性能優(yōu)先的視頻播放需求
具體流程：
- 組件獲取音視頻碼流，若視頻碼流是 H264 ，封裝成 FMP4 ，音頻碼流解碼成 PCM ；Web 前端 H5 播放顯示，利用瀏覽器硬解碼能力，性能消耗較少；若視頻碼流非 H264 格式，解碼成 YUV ，前端 WebGL 渲染；通過判斷視頻碼流格式，自適應(yīng)輸出不同視頻數(shù)據(jù)給前端，來達到綜合性能消耗最低，支持路數(shù)更多的效果，支持各種瀏覽器。
3.3 適配高分辨率、多路數(shù)的視頻播放需求
具體流程：
- 在 IE 引擎下，Web 前端可以加載組件中 OCX 控件，控件獲取音視頻碼流；控件支持 H264 、H265 視頻編碼的 GPU 解碼及顯示；GPU 解碼顯示能力較好，使端到端播放延遲能夠在 200ms 以內(nèi)；支持 16 路 1080P ， 支持 400萬 、 800萬 等更高分辨率。
YUV輸出Web視頻播放
四、總結(jié)
總結(jié)：當(dāng)然每個視頻播放方案各有實際的使用場景及約束條件，在瀏覽器尚未支持 H265 等視頻編碼格式前，每個方案實現(xiàn)起來都有其對應(yīng)的代價，怎么樣實現(xiàn) Web 視頻播放并滿足各自項目需求應(yīng)該是百花齊放，各有略同。
