基于Qt视频监控系统（百度地图，屏幕分割，双击放大，视频录制回放）下篇

1. 关于监控画面分割界面：

首先要明白如何布局。一般监控系统的监控画面都是栅格布局，想要实现四屏，九屏，十六屏，就应该先为十六屏布局，转为九屏时，隐藏右下角的七个屏幕，再将这七个移除栅格布局。同理转为四屏时，隐藏九屏右下角5个屏幕，再将这五个移除栅格布局。

十六屏转为九屏时候，隐藏移除红色区域屏幕。

代码我以四屏转一屏为例：

从gridLayout（栅格布局）移除要隐藏的label，再将该label在窗口中隐藏不显示。

想要复原之前的四屏布局，则要在gridLayout中重新加入刚刚隐藏的label。

2. 在监控系统中加入百度地图

首先想要访问百度地图，就要让Qt能够访问网页，访问网页就会用到html文件。Qt提供了访问网页的插件，但需要在安装Qt时勾选这两个插件。

因为html涉及到JavaScript语言，所有mingw编译环境下是不支持的，所以只能使用VS进行编译，VS版本最好为2017。所以opencv库需要编译成vs能使用的。

Qt准备了两个非常方便的类，一个是QWebEngineView（用来访问网页），一个是QWebChannel（用来实现JavaScript与Qt进行交互）

这两个类需要在工程文件里面加入

QT += webenginewidgets

QT += webchannel

如果没有上一步所安装的插件，Qt只会提示找不到这两个工程文件。

准备好以上工作，可以开始准备百度地图提供的Api接口。

首先在网页中搜索百度地图的开放平台进行AK密钥申请。网址为：https://lbsyun.baidu.com/

注意：创建的应用类型一定要选择浏览器端，百度地图还准备了白名单，防止其他网址访问盗用你的密钥。

百度地图为开发者准备了各种各样的源码，根据自己想要实现的功能选择对应的代码。将选择的代码复制下来，保存文件后缀名为.html的文件，再将该文件添加到Qt项目本地文件中。再添加到工程中。

大家会发现百度地图提供的代码中有”你的密钥“四个字，这里就是填写你之前在百度开放平台申请的AK密钥。有了密钥你才有权限访问百度地图。

有了百度地图提供的html文件，就可以使用QWebEngineView类去读取html文件。

大家也可以直接输入网址测试是否可以访问网页。

下面是对html文件的修改和注释：

这样就可以自定义图标样式，自定义放置在百度地图上面。如下图所示：

3. 关于Qt与JavaScript的交互

想要通过百度地图中去调用Qt里面的函数就要让Qt与JavaScript实现交互。

要想让Qt与JavaScript进行交互，需要用到QWebChannel类。然后还要在html文件中加入qwebchannel.js文件。qwebchannel.js在Qt文件夹中有提供，加qwebchannel.js复制粘贴到工程文件下，再添加到html文件中去。

qwebchannel.js是Qt提供的能与JavaScript进行相互调用的js文件。有了它才可以进行交互。

在html文件中加入qwebchannel.js文件的路径。

实现交互Qt中的准备：

两者交互需要定义一个同名的对象名，调用channel->registerObject("baidumap", this);设置对象名。后续html文件中也要同名。创建交互通道setWebChannel(channel)。

Html文件中的准备：

当图标被双击是就会调用Qt中的函数，实现了在JavaScript中调用Qt中的函数，实现交互。

该函数实现就会跳出一个交互的窗口如下：

显示调用成功。因此就可以实现点击地图图标，控制打开摄像头的操作。

下面是我的视频监控系统的整体实现界面：

至此结束，感谢阅读！