# 一、前言

整个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. 双击摄像机节点自动播放视频，双击节点自动依次添加视频，会自动跳到下一个，双击父节点自动添加该节点下的所有视频。可选主码流、子码流。

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的，可以试试。

今天就先分享到这里，虽然现在不从事码农工作了，但是业余时间还是会继续研究，跟大家分享编程经验与心得，本文有什么不对的地方还请大佬们批评指导。

#编程#?