經過多年的項目實戰和研發經驗的積累，總結了一下對於H5視頻可視化在視頻播放上如何做到無插件H5展示的方法，尤其是契合安防行業的方案；
除了HTTP、WebSocket類的傳輸協議，其他是無法通用地傳輸到瀏覽器的，所以，如果要做一款通用的H5視頻播放器，基本上就是一款HTTP/WebSocket協議的視頻播放器，如果是類似於RTMP、RTSP類型協議的視頻源，是不可避免，需要經過服務器轉換的，那麼我們可以總結Web網頁可視化直播的幾個剛性需求：
- H5播放只支持HTTP、WebSocket協議的流媒體源；
- 需要同時支持H.264、H.265視頻編碼格式；
- 支持低延時的實時視頻以及錄像回放視頻；
可行方案一：WebSocket透傳
通過WebSocket代理服務器，建立透傳通道，轉發各種不同協議的視頻流，WebSocket類似於一個管道，只做原樣的數據轉發，將源設備與H5客戶端之間建立一條由WebSocket包裹的傳輸通道，具體的協議交互過程還是按照原協議進行，RTSP、SIP類的文本協議按照文本協議的方式，RTMP類的字節流協議按照字節流協議的方式；
方案難點：
- 前端兼容性開發難度高：前端對於各種信令協議、字節流協議、以及解包、緩衝區、時間戳同步、解碼、顯示、播放，都要開發，對於前端開發的要求比較高；
- H.265播放技術：安防場景下，大部分攝像機都採用的是H.265編碼格式，所以，要前端Web支持H.265格式，需要引入wasm技術；
方案優缺點：
- 優點：後端開發簡單，速度快；
- 缺點：後端只做管道，不具備實際的設備信息知悉權，這對於設備的管控是無法做到的，例如，無法快照、無法錄像、無法獲取設備具體的錯誤信息；
可行方案二：協議轉換
採用類似於EasyCVR的全協議接入方案，將各種不同協議類型的視頻源（RTSP、RTMP推流/拉流、HTTP、UDP等）、視頻文件，通過標準化的協議轉換，統一可以輸出爲HTTP-FLV（實時流）、HLS（直播流/點播流）對終端進行輸出，就達到了標準化、全終端、全平臺輸出了；
方案難點：
- 後端兼容：後端需要將各種協議接入，並進行解封裝，封裝成標準的flv、ts等格式，不過好在已經有比較多的積累；
- H.265播放器：同樣是需要做到H.265的Web播放，包括HTTP-FLV和HLS的H.265格式；
方案優缺點：
- 缺點：技術門檻較高；
- 優點：可控性強，前後端分離，前後端人員均可靈活定製；
H.265網頁播放方案
大家可以看到以上的兩種解決方案都會具有一個H.265網頁播放的難點，這裏的主要原因是目前的瀏覽器基本都不能支持H.265的底層解碼，或者說硬解碼，H.265需要結合原生播放器的開發技術和Web播放器的開發技術，也就是wasm技術，將C/C++封裝成wasm，被js調用，這樣js就能像C/C++原生播放器一樣，充分利用C/C++的計算能力和擴展能力，來實現視頻的解碼過程。
wasm播放的主要優勢的契合安防的實際需求，雖然目前各大廠商開始流行WebRTC直播，但目前由於安防的特殊性，H.265已經佔據主導，解決H.265的前端展示才能完整地解決整個安防可視化的需求，這個是RTC播放無法解決的。
總結下來，我們有幾點思考：
- 想要完整的控制整個視頻可視化的流程，最好還是在服務端做視頻的處理和協議的轉換；
- H.265的前端支持是必不可少的，後端的H.265轉H.264來支持前端的播放，都是技術的倒退；
- 在可視化系統都Chromium的時代，WebRTC可能是一個非常好的選擇；