隨着現代社會不斷發展，對於安防行業的需求也越來越多。
近年來，各大安防廠商如雨后春筍一般不斷涌現，以視頻監控為主的海康、大華、宇視；以門禁為主的鈕貝爾等。
各大平台也都在介入安防行業，像阿里，騰訊的數字城市。其他各種針對安防行業的解決方案也是層出不窮，如雪亮工程，智慧交通，智慧社區等等。
如今安防行業應用的存在於各行各業中，各種安防設備也是五花八門，層出不窮，但目前視頻監控仍是最主要的市場。
本人近些年來對海康，大華，宇視等視頻廠商做過一些視頻對接的開發，但始終存在一個問題，在谷歌瀏覽器中如何進行視頻監控的預覽。
本文將主要解決在谷歌，火狐等非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 來操作視頻客戶端。