隨著現代社會不斷發展，對於安防行業的需求也越來越多。 近年來，各大安防廠商如雨後春筍一般不斷涌現，以視頻監控為主的海康、大華、宇視；以門禁為主的鈕貝爾等。 各大平臺也都在介入安防行業，像阿裡，騰訊的數字城市。其他各種針對安防行業的解決方案也是層出不窮，如雪亮工程，智慧交通，智慧社區等等。 如今安防行 ...
隨著現代社會不斷發展，對於安防行業的需求也越來越多。
近年來，各大安防廠商如雨後春筍一般不斷涌現，以視頻監控為主的海康、大華、宇視；以門禁為主的鈕貝爾等。
各大平臺也都在介入安防行業，像阿裡，騰訊的數字城市。其他各種針對安防行業的解決方案也是層出不窮，如雪亮工程，智慧交通，智慧社區等等。
如今安防行業應用的存在於各行各業中，各種安防設備也是五花八門，層出不窮，但目前視頻監控仍是最主要的市場。
本人近些年來對海康，大華，宇視等視頻廠商做過一些視頻對接的開發，但始終存在一個問題，在谷歌瀏覽器中如何進行視頻監控的預覽。
本文將主要解決在谷歌，火狐等非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
該方式對於瀏覽器端壓力較大，而且視頻畫面也會出現丟幀模糊的現象。多個視頻調用時服務端的壓力也會過大甚至崩掉。
以上三種方式是題主在開發過程中所接觸到的一些方法，這幾個方法都有一個共同的問題，視頻預覽相對來說容易，但錄像回放的功能不太好實現。
題主最近發現一種新的方式，這中方式可以較好的解決大部分瀏覽器預覽視頻監控中的問題，其中包括回放，錄像抓圖，雲台控制等。
思路很簡單
1、開發一個客戶端程式，用程式去對接視頻監控（推薦使用廠商自己的視頻控制項）。
2、客戶端程式啟動一個 WebSocket 服務。
3、網頁中連接 WebSocket 服務，通過 WebSocket 發送消息。客戶端收到消息解析後在進行相對應的操作。
這種方式基本上解決了現有瀏覽器預覽監控視頻的絕大部分問題。
1、瀏覽器支持：WebSocket 是 HTML5 開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議,，只要是支持HTML5，WebSocket就可以使用。
2、穩定性，功能完整性：因為客戶端是調用的廠商視頻控制項，所以無論是在取流的穩定性，視頻清晰度等各個方面，肯定要比自己去取流在做操作方便的多。而且大部分視頻控制項都是包括一些功能，例如雲台控制、抓圖、錄像等操作。
這種方式題主已經測試成功並且已應用在項目上。
各大廠商自己個視頻控制項能在谷歌瀏覽器上運行其實也是這個原理，通過 WebSocket 來操作視頻客戶端。
