# 一、前言

整個onvif模塊大部分的功能都有了以后，除了在demo上點點按鈕可以執行獲取結果顯示外，最終還是要應用到視頻監控中，在按鈕上點點和系統中后臺自動運行是兩碼事，比如onvif校時和事件訂閱，不會說是傻到在監控系統界面上提供按鈕給用戶點擊才去執行，最多做的應該是系統設置中提供兩個開關比如自動校時、事件訂閱，可以方便的開啟這幾個功能。開啟以后等監控系統啟動后自動去處理，比如挨個對攝像機進行校時處理以及訂閱事件，為了能夠做到添加攝像機后自動立即應用，特意改成了在打開攝像機視頻畫面的時候，主動去實例化DeviceOnvif類（每個攝像機都對應一個實例）

最開始的做法是采用定時器去處理要指定的指令隊列，后面發現速度不好控制，畢竟網絡請求受網速和網絡環境的影響，有時候100毫秒就執行完成了，有時候又需要300毫秒不等，盡管網絡請求的時候已經設置了超時時間（這個時間一般設置成2-3秒，保證請求有足夠的時候返回），這個時間有點大，如果按照這個網絡請求超時時間來設定定時器，設備數量很多的時候太慢了，監控系統一般幾十個設備是有的，這蝸牛一樣的速度要處理到何年馬月，而且每個攝像機有多個指令需要處理比如自動校時、事件訂閱等。

那有沒有一種機制可以盡最快的速度排隊處理呢，答案是當然，這不就是線程擅長干的事情嗎，使勁的干，休息多久自由msleep控制即可，網絡環境好的情況下，20個設備的指令基本上在1s內完成的，這就能夠滿足用戶的需求，畢竟用戶打開軟件后，大概率不想等待太長時間，就像能夠看到所有攝像機時間自動校準好了，搞個攝像機報警也能立即通過onvif協議上報，該處理的都盡快處理完了。

QNetworkAccessManager類如果一開始不是在線程中new出來的，會提示不能在其他線程執行，這就需要在線程的run函數中調用QMetaObject::invokeMethod來執行對應的處理，一個萬能的處理方法就是將需要執行的全部放在work函數中，搞個iswork標志位，進入該開始的時候將標志位iswork=true，處理結束后iswork=false，在run中先判斷標志位是否為假，為假表示當前不在工作，則去調用work函數處理。這就規避了在線程中執行其他線程類對象函數的錯誤提示。

基本的處理思路

- 查詢出所有的攝像機信息。

- 過濾攝像機信息，找出所有具備onvif地址的，只有具備onvif地址的才是需要去處理的。

- 從deviceonvif鏈表中找到當前onvif地址的設備類對象，該方法同時肩帶new出實例在沒有找到對應實例的情況下。

- 將對應的處理轉成命令指令隊列，帶有onvif地址標識，交給onvifthread線程類專門處理。

- 所有的方法在該實例中都有對應方法進行處理，對該實例調用對應的方法比如校時、事件訂閱、抓圖等。

- 處理完成后將對應的結果信號發出去，對應三個參數分別表示onvif地址、指令、結果數據（QVariant類型）。

onvif主要的功能

1. 搜索設備，獲取設備的信息比如廠家、型號等。

2. 獲取設備的多個配置文件信息profile。

3. 獲取對應配置文件的視頻流地址rtsp，以及分辨率等參數。

4. 云臺控制，上下左右移動，焦距放大縮小，相對和絕對移動。

5. 獲取預置位信息，觸發預置位。

6. 訂閱事件，接收設備的各種消息尤其是報警事件比如IO口的報警。

7. 抓圖，獲取設備當前的圖片。

8. 獲取、創建、刪除用戶信息。

9. 獲取和設備網絡配置信息比如IP地址等。

10. 獲取和設置NTP時間同步。

11. 獲取和設置設備時間。

12. 重啟設備。

onvif的處理流程

1. 綁定組播IP（239.255.255.250）和端口（3702），發送固定的xml格式的數據搜索設備。

2. 接收到的xml格式的數據解析，得到設備的Onvif地址。

3. 對Onvif地址發送對應的數據，收到數據取出對應的節點數據。

4. 請求Onvif地址獲取Media地址和Ptz地址，Media地址用來獲取詳細的配置文件，Ptz地址用來云臺控制。

5. ptz控制是對Ptz地址發送對應的數據即可。

6. 設置了用戶認證的需要組織用戶token信息一塊發送，每次都需要作鑒權處理。

7. 接收到的數據不是標準的xml數據，沒法按照正常的節點解析來處理，只能用QXmlQuery來做。

8. 每個廠家設備返回的數據未必完全一致，基本上都不一致，需要進行模糊查找節點值。

9. 特意采用底層協議解析，因為soap太臃腫函數名稱太另類，特意做的輕量級的。

10. 兩個必備工具，Onvif Device Manager 和 Onvif Device Test Tool。

## 二、功能特點

### （一）軟件模塊

1. 視頻監控模塊，各種停靠小窗體子模塊，包括設備列表、圖文警情、窗口信息、云臺控制、預置位、巡航設置、設備控制、懸浮地圖、網頁瀏覽等。

2. 視頻回放模塊，包括本地回放、遠程回放、設備播放、圖片回放、視頻上傳等。

3. 電子地圖模塊，包括圖片地圖、在線地圖、離線地圖、路徑規劃等。

4. 日志查詢模塊，包括本地日志、設備日志等。

5. 系統設置模塊，包括系統設置（基本設置、視頻參數、數據庫設置、地圖配置、串口配置等）、錄像機管理、攝像機管理、輪詢配置、用戶管理等。

### （二）基礎功能

1. 支持各種視頻流（rtsp、rtmp、http等）、視頻文件（mp4、rmvb、avi等）、本地USB攝像機播放。

2. 支持多畫面切換，包括1、4、6、8、9、13、16、25、36、64畫面切換。

3. 支持全屏切換，多種切換方式包括鼠標右鍵菜單、工具欄按鈕、快捷鍵（alt+enter全屏，esc退出全屏）。

4. 支持視頻輪詢，包括1、4、9、16畫面輪詢，可設置輪詢分組（輪詢預案）、輪詢間隔、碼流類型等。

5. 支持onvif協議，包括設備搜索、云臺控制、設備控制（圖片參數、校對時間、系統重啟，抓拍圖片等）。

6. 支持權限管理，不同的用戶可以對應不同的模塊權限，比如刪除日志、關閉系統等。

7. 數據庫支持多種，包括sqlite、mysql、sqlserver、postgresql、oracle、人大金倉等。

8. 本地USB攝像機支持設置分辨率、幀率等參數。

9. 所有停靠模塊都自動生成對應的菜單用來控制顯示和隱藏，在標題欄右鍵可以彈出。

10. 支持顯示所有模塊、隱藏所有模塊、復位普通布局、復位全屏布局。

11. 雙擊設備彈出實時預覽視頻，支持圖片地圖、在線地圖、離線地圖等。

12. 攝像機節點拖曳到對應窗體播放視頻，同時支持拖曳本地文件直接播放。

13. 刪除視頻支持鼠標右鍵刪除、懸浮條關閉刪除、拖曳到視頻監控面板外刪除等多種方式。

14. 圖片地圖上設備按鈕可自由拖動，自動保存位置信息。百度地圖上可以鼠標單擊獲取經緯度信息，用來更新設備位置。

15. 視頻監控面板窗體中任意通道支持拖曳交換，瞬間響應。

16. 封裝了百度地圖，視圖切換，運動軌跡，設備點位，鼠標按下獲取經緯度等。

17. 雙擊節點、拖曳節點、拖曳窗體交換位置等操作，均自動更新保存最后的播放地址，下次軟件打開自動應用。

18. 右下角音量條控件，失去焦點自動隱藏，音量條帶靜音圖標。

19. 支持視頻截圖，可指定單個或者對所有通道截圖，底部小工具欄也有截圖按鈕。

20. 支持超時自動隱藏鼠標指針、自動全屏機制。

21. 支持onvif云臺控制，可上下左右移動云臺攝像機，包括復位和焦距調整等。

22. 支持任意onvif攝像機，包括但不限于?？?、大華、宇視、天地偉業、華為等。

23. 可保存視頻，可選定時存儲或者單文件存儲，可選存儲間隔時間。

24. 可設置視頻流通信方式tcp+udp，可設置視頻解碼是速度優先、質量優先、均衡等。

25. 可設置軟件中文名稱、英文名稱、LOGO圖標等。

26. 存儲的視頻文件支持導出到指定目錄，支持批量上傳到服務器。

### （三）特色功能

1. 主界面采用停靠窗體模式，各種組件以小模塊的形式加入，可自定義任意模塊加入。

2. 停靠模塊可拖動任意位置嵌入和懸浮，支持最大化全屏，支持多屏幕。

3. 雙重布局文件存儲機制，正常模式、全屏模式都對應不同的布局方案，自動切換和保存，比如全屏模式可以突出幾個模塊透明顯示在指定位置，更具科幻感現代化。

4. 原創onvif協議機制，采用底層協議解析（udp廣播搜索+http請求執行命令）更輕量易懂易學習拓展，不依賴任何第三方組件比如gsoap。

5. 原創數據導入導出機制，跨平臺不依賴任何組件，瞬間導出數據。

6. 內置多個原創組件，宇宙超值超級牛逼，包括數據導入導出組件（導出到xls、pdf、打?。?、數據庫組件（數據庫管理線程、自動清理數據線程、萬能分頁、數據請求等）、地圖組件、視頻監控組件、文件多線程收發組件、onvif通信組件、通用瀏覽器內核組件等。

7. 自定義信息框+錯誤框+詢問框+右下角提示框（包含多種格式）等。

8. 精美換膚，高達17套皮膚樣式隨意更換，所有樣式全部統一，包括菜單等。

9. 視頻控件懸浮條可以自行增加多個按鈕，監控界面底部小工具欄也可自行增加按鈕。

10. 雙擊攝像機節點自動播放視頻，雙擊節點自動依次添加視頻，會自動跳到下一個，雙擊父節點自動添加該節點下的所有視頻?？蛇x主碼流、子碼流。

11. 錄像機管理、攝像機管理，可添加刪除修改導入導出打印信息，立即應用新的設備信息生成樹狀列表，不需重啟。

12. 可選多種內核自由切換，ffmpeg、vlc、mpv等，均可在pro中設置。推薦用ffmpeg，跨平臺最多，默認提供好了linux和mac平臺上編譯好的庫。

13. 支持硬解碼，可設置硬解碼類型（qsv、dxva2、d3d11va等）。

14. 默認采用opengl繪制視頻，超低的CPU資源占用，支持yuyv和nv12兩種格式繪制，很牛逼。

15. 高度可定制化，用戶可以很方便的在此基礎上衍生自己的功能，比如增加自定義模塊，增加運行模式、機器人監控、無人機監控、挖掘機監控等。

16. 支持xp、win7、win10、linux、mac、各種國產系統（UOS、中標麒麟、銀河麒麟等）、嵌入式linux等系統。

17. 注釋完整，項目結構清晰，超級詳細完整的使用開發手冊，精確到每個代碼文件的功能說明，不斷持續迭代版本。

## 三、體驗地址

1. 體驗地址：[https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g](https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g) 提取碼：01jf 文件名：bin_video_system.zip。

2. 國內站點：[https://gitee.com/feiyangqingyun](https://gitee.com/feiyangqingyun)

3. 國際站點：[https://github.com/feiyangqingyun](https://github.com/feiyangqingyun)

4. 個人主頁：[https://blog.csdn.net/feiyangqingyun](https://blog.csdn.net/feiyangqingyun)

5. 知乎主頁：[https://www.zhihu.com/people/feiyangqingyun/](https://www.zhihu.com/people/feiyangqingyun/)

6. 在線文檔：[https://feiyangqingyun.gitee.io/qwidgetdemo/video_system.html](https://feiyangqingyun.gitee.io/qwidgetdemo/video_system.html)

## 四、效果圖

## 五、核心代碼

avascript 是一種同步編程語言。 但它也是 Web 語言，需要異步獲取數據，我們也需要用戶交互性，即事件驅動并僅基于用戶行為執行的功能。

回調和承諾

我們通過創建在程序初始化時不會立即執行的代碼片段來實現這一點。 這些代碼片段也稱為回調和承諾。 最初，最基本的方法是使用純回調，但函數定義的本質導致了所謂的嵌套回調的“回調地獄”。 因此，一個更精致的工具出現了——承諾。 如今，我們還使用 async/await 作為“.then()”解決 Promise 的流行替代方案。 然而，本文的目的不是教授處理異步請求的基礎知識。它試圖深入研究 Javascript 的本質，并解釋回調和 Promise 等異步工具為何成為其中的一部分。

那么單線程編程語言為何擁有可供使用的異步工具呢？

JavaScript 運行時

簡單的答案是——Javascript 運行時。 如今，Javascript 不僅僅是一種具有切換靜態網頁上按鈕的簡單目的的腳本語言，它還是一種功能齊全的編程語言。 因此，為了理解單線程語言如何實現并發

我們看到一個 JS 引擎和一些附加功能 - Web API、事件循環和隊列。 當我們說單線程時，我們指的是JS引擎。 簡單地說，這與您編寫的代碼及其執行上下文有關，而附加功能會“創建”附加線程。 因此，運行時由兩部分組成 - 您的代碼和一些其他外部代碼，兩者都生成整個應用程序。 所以，現代Javascript總是需要一個運行時環境來執行，而最流行的就是瀏覽器。 另一種流行的方法是 Node.js。

但是現在，讓我們應用我們已經學到的有關運行時環境的知識來看看回調函數的機制。

回調

function fetchData(callback) {
  setTimeout(function () {
    const data='Async data';
    callback(data); // Execute the callback function with the data
  }, 1000);
}

function processData(data) {
  console.log('Received data: ', data);
}

fetchData(processData); // Pass the processData function as a callback
console.log('Fetching data...');

執行線：

console.log('Fetching data...'); //該行被執行
console.log('Received data: Async data'); // 該行是第二個執行的。

一步一步的解釋：

首先觸發 fetchData(processData)

setTimeout 的調用延遲了 1000 毫秒。

在等待超時的同時，程序繼續執行 console.log('Fetching data...');

1000 毫秒（1 秒）后，回調函數 processData 將使用數據“Async data”執行。

在 processData 內部，語句 console.log('Received data:', data); 最終被執行。

所以，打印語句的最終順序是：

“正在獲取數據……”

“接收到的數據：異步數據”

因此，“Fetching data...”console.log 在 fetchData 函數之前執行。

這怎么可能？

單線程的 Javascript 如何“知道”繼續解釋代碼并執行后續的 console.log("Fetching data...")，即使它還有另一個任務似乎處于待命狀態（fetchData 函數）。

正如我所說，當我們說單線程時，我們指的是JS引擎的執行機制。 Javascript引擎負責執行上下文，即管理內存堆和調用堆棧。 內存堆存儲 JS 代碼中定義的所有變量，而調用堆棧執行操作（函數執行）。

那么，回到當前的問題，單線程意味著只有一個調用堆棧。 反過來，一個調用堆棧意味著一次只能執行一段代碼。

在我們的例子中，使用 console.log('Fetching data...') 和 fetchData 函數，考慮到 Javascript 的非阻塞性質，Javascript 不會等待回調的響應，而是繼續解釋 后續的代碼塊。

為什么不等呢？

答案 - 回調 fetchData 函數是從當前主線程的調用堆棧中“提取”的，邏輯上執行會繼續 console.log('Fetching data...')。

但是這個回調被“提取”到哪里呢？

不僅針對回調的一般答案是，任何此類異步函數都利用 Web API，通過依賴事件循環來管理其隊列優先級（何時重新進入主線程調用堆棧）。

對于回調，Timer Web API 執行 setTimeout，事件循環將該函數的結果放入任務隊列中。 這也是為什么 setTimeout 中設置的延遲被稱為最小延遲時間。 目前尚不清楚調用堆棧何時會被釋放，以便可以執行新的事件循環并將隊列中的任務添加到其中。

現在讓我們看看如何在 Javascript 運行時中解析 Promise。

const promise=new Promise(resolve=>{
  resolve("Promise")
}, reject=> {

})

promise.then(res=>console.log(res))

對于 Promise，Promise 被設置到微任務隊列中，事件循環的優先級高于常規任務（例如 setTimeout 回調）。 這意味著當/如果承諾被履行時，其結果將被添加到微任務隊列中，確保它將在事件循環中的下一個（常規）任務之前執行。

控制反轉

因此，簡單來說，Javascript 運行時為單線程編程語言添加了線程和并發性。

這也稱為控制反轉，這是編程中非常流行的術語。 代碼結果取決于外部因素，即每個 Javascript 運行時附帶的附加功能。 如上所述，執行控制被反轉并移交給外部實體。

段時間沒寫文章了，條友們，這次我們從一個題目開始吧。

首先我給大家出一道題目，大家可以先思考一下，再往下看。

題目是：請用JavaScript重寫confirm方法，實現和confirm同樣的功能。

乍一看可能感覺很簡單，定義一個confirm方法覆蓋window對象原生的 confirm方法，在方法里用div畫一個彈框，參數中傳入兩個回調方法，當用戶點擊“確定”或者“取消”的時候分別調用相應的回調方法，如下：

confirm("確定嗎？",callBack1,callBack2);

但是這樣和原來的confirm()方法是不一樣的，原來的confirm()方法只有一個參數，只傳入要顯示的消息，并且用戶點擊按鈕之前線程是暫停的，只有當用戶點擊確定或者取消后，接下來的代碼才會繼續執行，并不需要回調方法，這樣業務邏輯更清晰有條理。

如上面兩圖，原生的confirm方法在各個瀏覽器樣式不同，但功能相同，即都能夠暫停程序執行，直到用戶點擊了按鈕。

那么我們能否用純JavaScript做出一個樣式不同但功能相同的confirm方法來覆蓋原生的confirm方法呢，答案是可以的，思路就是暫停程序的執行，是暫停而不是堵塞JavaScript線程，因為一旦JavaScript線程被阻塞，dom渲染的線程也會被掛起，從而導致用戶無法點擊彈框出現的按鈕，所以像while(true){...}這種寫法是不可取的，JavaScript不像c或c++那樣，JavaScript出現這種死循環很快會堆棧溢出，程序就擋掉了。那么如何實現代碼的暫停呢，es7中新出了await關鍵字，await簡單來講就是讓程序同步而不是以異步的方式執行，字面意思就是等待，等著程序執行完再進行下一步，await只能用在異步的方法里面，既帶有async標記的function。我今天跟大家分享的實現程序暫停的方法就是通過await實現的。

首先，我們可以構造一個等待函數， waitUserClick()

waitUserClick()相當于一個sleep方法，執行這個函數結束需要等待100毫秒，這個等待多長時間我們可以隨意調節，這個函數的作用就是讓你等待100毫秒，其他的什么都不干，那么有個這個等待函數了，我們可以接下來實現一個while循環來監聽用戶有沒有點擊按鈕。

這個while每個循環調用了我們上面定義的等待函數，間隔100毫秒，這樣就不會造成瀏覽器假死，dom渲染不受影響，接下來用戶點擊確定或者取消按鈕的時候，我們就可以把WAIT_USER_CLICK這個狀態改為false從而跳出循環繼續執行下面的代碼邏輯，也就是說這個while循環是讓代碼暫停的關鍵，而WAIT_USER_CLICK被用戶點擊按鈕后調整為false就會跳出循環，這就實現了代碼的繼續執行，這就是實現程序暫停和啟動的關鍵，剩下的就是用dom畫個confirm彈窗了，這很簡單了，代碼如下。

上面就是整個confirm方法，我們可以看到這個SYS_USER_FEED_BACK;就是對用戶進行了什么操作的反饋，如點擊了確定還是取消，confirm方法最終把用戶的操作變成bool的返回值。

下面我們試驗一下剛實現的這個confirm方法。

注意，我們實現的這個confirm方法只能用于異步的方法中，使用時只需要把所在的方法前面標注上async，confirm因為也是同步模式因此前面也要加上await關鍵字。

運行效果如下：

可以看到現在用戶還沒點擊“確定”或“取消”按鈕，所以當前程序只執行了console.log(1)就暫停了。

然后當我點擊了確定，可以看到console.log(2)也執行了，說明程序邏輯從暫停狀態轉換為了繼續運行狀態，我們重寫的這個confirm方法成功了。

有了confirm，alert和prompt就好做了，原理都一樣，prompt無非就是加了個讓用戶輸入字符串的輸入框，下面我把完整的代碼分享給大家，實現了alert，confirm和prompt.。

好了，到這功能的實現都講清楚了，代碼呢也都一字不落的貼出來了，那么大家可能要問了，這有什么用嗎？哈哈，業務場景，一個到處都是原生confirm的老項目，老板突然覺得原生confirm難看，在各個瀏覽器樣式不統一，讓你改了，你可以選擇UI框架，但基本上要把原來的邏輯改成各種回調函數，想想就頭大吧，當然也可以像這種，重寫confirm方法，然后查找替換，把所有confirm前面加上await，所在方法前面加上async。還有就是不想寫回調函數的又不想用系統自帶的confirm的，可以試試。

今天就先分享到這里，雖然現在不從事碼農工作了，但是業余時間還是會繼續研究，跟大家分享編程經驗與心得，本文有什么不對的地方還請大佬們批評指導。

#編程#?