WEB頁面實(shí)時(shí)播放?？怠⒋笕A攝像頭RTSP視頻流完全方案
一、背景
在遍地都是攝像頭的今天，往往需要在各種信息化、數(shù)字化、可視化B/S系統(tǒng)中集成實(shí)時(shí)視頻流播放等功能，海康、大華、華為等廠家攝像頭或錄像機(jī)等設(shè)備一般也都遵循監(jiān)控行業(yè)標(biāo)準(zhǔn)，支持國際標(biāo)準(zhǔn)的主流傳輸協(xié)議RTSP輸出，而Chrome、Firefox、Edge等新一代瀏覽器從2015年開始取消了NPAPI插件技術(shù)支持導(dǎo)致RTSP流無法直接原生播放了，這對于絕大部分沒有視頻處理經(jīng)驗(yàn)的前、后端工程師來說是一個(gè)非常頭疼的問題，專業(yè)性強(qiáng)，技術(shù)門檻高，而對做B/S信息化系統(tǒng)集成的公司來說，為了這個(gè)模塊的功能單獨(dú)招聘專職研發(fā)人員來負(fù)責(zé)的話，成本高昂不說，還未必做的好。
二、現(xiàn)狀
當(dāng)前主流版本瀏覽器已經(jīng)都不支持原生播放RTSP流，而且瀏覽器廠家也明確宣布不考慮支持的情況下，為了在全終端和全平臺播放RTSP流，一般來說就只能采取在后端先轉(zhuǎn)碼再轉(zhuǎn)流給前端播放的方案，這也是號稱無插件的技術(shù)方案。而對于終端硬件配置較好的場景，也可以采用在后端轉(zhuǎn)流到前端，前端再通過WASM程序轉(zhuǎn)碼播放的方案，但I(xiàn)E并不支持。轉(zhuǎn)碼到前端時(shí)，即使配置了性能不錯(cuò)的電腦，還受限于WASM的固有缺陷，比如多線程支持差、能使用的內(nèi)存始終受限、只能軟解碼等，無法充分利用終端電腦的硬件加速能力(GPU)，這就導(dǎo)致同時(shí)播放多路或高清RTSP流時(shí)也會比較吃力，而且大量占用終端電腦的CPU和內(nèi)存資源，其它操作基本無法進(jìn)行，對音視頻格式的兼容能力也很有限。
雖然無插件播放方案能夠播放出畫面，但是往往延遲很高，基本上都在數(shù)秒之久，在一些對延遲敏感的場合客戶要求毫秒級延遲，顯然無插件技術(shù)方案是無法滿足的；而且首屏畫面顯示慢，基本上是數(shù)秒級別，這就導(dǎo)致切換播放源時(shí)遲遲看不到畫面出來，用戶體驗(yàn)很差；況且無插件技術(shù)方案，需要在后端持續(xù)運(yùn)行高負(fù)荷運(yùn)轉(zhuǎn)的視頻轉(zhuǎn)碼轉(zhuǎn)流服務(wù)，如果攝像頭路數(shù)多或需要在線播放的終端比較多，服務(wù)器的壓力就會很大，播放卡頓、花屏、黑屏、斷播等現(xiàn)象就會時(shí)常出現(xiàn)，很難讓客戶滿意。為了解決這些問題，相關(guān)硬件、軟件的投入和持續(xù)不斷的帶寬占用往往也讓客戶難以接受?，F(xiàn)在越來越多的客戶追求高大上的視頻播放效果，采用高清攝像頭的越來越多，播放顯示器1080P已是低配，2K甚至4K大屏正在成為主流之選。這種無插件技術(shù)方案，在中高配的屏幕上如果只能播放出慢如蝸牛的畫面，想不讓客戶吐槽實(shí)在是太難了。
一個(gè)好的視頻流網(wǎng)頁播放方案，首先要能做到持續(xù)穩(wěn)定播放多路視頻，需同時(shí)支持H.264和H.265編碼，最核心的還是要做到低延遲、切換畫面快，另外就是對當(dāng)前主流版本的瀏覽器兼容能力要強(qiáng)，還有就是開發(fā)接口豐富并可定制，如果還能做到開源或采用免費(fèi)開源的主流播放引擎，那就最好不過了，畢竟開源在商業(yè)領(lǐng)域的應(yīng)用越來越多，是個(gè)大趨勢，從系統(tǒng)集成商的角度來說，開源意味著有更多的自主可控機(jī)會來降低整個(gè)系統(tǒng)的實(shí)施風(fēng)險(xiǎn)。
三、最終
猿大師針對當(dāng)前行業(yè)痛點(diǎn)研發(fā)出了具有專利技術(shù)的猿大師中間件產(chǎn)品，成功突破了瀏覽器收緊其插件技術(shù)的限制，在瀏覽器之上重新搭建了一套外接程序系統(tǒng)并可無縫嵌入瀏覽器網(wǎng)頁運(yùn)行，成功模擬了2015年之前Chrome、Firefox、IE等瀏覽器支持的ActiveX控件和NPAPI插件技術(shù)運(yùn)行效果，是原來采用了跨瀏覽器插件框架FireBreath的最佳替代技術(shù)方案。在2020年發(fā)布了基于猿大師中間件的VLC網(wǎng)頁播放小程序，基本完成網(wǎng)頁中低延遲穩(wěn)定播放多路視頻流的方案拼圖，已經(jīng)在一些客戶現(xiàn)場成功實(shí)施，贏得了客戶的一致好評。友情提醒：猿大師中間件是此領(lǐng)域全球?qū)崿F(xiàn)商用的成熟中間件，技術(shù)實(shí)現(xiàn)方案在2019年就申請了中國軟件發(fā)明專利保護(hù)，請大家注意識別仿冒或抄襲者，選擇那些冒牌貨不僅僅會因?yàn)槠洚a(chǎn)品不成熟對您造成巨大損失不說，還有侵犯本公司知識產(chǎn)權(quán)的巨大風(fēng)險(xiǎn)！
四、特點(diǎn)
1.低延遲播放
從播放性能上說，攝像頭和錄像機(jī)的硬件廠家提供的私有協(xié)議播放方式無疑是最快的，延遲可做到100-300毫秒級，其次是RTSP協(xié)議流播放，大致是200-500毫秒級，再次是無插件方案的轉(zhuǎn)碼流，優(yōu)化比較好的單路播放大致在1-3秒級。猿大師近期發(fā)布的?？稻W(wǎng)頁播放小程序，除了支持海康設(shè)備的私有協(xié)議直接播放之外，還內(nèi)置了格式兼容更好的MP4播放庫和網(wǎng)絡(luò)兼容能力強(qiáng)大的LibVLC開源播放引擎。2020年發(fā)布的VLC網(wǎng)頁播放小程序，基于VLC的ActiveX控件開發(fā)，完整封裝了控件的所有接口給前端調(diào)用，在同等條件下，延遲時(shí)間和VLC桌面程序播放保持一致，并可支持多路組合實(shí)現(xiàn)分屏播放。
2.兼容性強(qiáng)
絕大部分瀏覽器兼容，同時(shí)兼容Chrome、Edge、Firefox、IE、Opera、Electron、Vivaldi、Brave、360、QQ等瀏覽器的低版本到最新版都可以使用；
設(shè)備兼容性強(qiáng)，同時(shí)支持?？?、大華、宇視、華為等廠家的硬件設(shè)備，只要能輸出RTSP、RTMP、HLS、HTTP、TCP、UDP等流媒體協(xié)議，就可以直接播放；
支持多種視頻編碼方式，不管是H.264還是H.265都可以同時(shí)支持播放，在一些采用WASM的無插件技術(shù)方案中，往往只支持H.265編碼的視頻流，服務(wù)器轉(zhuǎn)碼方案中，編碼兼容能力直接依賴這個(gè)轉(zhuǎn)碼服務(wù)的實(shí)現(xiàn)；
幾乎能播放任何內(nèi)容，依托開源的VLC著名播放引擎，支持文件、光盤、攝像頭、設(shè)備及流媒體可直接播放MPEG-2, MPEG-4, H.264, H.265, MKV, WebM, WMV, MP3, MP4等文件，而無插件技術(shù)方案往往能播放的內(nèi)容有限，比如不支持本地文件播放，不支持高速播放；
分辨率支持范圍廣，從480P到1080P，還是更高的2K或4K，都能輕松應(yīng)對，無插件方案從1080P開始，播放效果基本上就差強(qiáng)人意了。
3.功能豐富
最核心的無疑是播放功能，包含單路播放、多路播放、全屏播放、快播、慢播等等，其中多路播放分屏風(fēng)格支持多達(dá)26種，總有一款適合您，沒有需要的分屏風(fēng)格時(shí)也可以委托定制開發(fā)，還有指定視頻名稱或指定時(shí)間段回看視頻等；
抓圖功能，定時(shí)批量抓、支持保存指定本地路徑或圖片數(shù)據(jù)直接返回前端、圖片質(zhì)量可控制等，無插件方案由于無法訪問本地文件系統(tǒng)是無法抓圖直接保存到本地的，也不是基于視頻原有分辨率進(jìn)行抓取，圖片質(zhì)量無法保證；
錄像功能，支持直接錄像保存到本地MP4文件，而無插件方案由于無法訪問本地文件系統(tǒng)，自然也無法直接完成此功能；
彈幕及水印功能，播放狀態(tài)實(shí)時(shí)提示等支持，無插件方案基本只能在服務(wù)器端先行添加，無法針對終端區(qū)別對待；
語音對講及云臺控制，無插件方案基本無此功能；
人臉識別、車牌識別并顯示畫框等個(gè)性化功能，可通過定制設(shè)備廠家原生SDK功能實(shí)現(xiàn)。
4.集成簡單
延續(xù)原有插件播放技術(shù)路線，可實(shí)現(xiàn)平滑升級，前后端改造小，提供VUE集成范例，集成簡單，節(jié)省成本。
五、優(yōu)勢
借助猿大師中間件獨(dú)特的專利技術(shù)，相對于無插件播放方案來說，具有無可替代的技術(shù)優(yōu)勢，具體表現(xiàn)如下：
可充分利用終端電腦硬件加速能力(GPU)，在同等硬件、網(wǎng)絡(luò)帶寬及流輸出條件下，延遲可做到毫秒級，可播放更多視頻源、支持更高的分辨率、實(shí)現(xiàn)更流暢的播放效果。
播放程序可直接調(diào)用操作系統(tǒng)及硬件廠家提供的原生播放功能，也可以調(diào)用其它程序模塊，不受瀏覽器的限制，實(shí)現(xiàn)豐富的個(gè)性化播放功能。這個(gè)優(yōu)勢或許有人認(rèn)為也是缺點(diǎn)，比如有安全隱患，其實(shí)對于企業(yè)的各種業(yè)務(wù)系統(tǒng)來說，都是需要經(jīng)過充分測試才會上線，而猿大師中間件承諾本身無任何病毒或木馬行為，不會有未授權(quán)的網(wǎng)絡(luò)請求行為，也提供了運(yùn)行過程中的安全調(diào)用驗(yàn)證機(jī)制，即使未授權(quán)的第三方拿到了播放小程序的開發(fā)接口，沒有經(jīng)過安全驗(yàn)證也是無法請求播放的，一定程度上解決了瀏覽器原有插件技術(shù)不安全的缺陷。安全問題關(guān)鍵是具體如何看待，其實(shí)B/S等各種系統(tǒng)前端代碼的運(yùn)行在瀏覽器廠家看來，其實(shí)就是裸奔的狀態(tài)，只要瀏覽器廠家想要獲取前端代碼中的敏感信息，從技術(shù)角度完全沒有任何問題，相反的是，通過猿大師的技術(shù)方案，瀏覽器可獲得的信息反而受限，除非和操作系統(tǒng)開發(fā)商一起配合來進(jìn)行才有可能。
猿大師中間件不依賴瀏覽器的插件和擴(kuò)展技術(shù)支持，瀏覽器的升級不會導(dǎo)致技術(shù)方案失效，通訊技術(shù)采用國際標(biāo)準(zhǔn)的WebSocket技術(shù)，數(shù)據(jù)采用主流的JSON打包，通用性強(qiáng)。
猿大師中間件提供了前端可調(diào)用的自動升級中間件或小程序的機(jī)制，解決了傳統(tǒng)C/S系統(tǒng)升級終端軟件的大難題，具有了和B/S接近的分發(fā)便利優(yōu)勢。
猿大師官網(wǎng)：http://www.yuanmaster.com
1.猿大師與大華官方網(wǎng)頁延遲對比：
2.猿大師VLC播放程序與?？低暪俜骄W(wǎng)頁延遲對比：
3.猿大師VLC播放程序VUE測試頁面效果演示：
