109 客户端项目创建

第一步，先构建Monitor项目的基本框架和用户界面。

109.1 创建项目

通过QtCreator，在C:\Users\Minwei\Projects\Qt路径下，创建名为Monitor的项目。

C:\Users\Minwei\Projects\Qt\Monitor\Monitor.pro：

xxxxxxxxxx
7
1
...
2
QT += ... network
3
...
4
INCLUDEPATH += C:\opencv-3.4.3\build\install\include
5
...
6
LIBS += C:\opencv-3.4.3\build\install\x64\mingw\lib\libopencv_*.a
7
...

109.2 设计界面

C:\Users\Minwei\Projects\Qt\Monitor\monitordialog.ui：

xxxxxxxxxx
412
1
<?xml version="1.0" encoding="UTF-8"?>
2
<ui version="4.0">
3
 <class>MonitorDialog</class>
4
 <widget class="QDialog" name="MonitorDialog">
5
  <property name="geometry">
6
   <rect>
7
    <x>0</x>
8
    <y>0</y>
9
    <width>663</width>
10
    <height>287</height>
11
   </rect>
12
  </property>
13
  <property name="windowTitle">
14
   <string>远程视频监控</string>
15
  </property>
16
  <layout class="QGridLayout" name="m_layoutGrid">
17
   <item row="0" column="0">
18
    <widget class="QLabel" name="m_labStream">
19
     <property name="palette">
20
      <palette>
21
       <active>
22
        <colorrole role="Base">
23
         <brush brushstyle="SolidPattern">
24
          <color alpha="255">
25
           <red>255</red>
26
           <green>255</green>
27
           <blue>255</blue>
28
          </color>
29
         </brush>
30
        </colorrole>
31
        <colorrole role="Window">
32
         <brush brushstyle="SolidPattern">
33
          <color alpha="255">
34
           <red>0</red>
35
           <green>0</green>
36
           <blue>255</blue>
37
          </color>
38
         </brush>
39
        </colorrole>
40
       </active>
41
       <inactive>
42
        <colorrole role="Base">
43
         <brush brushstyle="SolidPattern">
44
          <color alpha="255">
45
           <red>255</red>
46
           <green>255</green>
47
           <blue>255</blue>
48
          </color>
49
         </brush>
50
        </colorrole>
51
        <colorrole role="Window">
52
         <brush brushstyle="SolidPattern">
53
          <color alpha="255">
54
           <red>0</red>
55
           <green>0</green>
56
           <blue>255</blue>
57
          </color>
58
         </brush>
59
        </colorrole>
60
       </inactive>
61
       <disabled>
62
        <colorrole role="Base">
63
         <brush brushstyle="SolidPattern">
64
          <color alpha="255">
65
           <red>0</red>
66
           <green>0</green>
67
           <blue>255</blue>
68
          </color>
69
         </brush>
70
        </colorrole>
71
        <colorrole role="Window">
72
         <brush brushstyle="SolidPattern">
73
          <color alpha="255">
74
           <red>0</red>
75
           <green>0</green>
76
           <blue>255</blue>
77
          </color>
78
         </brush>
79
        </colorrole>
80
       </disabled>
81
      </palette>
82
     </property>
83
     <property name="autoFillBackground">
84
      <bool>true</bool>
85
     </property>
86
     <property name="frameShape">
87
      <enum>QFrame::Box</enum>
88
     </property>
89
    </widget>
90
   </item>
91
   <item row="0" column="1">
92
    <layout class="QGridLayout" name="m_layoutSnapshot">
93
     <item row="0" column="0">
94
      <widget class="QLabel" name="m_labSnapshot1">
95
       <property name="palette">
96
        <palette>
97
         <active>
98
          <colorrole role="Base">
99
           <brush brushstyle="SolidPattern">
100
            <color alpha="255">
101
             <red>255</red>
102
             <green>255</green>
103
             <blue>255</blue>
104
            </color>
105
           </brush>
106
          </colorrole>
107
          <colorrole role="Window">
108
           <brush brushstyle="SolidPattern">
109
            <color alpha="255">
110
             <red>0</red>
111
             <green>255</green>
112
             <blue>0</blue>
113
            </color>
114
           </brush>
115
          </colorrole>
116
         </active>
117
         <inactive>
118
          <colorrole role="Base">
119
           <brush brushstyle="SolidPattern">
120
            <color alpha="255">
121
             <red>255</red>
122
             <green>255</green>
123
             <blue>255</blue>
124
            </color>
125
           </brush>
126
          </colorrole>
127
          <colorrole role="Window">
128
           <brush brushstyle="SolidPattern">
129
            <color alpha="255">
130
             <red>0</red>
131
             <green>255</green>
132
             <blue>0</blue>
133
            </color>
134
           </brush>
135
          </colorrole>
136
         </inactive>
137
         <disabled>
138
          <colorrole role="Base">
139
           <brush brushstyle="SolidPattern">
140
            <color alpha="255">
141
             <red>0</red>
142
             <green>255</green>
143
             <blue>0</blue>
144
            </color>
145
           </brush>
146
          </colorrole>
147
          <colorrole role="Window">
148
           <brush brushstyle="SolidPattern">
149
            <color alpha="255">
150
             <red>0</red>
151
             <green>255</green>
152
             <blue>0</blue>
153
            </color>
154
           </brush>
155
          </colorrole>
156
         </disabled>
157
        </palette>
158
       </property>
159
       <property name="autoFillBackground">
160
        <bool>true</bool>
161
       </property>
162
       <property name="frameShape">
163
        <enum>QFrame::Box</enum>
164
       </property>
165
      </widget>
166
     </item>
167
     <item row="0" column="1">
168
      <widget class="QLabel" name="m_labSnapshot2">
169
       <property name="palette">
170
        <palette>
171
         <active>
172
          <colorrole role="Base">
173
           <brush brushstyle="SolidPattern">
174
            <color alpha="255">
175
             <red>255</red>
176
             <green>255</green>
177
             <blue>255</blue>
178
            </color>
179
           </brush>
180
          </colorrole>
181
          <colorrole role="Window">
182
           <brush brushstyle="SolidPattern">
183
            <color alpha="255">
184
             <red>0</red>
185
             <green>255</green>
186
             <blue>0</blue>
187
            </color>
188
           </brush>
189
          </colorrole>
190
         </active>
191
         <inactive>
192
          <colorrole role="Base">
193
           <brush brushstyle="SolidPattern">
194
            <color alpha="255">
195
             <red>255</red>
196
             <green>255</green>
197
             <blue>255</blue>
198
            </color>
199
           </brush>
200
          </colorrole>
201
          <colorrole role="Window">
202
           <brush brushstyle="SolidPattern">
203
            <color alpha="255">
204
             <red>0</red>
205
             <green>255</green>
206
             <blue>0</blue>
207
            </color>
208
           </brush>
209
          </colorrole>
210
         </inactive>
211
         <disabled>
212
          <colorrole role="Base">
213
           <brush brushstyle="SolidPattern">
214
            <color alpha="255">
215
             <red>0</red>
216
             <green>255</green>
217
             <blue>0</blue>
218
            </color>
219
           </brush>
220
          </colorrole>
221
          <colorrole role="Window">
222
           <brush brushstyle="SolidPattern">
223
            <color alpha="255">
224
             <red>0</red>
225
             <green>255</green>
226
             <blue>0</blue>
227
            </color>
228
           </brush>
229
          </colorrole>
230
         </disabled>
231
        </palette>
232
       </property>
233
       <property name="autoFillBackground">
234
        <bool>true</bool>
235
       </property>
236
       <property name="frameShape">
237
        <enum>QFrame::Box</enum>
238
       </property>
239
      </widget>
240
     </item>
241
     <item row="1" column="0">
242
      <widget class="QLabel" name="m_labSnapshot3">
243
       <property name="palette">
244
        <palette>
245
         <active>
246
          <colorrole role="Base">
247
           <brush brushstyle="SolidPattern">
248
            <color alpha="255">
249
             <red>255</red>
250
             <green>255</green>
251
             <blue>255</blue>
252
            </color>
253
           </brush>
254
          </colorrole>
255
          <colorrole role="Window">
256
           <brush brushstyle="SolidPattern">
257
            <color alpha="255">
258
             <red>0</red>
259
             <green>255</green>
260
             <blue>0</blue>
261
            </color>
262
           </brush>
263
          </colorrole>
264
         </active>
265
         <inactive>
266
          <colorrole role="Base">
267
           <brush brushstyle="SolidPattern">
268
            <color alpha="255">
269
             <red>255</red>
270
             <green>255</green>
271
             <blue>255</blue>
272
            </color>
273
           </brush>
274
          </colorrole>
275
          <colorrole role="Window">
276
           <brush brushstyle="SolidPattern">
277
            <color alpha="255">
278
             <red>0</red>
279
             <green>255</green>
280
             <blue>0</blue>
281
            </color>
282
           </brush>
283
          </colorrole>
284
         </inactive>
285
         <disabled>
286
          <colorrole role="Base">
287
           <brush brushstyle="SolidPattern">
288
            <color alpha="255">
289
             <red>0</red>
290
             <green>255</green>
291
             <blue>0</blue>
292
            </color>
293
           </brush>
294
          </colorrole>
295
          <colorrole role="Window">
296
           <brush brushstyle="SolidPattern">
297
            <color alpha="255">
298
             <red>0</red>
299
             <green>255</green>
300
             <blue>0</blue>
301
            </color>
302
           </brush>
303
          </colorrole>
304
         </disabled>
305
        </palette>
306
       </property>
307
       <property name="autoFillBackground">
308
        <bool>true</bool>
309
       </property>
310
       <property name="frameShape">
311
        <enum>QFrame::Box</enum>
312
       </property>
313
      </widget>
314
     </item>
315
     <item row="1" column="1">
316
      <widget class="QLabel" name="m_labSnapshot4">
317
       <property name="palette">
318
        <palette>
319
         <active>
320
          <colorrole role="Base">
321
           <brush brushstyle="SolidPattern">
322
            <color alpha="255">
323
             <red>255</red>
324
             <green>255</green>
325
             <blue>255</blue>
326
            </color>
327
           </brush>
328
          </colorrole>
329
          <colorrole role="Window">
330
           <brush brushstyle="SolidPattern">
331
            <color alpha="255">
332
             <red>0</red>
333
             <green>255</green>
334
             <blue>0</blue>
335
            </color>
336
           </brush>
337
          </colorrole>
338
         </active>
339
         <inactive>
340
          <colorrole role="Base">
341
           <brush brushstyle="SolidPattern">
342
            <color alpha="255">
343
             <red>255</red>
344
             <green>255</green>
345
             <blue>255</blue>
346
            </color>
347
           </brush>
348
          </colorrole>
349
          <colorrole role="Window">
350
           <brush brushstyle="SolidPattern">
351
            <color alpha="255">
352
             <red>0</red>
353
             <green>255</green>
354
             <blue>0</blue>
355
            </color>
356
           </brush>
357
          </colorrole>
358
         </inactive>
359
         <disabled>
360
          <colorrole role="Base">
361
           <brush brushstyle="SolidPattern">
362
            <color alpha="255">
363
             <red>0</red>
364
             <green>255</green>
365
             <blue>0</blue>
366
            </color>
367
           </brush>
368
          </colorrole>
369
          <colorrole role="Window">
370
           <brush brushstyle="SolidPattern">
371
            <color alpha="255">
372
             <red>0</red>
373
             <green>255</green>
374
             <blue>0</blue>
375
            </color>
376
           </brush>
377
          </colorrole>
378
         </disabled>
379
        </palette>
380
       </property>
381
       <property name="autoFillBackground">
382
        <bool>true</bool>
383
       </property>
384
       <property name="frameShape">
385
        <enum>QFrame::Box</enum>
386
       </property>
387
      </widget>
388
     </item>
389
    </layout>
390
   </item>
391
   <item row="1" column="0">
392
    <widget class="QPushButton" name="m_btnStream">
393
     <property name="text">
394
      <string>视频</string>
395
     </property>
396
     <property name="default">
397
      <bool>true</bool>
398
     </property>
399
    </widget>
400
   </item>
401
   <item row="1" column="1">
402
    <widget class="QPushButton" name="m_btnSnapshot">
403
     <property name="text">
404
      <string>快照</string>
405
     </property>
406
    </widget>
407
   </item>
408
  </layout>
409
 </widget>
410
 <resources/>
411
 <connections/>
412
</ui>

109.3 功能框架

将C:\opencv-3.4.3\build\install\etc\haarcascades目录下的haarcascade_frontalface_default.xml文件复制到项目目录下。

C:\Users\Minwei\Projects\Qt\Monitor\monitordialog.h：

xxxxxxxxxx
26
1
#ifndef MONITORDIALOG_H
2
#define MONITORDIALOG_H
3

4
#include <QDialog>
5

6
QT_BEGIN_NAMESPACE
7
namespace Ui { class MonitorDialog; }
8
QT_END_NAMESPACE
9

10
class MonitorDialog : public QDialog
11
{
12
    Q_OBJECT
13

14
public:
15
    MonitorDialog(QWidget *parent = nullptr);
16
    ~MonitorDialog();
17

18
private slots:
19
    void on_m_btnStream_clicked();
20
    void on_m_btnSnapshot_clicked();
21

22
private:
23
    Ui::MonitorDialog *ui;
24
};
25

26
#endif // MONITORDIALOG_H

C:\Users\Minwei\Projects\Qt\Monitor\monitordialog.cpp：

xxxxxxxxxx
22
1
#include "monitordialog.h"
2
#include "ui_monitordialog.h"
3

4
MonitorDialog::MonitorDialog(QWidget *parent)
5
    : QDialog(parent)
6
    , ui(new Ui::MonitorDialog)
7
{
8
    ui->setupUi(this);
9
}
10

11
MonitorDialog::~MonitorDialog()
12
{
13
    delete ui;
14
}
15

16
void MonitorDialog::on_m_btnStream_clicked()
17
{
18
}
19

20
void MonitorDialog::on_m_btnSnapshot_clicked()
21
{
22
}

109.4 测试验证

运行效果如图所示：