一種QT和HTML5混合編程的無(wú)人機(jī)監(jiān)控軟件實(shí)現(xiàn)

唐磊 孫志堯 趙俊

關(guān)鍵詞：無(wú)人機(jī)；QT；HTML5；軟件開(kāi)發(fā)；VLC-QT

0 引言

無(wú)人機(jī)（UAV） 是利用無(wú)線遙控設(shè)備和自備程序控制操作的不載人飛機(jī)，或者由車載計(jì)算機(jī)完全或間歇地自主操作[1]。隨著無(wú)人機(jī)技術(shù)快速發(fā)展，無(wú)人機(jī)已經(jīng)成為具有偵察、測(cè)繪、攻擊等功能的小型智能化飛行設(shè)備，因其使用成本低、機(jī)動(dòng)性高、探測(cè)能力強(qiáng)等特點(diǎn)，被廣泛應(yīng)用于軍事、農(nóng)業(yè)、地質(zhì)勘探等領(lǐng)域并發(fā)揮著不可替代的作用。無(wú)人機(jī)地面站（GCS） 即無(wú)人機(jī)地面控制系統(tǒng)[2]，是地面操作人員獲取和控制無(wú)人機(jī)飛行狀態(tài)的有效渠道，是無(wú)人機(jī)控制系統(tǒng)中的重要組成部分[3]。

無(wú)人機(jī)的廣泛應(yīng)用促進(jìn)了無(wú)人機(jī)地面站的發(fā)展。目前無(wú)人機(jī)地面站軟件的研究正如火如荼地展開(kāi)，陳鍇[4]等人其基于Visual Studio 2019軟件和MAVlink協(xié)議開(kāi)發(fā)了用于橋梁病害檢測(cè)的專用無(wú)人機(jī)地面站；石秀[5]在Linux系統(tǒng)中實(shí)現(xiàn)了基于高速公路違章檢測(cè)的專用無(wú)人機(jī)地面站；周超[6]等將無(wú)線電信號(hào)測(cè)向定位功能融入地面站中形成了用于無(wú)線電監(jiān)測(cè)的無(wú)人機(jī)地面站；蔡偉杰[7]開(kāi)發(fā)了面向無(wú)人機(jī)農(nóng)業(yè)植保的專用地面站。以上成果主要針對(duì)某一使用場(chǎng)景實(shí)現(xiàn)某一特定功能設(shè)計(jì)無(wú)人機(jī)地面站，本文針對(duì)設(shè)備無(wú)法連接公網(wǎng)且無(wú)人機(jī)控制要在便攜式手持終端上完成的場(chǎng)景，設(shè)計(jì)了一種可以作為便攜式地面站[8]使用的多無(wú)人機(jī)監(jiān)控軟件，該軟件采用QT和HTML5混合編程實(shí)現(xiàn)，電子地圖的離線訪問(wèn)基于BIGEMAP離線地圖解決方案實(shí)現(xiàn)。

1 系統(tǒng)結(jié)構(gòu)和功能設(shè)計(jì)

傳統(tǒng)的無(wú)人機(jī)地面站將所有的功能集成到一臺(tái)控制終端，這樣資源消耗大，對(duì)終端的性能要求較高，因此目前的地面站大多部署在專用手提電腦或個(gè)人電腦上，在使用時(shí)很不方便。為了讓無(wú)人機(jī)的控制能夠在小型手持終端上進(jìn)行，應(yīng)該盡可能減少軟件的資源消耗。因此本文設(shè)計(jì)了一種無(wú)人機(jī)監(jiān)控系統(tǒng)：對(duì)無(wú)人機(jī)地面站的功能進(jìn)行拆分，將協(xié)議解析、航線規(guī)劃算法等交給服務(wù)器處理，在手持終端上運(yùn)行的客戶端只負(fù)責(zé)人機(jī)交互的功能。該系統(tǒng)以加大網(wǎng)絡(luò)資源的占用率為代價(jià)降低了客戶端軟件的性能要求，實(shí)現(xiàn)了在手持終端上對(duì)無(wú)人機(jī)的飛行狀態(tài)進(jìn)行監(jiān)控。

無(wú)人機(jī)監(jiān)控系統(tǒng)的基本結(jié)構(gòu)如圖1所示，系統(tǒng)采用C/S（客戶端-服務(wù)器）架構(gòu)設(shè)計(jì)，服務(wù)器采用Go語(yǔ)言和Python語(yǔ)言開(kāi)發(fā)，主要負(fù)責(zé)數(shù)據(jù)管理、航線規(guī)劃和指令發(fā)送等；無(wú)人機(jī)監(jiān)控軟件，即客戶端基于QT框架和HTML5混合開(kāi)發(fā)，主要負(fù)責(zé)用戶登錄和人機(jī)交互?？蛻舳伺c服務(wù)器之間的通信基于HTTP（超文本傳輸協(xié)議）和WebSocket協(xié)議進(jìn)行，服務(wù)器使用UDP 獲取并控制無(wú)人機(jī)的實(shí)時(shí)狀態(tài)信息。無(wú)人機(jī)的視頻通過(guò)推流過(guò)程推送到流媒體服務(wù)器，客戶端通過(guò)拉流過(guò)程獲取視頻流并解碼播放。

本文主要介紹客戶端即無(wú)人機(jī)監(jiān)控軟件的開(kāi)發(fā)。無(wú)人機(jī)監(jiān)控軟件由以下六個(gè)模塊構(gòu)成：

狀態(tài)顯示模塊：如圖2所示，該模塊由無(wú)人機(jī)選擇窗口和實(shí)時(shí)信息窗口組成。無(wú)人機(jī)選擇窗口中顯示了當(dāng)前系統(tǒng)中所有無(wú)人機(jī)的名稱、編號(hào)及在線狀態(tài)，實(shí)時(shí)信息窗口用文本加數(shù)字的方式顯示了無(wú)人機(jī)的飛行數(shù)據(jù)，包括無(wú)人機(jī)的飛行高度、垂直速度、水平速度、經(jīng)緯度、俯仰角、滾轉(zhuǎn)角、航向角、電池電量等信息。

飛行控制模塊：如圖3所示，該模塊由控制按鈕和HTTP接口函數(shù)組成，其功能是當(dāng)用戶點(diǎn)擊界面上的無(wú)人機(jī)控制按鈕時(shí)，軟件通過(guò)HTTP協(xié)議將相應(yīng)控制指令發(fā)送給服務(wù)器，然后由服務(wù)器封裝成相應(yīng)的控制協(xié)議發(fā)送給無(wú)人機(jī)，實(shí)現(xiàn)對(duì)無(wú)人機(jī)的控制。無(wú)人機(jī)控制指令包括無(wú)人機(jī)（一鍵）起飛、（一鍵）返航、執(zhí)行任務(wù)、暫停任務(wù)等。

信息管理模塊：該模塊提供了修改服務(wù)器數(shù)據(jù)庫(kù)的可視化界面，由多個(gè)表格組成，如：無(wú)人機(jī)設(shè)備信息表、用戶信息表、航線信息表等，擁有管理員權(quán)限的用戶才可以進(jìn)入該模塊。

離線地圖模塊：電子地圖作為無(wú)人機(jī)地面控制軟件基礎(chǔ)模塊之一，其功能包括無(wú)人機(jī)實(shí)時(shí)位置顯示、飛行區(qū)域（航點(diǎn)）選取、飛行軌跡繪制等。為了讓系統(tǒng)能夠在自主搭建的無(wú)線局域網(wǎng)中正常運(yùn)行，該模塊使用BIGEMAP離線地圖解決方案。

用戶登錄模塊：該模塊用于發(fā)送用戶登錄請(qǐng)求并從收到的服務(wù)器響應(yīng)中取出Token（令牌），然后將To?ken保存下來(lái)供后續(xù)的網(wǎng)絡(luò)請(qǐng)求使用。

視頻監(jiān)控模塊：該模塊主要用于獲取無(wú)人機(jī)的視頻流并解碼播放，同時(shí)還能控制無(wú)人機(jī)吊艙的運(yùn)動(dòng)。

2 無(wú)人機(jī)監(jiān)控軟件實(shí)現(xiàn)

無(wú)人機(jī)監(jiān)控軟件主框架基于C++語(yǔ)言結(jié)合QT框架在Windows10下開(kāi)發(fā)，開(kāi)發(fā)過(guò)程主要實(shí)現(xiàn)六個(gè)模塊的基本功能。其中，電子地圖模塊基于HTML5開(kāi)發(fā)完成并使用QT的嵌入式瀏覽器功能加載到前端界面，視頻監(jiān)控模塊基于VLC-QT庫(kù)開(kāi)發(fā)實(shí)現(xiàn)。

2.1 用戶登錄模塊實(shí)現(xiàn)

為了提高系統(tǒng)的安全性，防止無(wú)關(guān)人員對(duì)軟件進(jìn)行誤操作，同時(shí)為了區(qū)分不同操作人員可操作的無(wú)人機(jī)種類及數(shù)量，需要對(duì)軟件使用者進(jìn)行權(quán)限驗(yàn)證，因此軟件增加了如圖4所示的用戶登錄模塊，用于驗(yàn)證用戶的操作權(quán)限。該模塊由用戶名輸入框、密碼輸入框和兩個(gè)功能按鈕組成。

用戶登錄模塊的軟件實(shí)現(xiàn)如圖5所示。用戶名輸入框和密碼輸入框是QLineEdit的兩個(gè)實(shí)例化對(duì)象，當(dāng)用戶輸入完成點(diǎn)擊登錄按鈕后，程序提取用戶輸入的內(nèi)容封裝成JSON格式，并轉(zhuǎn)化為字節(jié)數(shù)組，然后設(shè)置QNetworkRequest類的請(qǐng)求頭、URL等內(nèi)容，再使用QNetworkAccessManager類的post函數(shù)完成HTTP請(qǐng)求的發(fā)送。當(dāng)服務(wù)器接收到請(qǐng)求后，會(huì)在數(shù)據(jù)庫(kù)中對(duì)比用戶名和密碼是否正確，如果驗(yàn)證正確，服務(wù)器會(huì)發(fā)送一個(gè)包含了狀態(tài)碼和Token等信息的HTTP響應(yīng)，該響應(yīng)由QNetworkAccessManager 類負(fù)責(zé)接收，并以函數(shù)返回值的形式保存到QNetworkReply類對(duì)象中。最后對(duì)響應(yīng)內(nèi)容解析獲得Token并用QString保存起來(lái)，這樣就實(shí)現(xiàn)了用戶登錄驗(yàn)證的過(guò)程。

另外值得注意的是，Token是一個(gè)臨時(shí)性的令牌，在一段時(shí)間后就會(huì)失效，為了滿足軟件長(zhǎng)時(shí)間運(yùn)行的需求，在用戶登錄成功后設(shè)置一定時(shí)器，周期性地發(fā)送登錄請(qǐng)求來(lái)獲取新的Token。

2.2 離線地圖模塊實(shí)現(xiàn)

無(wú)人機(jī)控制系統(tǒng)運(yùn)行在無(wú)線局域網(wǎng)或自組網(wǎng)內(nèi)，百度等常見(jiàn)的在線地圖源無(wú)法獲取，因此需要用離線地圖代替。BIGEMAP是目前使用較廣泛的離線地圖解決方案之一，它采用服務(wù)器-客戶端架構(gòu)，瓦片地圖下載后保存在服務(wù)器終端上，利用BIGEMAP離線地圖服務(wù)器發(fā)布地圖服務(wù)，最后通過(guò)服務(wù)器提供的接口就可以在客戶端上實(shí)現(xiàn)地圖數(shù)據(jù)的訪問(wèn)，因此本文的電子地圖模塊基于BIGEMAP進(jìn)行二次開(kāi)發(fā)，實(shí)現(xiàn)了不依賴于公網(wǎng)的地圖信息讀取。

BIGEMAP 提供了大量的離線地圖開(kāi)發(fā)實(shí)例HTML 源碼和一套完整的JavaScript 應(yīng)用編程接口（API） ，可以幫助開(kāi)發(fā)人員快速完成離線地圖的開(kāi)發(fā)。因此無(wú)人機(jī)監(jiān)控軟件的電子地圖模塊基于HTML5開(kāi)發(fā)，通過(guò)調(diào)用JS函數(shù)實(shí)現(xiàn)放大縮小、添加標(biāo)注、區(qū)域繪制等地圖操作。

離線地圖模塊的軟件實(shí)現(xiàn)如圖6所示。要使用地圖樣式和相應(yīng)函數(shù)必須先在HTML的頭部元素中用link標(biāo)簽鏈接離線地圖服務(wù)器的樣式表，用script標(biāo)簽包含服務(wù)器提供的JS函數(shù)庫(kù)，然后用style標(biāo)簽定義樣式信息，最后在HTML的主體部分用map函數(shù)構(gòu)造地圖對(duì)象，這樣就實(shí)現(xiàn)了地圖的顯示并為地圖操作提供支持。

離線地圖模塊即HTML文件在QT中的加載通過(guò)QT WebEngine模塊來(lái)實(shí)現(xiàn)。QWebEngine-View類是QT WebEngine模塊的主要窗口類，其提供的load（或reload） 函數(shù)可以加載（或刷新）HTML文件；QWebEn?ginePage類包含在QWebEngineView類中并通過(guò)page 函數(shù)獲取，其成員函數(shù)runJavaScript可以調(diào)用JS腳本和HTML文件中的JS函數(shù)；利用上述兩個(gè)類可以實(shí)現(xiàn)QT與HTML間的交互。

在QT與HTM5的交互實(shí)現(xiàn)中，本文還遇到如下兩個(gè)問(wèn)題：1） HTML文件除了需要與地圖服務(wù)器交互外，很多時(shí)候還需同無(wú)人機(jī)控制系統(tǒng)服務(wù)器通信，如在繪制完任務(wù)區(qū)域后，需要將區(qū)域的頂點(diǎn)信息發(fā)送給服務(wù)器進(jìn)行航線規(guī)劃，在這樣的過(guò)程中需要由網(wǎng)頁(yè)端發(fā)送網(wǎng)絡(luò)請(qǐng)求，但網(wǎng)頁(yè)端由于沒(méi)有用戶的登錄信息無(wú)法獲取Token，也就無(wú)法發(fā)送請(qǐng)求，因此如何將登錄模塊獲取的Token傳遞給HTML成為一個(gè)難題。2） 初始化界面的過(guò)程中，狀態(tài)顯示模塊和電子地圖模塊都需要建立WebSocket連接獲取無(wú)人機(jī)的實(shí)時(shí)信息，前者用來(lái)刷新界面上的數(shù)據(jù)，后者用來(lái)在地圖上實(shí)時(shí)標(biāo)注無(wú)人機(jī)位置。當(dāng)服務(wù)器IP 地址發(fā)生變化時(shí)，Web?Socket 連接地址也會(huì)產(chǎn)生變化，這時(shí)需要對(duì)QT 和HTML端程序中的服務(wù)器地址和WebSocket地址進(jìn)行更改，這對(duì)于使用者顯然是不友好的。

對(duì)于以上問(wèn)題本文的解決方法如圖7所示。將服務(wù)器地址、WebSocket連接地址等軟件配置信息按一定格式手動(dòng)寫入一個(gè)config.ini文件，無(wú)人機(jī)監(jiān)控軟件運(yùn)行后先讀取該文件內(nèi)容并賦給相應(yīng)變量，這樣服務(wù)器地址改變時(shí)不必在代碼端做修改，只需修改配置文件即可；同時(shí)在用戶登錄驗(yàn)證成功后將獲得的Token 和服務(wù)器地址、WebSocket連接地址一起封裝成函數(shù)寫入一個(gè)JS 文件，然后在HTML 的頭部元素中用script標(biāo)簽將該JS文件以外部文件的形式附加進(jìn)來(lái)，最后在HTML的主體部分直接調(diào)用該函數(shù)就可獲取Token及地址信息。

2.3 視頻監(jiān)控模塊實(shí)現(xiàn)

無(wú)人機(jī)搭載不同的任務(wù)載荷可以適配不同的使用環(huán)境，其中使用較多的是搭配攝像頭實(shí)現(xiàn)監(jiān)控巡邏等功能。本系統(tǒng)中部分無(wú)人機(jī)搭載攝像頭，客戶端上需要顯示無(wú)人機(jī)的原始視頻和經(jīng)過(guò)圖像處理后的視頻，因此系統(tǒng)將無(wú)人機(jī)視頻基于RTSP或RTMP協(xié)議傳輸?shù)搅髅襟w服務(wù)器，經(jīng)過(guò)圖像處理后的視頻和原視頻都儲(chǔ)存在流媒體服務(wù)器上，客戶端可通過(guò)拉流地址分別獲取原視頻和處理后的視頻，視頻流的傳輸如圖8所示。

視頻監(jiān)控模塊基于VLC-QT開(kāi)源庫(kù)實(shí)現(xiàn)了無(wú)人機(jī)實(shí)時(shí)視頻流（RTSP/RTMP） 的獲取與播放。Qt中提供的視頻應(yīng)用開(kāi)發(fā)類（QMediaPlayer、QVideoWidget） 無(wú)法播放復(fù)雜編碼格式流視頻，VLC-QT是一個(gè)用于連接libVLC庫(kù)和Qt的開(kāi)源庫(kù)，它簡(jiǎn)化了Qt中視頻功能的開(kāi)發(fā)[9]。

視頻監(jiān)控模塊的軟件實(shí)現(xiàn)如圖9所示。在QT中需要先實(shí)例化VlcInstance類，然后用VlcInstance類的對(duì)象分別實(shí)例化VlcMediaPlayer和VlcMedia類，再用VlcMediaPlayer類的對(duì)象構(gòu)造VlcWidgetVideo類的對(duì)象，最后用VlcMediaPlayer類的成員函數(shù)open打開(kāi)媒體項(xiàng)目（VlcMedia 類對(duì)象）。其中，VlcInstance 類是VLC-QT庫(kù)的基本實(shí)例管理器，可以用來(lái)操作VLCQT庫(kù)，例如獲取VLC 庫(kù)的初始化狀態(tài)；VlcMedia?Player類是媒體播放器，提供播放控制功能，例如控制視頻的播放和暫停；VlcMedia類表示可播放的媒體，該媒體可以是本地文件也可以是遠(yuǎn)程媒體信息；Vlc?WidgetVideo 類是視頻播放的窗口，提供視頻顯示和鼠標(biāo)控制。云臺(tái)操縱通過(guò)向服務(wù)器發(fā)送HTTP請(qǐng)求實(shí)現(xiàn)。

2.4 狀態(tài)顯示模塊實(shí)現(xiàn)

無(wú)人機(jī)狀態(tài)顯示模塊實(shí)現(xiàn)主要包括無(wú)人機(jī)選擇窗口和無(wú)人機(jī)實(shí)時(shí)信息窗口兩部分。如圖10所示為該模塊實(shí)現(xiàn)示意圖。首先服務(wù)器將系統(tǒng)中所有無(wú)人機(jī)的位置信息、姿態(tài)信息以及狀態(tài)信息封裝成JSON 數(shù)組，然后通過(guò)WebSocket協(xié)議以心跳包的形式推送實(shí)時(shí)數(shù)據(jù)。在無(wú)人機(jī)狀態(tài)顯示模塊中，使用QWeb?Socket類接收該心跳包并用QJsonArray類的對(duì)象暫存（在收到下一個(gè)心跳包時(shí)刷新數(shù)據(jù)）。無(wú)人機(jī)選擇窗口包含所有無(wú)人機(jī)的簡(jiǎn)要信息，為了在系統(tǒng)增減無(wú)人機(jī)時(shí)頁(yè)面自動(dòng)匹配無(wú)人機(jī)數(shù)量，該窗口采用動(dòng)態(tài)生成按鈕的方式：首先獲取心跳包中JSON對(duì)象的數(shù)量（即無(wú)人機(jī)數(shù)量），然后通過(guò)循環(huán)生成相應(yīng)數(shù)量的UAVButton類（自定義類，由按鈕和標(biāo)簽組成）對(duì)象，并將其鼠標(biāo)點(diǎn)擊信號(hào)與實(shí)時(shí)信息窗口的顯示事件綁定。當(dāng)無(wú)人機(jī)按鈕i被選中時(shí)通過(guò)信號(hào)槽機(jī)制將對(duì)應(yīng)無(wú)人機(jī)編號(hào)傳遞給實(shí)時(shí)信息窗口，實(shí)時(shí)信息窗口在每次收到心跳包時(shí)根據(jù)無(wú)人機(jī)編號(hào)在QJsonArray類對(duì)象中獲取無(wú)人機(jī)的實(shí)時(shí)信息并刷新對(duì)應(yīng)的數(shù)據(jù)標(biāo)簽。

2.5 其他模塊實(shí)現(xiàn)

信息管理模塊主要由QTableWidget類實(shí)現(xiàn)，表單數(shù)據(jù)的獲取和修改通過(guò)發(fā)送網(wǎng)絡(luò)請(qǐng)求實(shí)現(xiàn)。飛行控制模塊通過(guò)一些QPushButton類對(duì)象和槽函數(shù)實(shí)現(xiàn)，這些槽函數(shù)中封裝了無(wú)人機(jī)控制相關(guān)的HTTP請(qǐng)求。HTTP請(qǐng)求的具體實(shí)現(xiàn)參見(jiàn)2.1。

3 結(jié)束語(yǔ)

本文介紹了一種基于C/S架構(gòu)和模塊化編程思想的無(wú)人機(jī)控制系統(tǒng)并詳細(xì)闡述了其客戶端的實(shí)現(xiàn)過(guò)程。該客戶端是一種采用QT和HTML5混合編程的無(wú)人機(jī)監(jiān)控軟件，軟件主框架采用QT開(kāi)發(fā)，能夠適配不同操作平臺(tái)，通過(guò)QT與HTML的交互實(shí)現(xiàn)了離線地圖的加載和操作，使系統(tǒng)的運(yùn)行不依賴于公網(wǎng)環(huán)境，增強(qiáng)了系統(tǒng)的可移植性和環(huán)境適應(yīng)能力。無(wú)人機(jī)監(jiān)控軟件對(duì)設(shè)備的硬件要求小且具備無(wú)人機(jī)地面站的大部分功能，能夠快速部署到各種小型手持終端上，讓無(wú)人機(jī)的控制變得更加方便。