Qt編寫安防視頻監控系統66-子模塊10網頁瀏覽

一、前言

網頁瀏覽模塊,用於傳入一個網頁地址,打開對應的網頁進行瀏覽,可用於網頁展示信息,支持多個,可以自行增加,代碼中演示了一個。此模塊的用途屬於添磚加瓦潤色用的,比如有一個牛逼的3D網頁,機器人、醫療骨骼、3D建築等,非常精美漂亮,這種一般是js實現的,可以利用現有的網頁模塊,放個瀏覽器控件加載就行,還支持交互,在展示的時候起到一個增色的兩點,也許大BOSS看了以後立馬就高興了,視覺刺激以後資金就來了。

對於瀏覽器控件,在Qt4時代用的是qwebkit,Qt5.6以前用的也是webkit,而且還獨立出來了webkitwidget組件模塊,但是5.6以後順應時代發展拋棄了webkit,轉而投靠谷歌的開源的webengine瀏覽器核心,這個核心最大的優點是走GPU,而且支持的特性最好,對於衆多的網頁開發者也是最受歡迎的,一般用GPU的東西內存這塊小不了,所以相對來說webkit內存佔用會更低,而webengine佔用更多。不過現在內存這麼大,這點佔用還是毛毛雨,只要不內存泄漏就行。

二、功能特點

(一)軟件模塊

  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. 雙擊攝像機節點自動播放視頻,雙擊節點自動依次添加視頻,會自動跳到下一個,雙擊父節點自動添加該節點下的所有視頻。可選主碼流、子碼流。
  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 提取碼:01jf 文件名:bin_video_system.zip。
  2. 國內站點:https://gitee.com/feiyangqingyun
  3. 國際站點:https://github.com/feiyangqingyun
  4. 個人主頁:https://blog.csdn.net/feiyangqingyun
  5. 知乎主頁:https://www.zhihu.com/people/feiyangqingyun/
  6. 在線文檔:https://feiyangqingyun.gitee.io/qwidgetdemo/video_system/

四、效果圖

五、核心代碼

#include "webview.h"
#include "qdebug.h"

#ifdef webkit
#include <QtWebKit>
#if (QT_VERSION >= QT_VERSION_CHECK(5,0,0))
#include <QtWebKitWidgets>
#endif
#elif webengine
#include <QtWebEngineWidgets>
#elif webie
#include <QAxWidget>
#elif webminiblink
#include "miniblink.h"
#endif

WebView::WebView(QWidget *parent)
{
    //初始化web控件配置信息
    WebView::initWebSetting();
    //初始化通用地圖數據
    WebHelper::initMapData();

    //數據交互類
    webJsData = new WebJsData(this);
    connect(webJsData, SIGNAL(receiveDataFromJs(QString, QVariant)),
            this, SIGNAL(receiveDataFromJs(QString, QVariant)));

#ifdef webkit
    webView = new QWebView(parent);
#elif webengine
    webView = new QWebEngineView(parent);
    //設置對應的通信通道
    QWebChannel *channel = new QWebChannel(this);
    channel->registerObject("objName", webJsData);
    webView->page()->setWebChannel(channel);
#elif webie
    webView = new QAxWidget(parent);
    //註冊瀏覽器控件
    webView->setControl("{8856F961-340A-11D0-A96B-00C04FD705A2}");
    //不顯示警告信息
    webView->setProperty("DisplayAlerts", false);
    //不顯示滾動條
    webView->setProperty("DisplayScrollBars", true);
#elif webminiblink
    webView = new miniblink(parent);
#endif

    //關聯加載完成信號
#if (defined webkit) || (defined webengine)
    connect(webView->page(), SIGNAL(loadFinished(bool)), this, SLOT(loadFinished()));
    connect(webView->page(), SIGNAL(loadFinished(bool)), this, SIGNAL(loadFinished(bool)));
#elif webminiblink
    connect(webView, SIGNAL(loadFinished(bool)), this, SLOT(loadFinished()));
    connect(webView, SIGNAL(loadFinished(bool)), this, SIGNAL(loadFinished(bool)));
    connect(webView, SIGNAL(receiveDataFromJs(QString, QVariant)),
            this, SIGNAL(receiveDataFromJs(QString, QVariant)));
#endif

    //設置沒有右鍵菜單
#if (defined webkit) || (defined webengine) || (defined webie) || (defined webminiblink)
    webView->setContextMenuPolicy(Qt::NoContextMenu);
#endif
}

void WebView::initWebSetting()
{
    //全局配置只需要設置一次就行
    static bool isInit = false;
    if (!isInit) {
        isInit = true;
#ifdef webkit
        QWebSettings *webSetting = QWebSettings::globalSettings();
        webSetting->setAttribute(QWebSettings::JavascriptEnabled, true);
        webSetting->setAttribute(QWebSettings::PluginsEnabled, true);
        webSetting->setAttribute(QWebSettings::JavascriptCanOpenWindows, true);
#elif webengine
        QWebEngineSettings *webSetting = QWebEngineSettings::globalSettings();
        webSetting->setAttribute(QWebEngineSettings::JavascriptEnabled, true);
        webSetting->setAttribute(QWebEngineSettings::PluginsEnabled, true);
        webSetting->setAttribute(QWebEngineSettings::JavascriptCanOpenWindows, true);
#endif
    }
}

void WebView::setLayout(QLayout *layout)
{
    //把控件加入到佈局
#if (defined webkit) || (defined webengine) || (defined webie) || (defined webminiblink)
    layout->addWidget(webView);
#endif
}

void WebView::setVisible(bool visible)
{
#if (defined webkit) || (defined webengine) || (defined webie) || (defined webminiblink)
    webView->setVisible(visible);
#endif
}

void WebView::setBgColor(const QColor &color)
{
#ifdef webengine
    webView->page()->setBackgroundColor(color);
#elif (defined webkit) || (defined webie)
    webView->setStyleSheet(QString("background:%1;").arg(color.name()));
#elif (defined webminiblink)
    webView->setBgColor(color);
#endif
}

void WebView::loadFinished()
{
#ifdef webkit
    webView->page()->mainFrame()->addToJavaScriptWindowObject("objName", webJsData);
#endif
}

void WebView::load(const QString &url, const QString &html, const QString &baseUrl)
{
    //如果存在網址則優先直接加載網址
    if (!url.isEmpty()) {
#if (defined webkit) || (defined webengine)
        webView->load(QUrl(url));
#elif webie
        webView->dynamicCall("Navigate(const QString&)", url);
#elif webminiblink
        webView->load(url);
#endif
    } else {
#if (defined webkit) || (defined webengine)
        webView->setHtml(html, QUrl(baseUrl));
#elif webminiblink
        webView->setHtml(html, baseUrl);
#endif
    }
}

void WebView::runJs(const QString &js)
{
    if (js.isEmpty()) {
        return;
    }
#ifdef webkit
    webView->page()->mainFrame()->evaluateJavaScript(js);
#elif webengine
    webView->page()->runJavaScript(js);
#elif webminiblink
    webView->runJs(js);
#endif
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章