技術(shù)的真相 | 視頻智能分析之Web視頻播放通用解決方案

通常，攝像機(jī)H265視頻編碼在傳輸快、存儲(chǔ)小、畫質(zhì)高等方面的優(yōu)勢使得其備受企業(yè)青睞，但是由于主流瀏覽器不能夠支持這種格式，因此在瀏覽器下播放和解析視頻都受到一定的約束。那么，如何實(shí)現(xiàn) Web 視頻播放的通用就成為了我們必須研究的課題。本期技術(shù)的真相將帶你了解曠視盤古系統(tǒng)是如何解決 Web 視頻播放通用方案這一難題的。

一、背景

在視頻智能分析領(lǐng)域，絕大部分?jǐn)z像機(jī)視頻碼流均支持 H264 和 H265 兩種編碼格式，H265 視頻編碼相比 H264 有著諸多優(yōu)點(diǎn)：視頻數(shù)據(jù)傳輸帶寬減半、存儲(chǔ)減半、畫質(zhì)提升等。因此，在大部分智慧安全管理項(xiàng)目中， H265 視頻編碼使用較為廣泛，能夠直接減少用戶項(xiàng)目成本。

但當(dāng)下主流瀏覽器對(duì) H265 視頻編碼格式仍然未能夠支持，主要還是支持 H264 視頻編碼格式，隨著 Flash 插件退出市場后，在 Chrome 瀏覽器下支持視頻播放難度雪上加霜，所以大部分智慧安全管理廠家依然是在 IE 瀏覽器插件機(jī)制下支持著攝像機(jī)視頻播放。

曠視在瀏覽器端視頻播放也有諸多實(shí)踐，曠視的盤古系統(tǒng)深耕智慧園區(qū)領(lǐng)域，在業(yè)內(nèi)各項(xiàng)指標(biāo)均遙遙領(lǐng)先，系統(tǒng)功能繁多，其中視頻播放就是其必不可少的一部分，面向 ToB 市場，盤古平臺(tái)系統(tǒng)自然需要適配用戶各種使用場景，能夠在不同瀏覽器中進(jìn)行視頻播放是基本要求。因此，在視頻播放方面，我們需要研究一套通用的 Web 視頻播放解決方案，來適配不同使用場景：高性能多路視頻播放、強(qiáng)實(shí)時(shí)性視頻播放等，并能夠兼容不同的瀏覽器（IE / 360 / Chrome）。

二、當(dāng)前解決方案

盤古系統(tǒng)中視頻數(shù)據(jù)來源

如上圖所示，盤古系統(tǒng)中，視頻數(shù)據(jù)來源各異、數(shù)據(jù)內(nèi)容各異、甚至視頻編碼也各不相同，怎么樣實(shí)現(xiàn) PC 端跨瀏覽器進(jìn)行 Web 視頻播放，當(dāng)前也有諸多方案，下面簡易介紹下各個(gè)方案的實(shí)現(xiàn)關(guān)鍵點(diǎn)。

2.1 Web 前端封裝 FMP4 + H5 video 播放顯示

方案說明：

Web 前端收取到視頻流后，進(jìn)行 FMP4 封包，并使用 MSE 擴(kuò)展 video 標(biāo)簽進(jìn)行視頻播放，對(duì)于智能幀（ Intelligence Frame 即結(jié)構(gòu)化信息）采取透傳方式，前端 Canvas 繪制。

MSE 即 Media Source Extensions，是一個(gè) W3C 草案，MSE 擴(kuò)展了 HTML5 的 Video 和 Audio 標(biāo)簽?zāi)芰?，目前支持的視頻封裝格式是 MP4，支持的視頻編碼是 H.264 和 MPEG4 ,支持的音頻編碼是 AAC 和 MP3，F(xiàn)MP4 即 Fragment mp4，前端將封裝好的 FMP4 數(shù)據(jù)直接送進(jìn) MediaSource 即可實(shí)現(xiàn)瀏覽器視頻播放，當(dāng)前主流瀏覽器支持情況：

當(dāng)前瀏覽器對(duì)MSE支持情況

2.2  Web 前端 WebAssembly 解碼 + Canvas 顯示

方案說明：

前端收取到視頻流后直接使用 ffmpeg 生成的 WebAssembly 進(jìn)行軟解碼，輸出 YUV、PCM，前端通過 WebGL 在 Canvas 上繪制視頻畫面，同時(shí)通過 Web Audio API 播放音頻。

WebAssembly 是一種新的編碼方式，可以在現(xiàn)代的網(wǎng)絡(luò)瀏覽器中運(yùn)行，它是一種低級(jí)的類匯編語言，具有緊湊的二進(jìn)制格式，并為其他語言提供一個(gè)編譯目標(biāo)，以便它們可以在 Web 上運(yùn)行。它也被設(shè)計(jì)為可以與 JavaScript 共存，允許兩者一起工作。近幾年已經(jīng)被各主流瀏覽器所廣泛支持，支持情況：

2.3 后端解轉(zhuǎn)碼 + H5 video 播放顯示

方案說明：

前兩方案基本是依靠 Web 前端實(shí)現(xiàn)視頻播放，壓力基本都在前端，播放路數(shù)受限，而此方案是需要部署一臺(tái)服務(wù)器，進(jìn)行視頻碼流的解碼、編碼、封裝等動(dòng)作，前端 Web 拿到 FMP4 視頻數(shù)據(jù)后，依靠 MSE 擴(kuò)展 video 標(biāo)簽的方式進(jìn)行視頻播放。 上述方案各有優(yōu)缺點(diǎn)，如下：

那么我們依然面對(duì)以下問題：

• 如何面對(duì)服務(wù)器端資源緊張的情況下播放多路視頻？如何面對(duì)跨瀏覽器播放各種音視頻編碼視頻數(shù)據(jù)？如何面對(duì)端到端實(shí)時(shí)性要求高的使用場景？

三、Web 視頻通用解決方案

我們經(jīng)過大量分析討論及預(yù)研，發(fā)現(xiàn)要解決這些問題的依然可行，在沒有服務(wù)端資源情況下，我們只能將視頻播放資源消耗前置，但考慮到瀏覽器對(duì)密集型數(shù)據(jù)計(jì)算并不擅長，我們決定在視頻播放端使用后臺(tái)程序，來實(shí)現(xiàn)視頻封裝、解碼等動(dòng)作。

在這個(gè)架構(gòu)基礎(chǔ)下，我們能夠支持各種音視頻編碼格式，如 H264、H265、MJPEG、SVAC 等，同時(shí)，我們?cè)黾恿硕喾N模式來應(yīng)對(duì)不同的使用場景。

3.1 適配兼容性好，實(shí)時(shí)性優(yōu)先的視頻播放需求：解碼成 YUV + Web 前端 WebGL 顯示

具體流程：

• 組件獲取音視頻碼流，CPU 軟解成視頻幀 YUV 、音頻幀 PCM ；電腦環(huán)回地址 Websocket 數(shù)據(jù)傳輸，不受網(wǎng)絡(luò)帶寬限制； 前端視頻幀 WebGL 渲染，音頻幀 Audio 標(biāo)簽音頻播放，支持各種瀏覽器；通用性較強(qiáng)，支持各種音視頻編碼格式；支持 4 路 1080P 或者 9 路 4CIF ，端到端播放延遲 300ms 左右

3.2 適配視頻碼流自適應(yīng)、性能優(yōu)先的視頻播放需求

具體流程：

• 組件獲取音視頻碼流，若視頻碼流是 H264 ，封裝成 FMP4 ，音頻碼流解碼成 PCM ；Web 前端 H5 播放顯示，利用瀏覽器硬解碼能力，性能消耗較少；若視頻碼流非 H264 格式，解碼成 YUV ，前端 WebGL 渲染；通過判斷視頻碼流格式，自適應(yīng)輸出不同視頻數(shù)據(jù)給前端，來達(dá)到綜合性能消耗最低，支持路數(shù)更多的效果，支持各種瀏覽器。

3.3  適配高分辨率、多路數(shù)的視頻播放需求

具體流程：

• 在 IE 引擎下，Web 前端可以加載組件中 OCX 控件，控件獲取音視頻碼流；控件支持 H264 、H265 視頻編碼的 GPU 解碼及顯示；GPU 解碼顯示能力較好，使端到端播放延遲能夠在 200ms 以內(nèi)；支持 16 路 1080P ， 支持 400萬 、 800萬 等更高分辨率。

YUV輸出Web視頻播放

四、總結(jié)

總結(jié)：當(dāng)然每個(gè)視頻播放方案各有實(shí)際的使用場景及約束條件，在瀏覽器尚未支持 H265 等視頻編碼格式前，每個(gè)方案實(shí)現(xiàn)起來都有其對(duì)應(yīng)的代價(jià)，怎么樣實(shí)現(xiàn) Web 視頻播放并滿足各自項(xiàng)目需求應(yīng)該是百花齊放，各有略同。