谷歌瀏覽器中預覽海康大華等監控視頻的思路與方法

隨着現代社會不斷髮展，對於安防行業的需求也愈來愈多。

近年來，各大安防廠商如雨後春筍通常不斷涌現，以視頻監控爲主的海康、大華、宇視；以門禁爲主的鈕貝爾等。

各大平臺也都在介入安防行業，像阿里，騰訊的數字城市。其餘各類針對安防行業的解決方案也是層出不窮，如雪亮工程，智慧交通，智慧社區等等。

現在安防行業應用的存在於各行各業中，各類安防設備也是五花八門，層出不窮，但目前視頻監控還是最主要的市場。

 

本人近些年來對海康，大華，宇視等視頻廠商作過一些視頻對接的開發，但始終存在一個問題，在谷歌瀏覽器中如何進行視頻監控的預覽。

本文將主要解決在谷歌，火狐等非IE瀏覽器中預覽視頻監控問題，給廣大開發者提供一個思路方法。

在此以前本人也百度過不少方案，但效果都不是很好，多多少少都存在些問題。

文中將這些方法進行了一個大概的彙總，以便供你們參考。

 

在軟件開發中分爲 C/S 架構和 B/S 架構，即客戶端程序與網頁端程序。

客戶端在對接監控視頻時比較方便也比較簡單，直接對接廠商的視頻控件或是 SDK 就能夠了。

網頁端最經常使用的就是經過廠商平臺的視頻控件進行預覽回放，這種經過視頻控件的方式優勢有不少，好比穩定性強，可以使用視頻控件進行錄像，截圖，雲臺控制等操做。

可是網頁端調用視頻控件有一個比較嚴重的問題，只支持IE瀏覽器。

視頻控件通常都是 OCX 的組件，註冊到註冊表中後頁面經過 ActiveXObject 進行建立並調用裏面的方法。

如今谷歌瀏覽器中現已不支持 ActiveXObject 的建立及調用，這是因爲 chrome 瀏覽器在 45 版本後再也不提供對 npapi 插件的支持。

網上也有一些手動啓動 npapi 的方法，可是操做比較繁瑣，不可能針對用戶去大面積鋪開使用。

 

針對谷歌瀏覽器預覽視頻監控的方法大概有如下幾種

1.使用 ffmpeg

地址：https://blog.csdn.net/weixin_43237948/article/details/89308678

該方案是將 RTSP 視頻轉成 HLS 格式，前端經過第三方js再去從服務中取流。

這種方式在配置的這部分相對來講比較複雜，並且網上相關的資料也不是不少。

 

2.VLC控件進行

安裝 VLC 客戶端，直接在瀏覽器中調用 VLC 的視頻控件，經過監控視頻 RTSP 串流進行預覽。

該方式調用時比較方便，在360安全瀏覽器的極速模式下是可運行的，可是在谷歌瀏覽器依舊由於插件的緣由不能預覽

 

3.WebSocket視頻流轉發

開發一個服務端，經過攝像頭的設備 SDK 去取流，在將視頻流經過 WebSocket 發送到前端頁面，頁面中再將獲取到的視頻流繪製到 DIV 中。

參考地址：https://download.csdn.net/download/qq30886226/10617007

該方式對於瀏覽器端壓力較大，並且視頻畫面也會出現丟幀模糊的現象。多個視頻調用時服務端的壓力也會過大甚至崩掉。

 

以上三種方式是題主在開發過程當中所接觸到的一些方法，這幾個方法都有一個共同的問題，視頻預覽相對來講容易，但錄像回放的功能不太好實現。

 

題主最近發現一種新的方式，這中方式能夠較好的解決大部分瀏覽器預覽視頻監控中的問題，其中包括回放，錄像抓圖，雲臺控制等。

思路很簡單

一、開發一個客戶端程序，用程序去對接視頻監控（推薦使用廠商本身的視頻控件）。

二、客戶端程序啓動一個 WebSocket 服務。

三、網頁中鏈接 WebSocket 服務，經過 WebSocket 發送消息。客戶端收到消息解析後在進行相對應的操做。

 

這種方式基本上解決了現有瀏覽器預覽監控視頻的絕大部分問題。

一、瀏覽器支持：WebSocket 是 HTML5 開始提供的一種在單個 TCP 鏈接上進行全雙工通信的協議,，只要是支持HTML5，WebSocket就可使用。

二、穩定性，功能完整性：由於客戶端是調用的廠商視頻控件，因此不管是在取流的穩定性，視頻清晰度等各個方面，確定要比本身去取流在作操做方便的多。並且大部分視頻控件都是包括一些功能，例如雲臺控制、抓圖、錄像等操做。

 

這種方式題主已經測試成功而且已應用在項目上。

各大廠商本身個視頻控件能在谷歌瀏覽器上運行其實也是這個原理，經過 WebSocket 來操做視頻客戶端。