## 一、前言

网页浏览模块，用于传入一个网页地址，打开对应的网页进行浏览，可用于网页展示信息，支持多个，可以自行增加，代码中演示了一个。此模块的用途属于添砖加瓦润色用的，比如有一个牛逼的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. 体验地址：[]() 提取码：01jf 文件名：bin_video_system.zip。

2. 国内站点：[]()

3. 国际站点：[]()

4. 个人主页：[]()

5. 知乎主页：[]()

6. 在线文档：[]()

## 四、效果图## 五、核心代码

#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"#endifWebView::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}