【OpenCV DNN】Flask 视频监控目标检测教程 08

欢迎关注『OpenCV DNN @ Youcans』系列，持续更新中

【OpenCV DNN】Flask 视频监控目标检测教程 08

- 3.8 OpenCV+Flask实时监控人脸识别+控制按钮
- - 新建 Flask 项目 cvFlask08c
  - Python程序文件
  - 视频流的网页模板
  - 程序运行

本系列从零开始，详细讲解使用 Flask 框架构建 OpenCV DNN 模型的 Web 应用程序。

上节介绍使用Flask框架构建一个视频流服务器，通过OpenCV捕获摄像头的实时画面，使用人脸检测级联分类器进行人脸识别，并在视频图像中标记检测到的人脸。本节我们添加一个控制按钮“Start/Stop”用来控制开始和停止播放视频流，一个帮助按钮“Help”用来提升帮助学习。

3.8 OpenCV+Flask实时监控人脸识别+控制按钮

进一步地，我们添加一个控制按钮“Start/Stop”用来控制开始和停止播放视频流，一个帮助按钮“Help”用来提升帮助学习。

我们在前端添加控制按钮“Start/Stop”，“Start”按钮用于开始播放视频，“Stop”按钮用于停止播放视频。点击这两个按钮时，会调用相应的 JavaScript 函数来显示或隐藏视频和按钮。帮助按钮“Help”使用JavaScript的alert()方法，在用户点击按钮时显示帮助信息。

在定义的视频流类VideoStream中，增加了使用 Haar 级联检测器检测图片中的人脸，步骤如下：
（1）创建 CascadeClassifier 级联分类器对象，加载人脸检测预训练模型。
（2）对于捕获的视频帧，使用detectMultiScale()方法进行人脸检测，返回检测到人脸的边界矩形。
（4）将边界矩形绘制到视频帧上。

新建 Flask 项目 cvFlask08c

新建一个Flask项目cvFlask08c，本项目的框架与cvFlask08相同。
cvFlask08c项目的文件树如下。

---文件名\|---models\|    |---haarcascade_frontalface_alt2.xml|---templates\|    |---index4c.html
|--- cvFlask08c.py

注意增加了一个子目录models保存人脸检测预训练模型文件haarcascade_frontalface_alt2.xml。

OpenCV 提供了级联分类器的方法，也可以直接下载预训练模型后使用 load() 方法加载模型。OpenCV 提供的 Haar 级联检测器的预训练模型位于 OpenCV 安装包的 \data\haarcascades文件夹，或者从【GitHub】opencv/data at 4.x 下载。

OpenCV 提供的 haar 级联检测器的预训练模型包括：

haarcascade_eye.xml, 眼睛
haarcascade_eye_tree_eyeglasses.xml, 戴眼镜的眼睛
haarcascade_frontalcatface.xml, 正面猫脸
haarcascade_frontalcatface_extended.xml, 正面猫脸
haarcascade_frontalface_alt.xml, 正面人脸
haarcascade_frontalface_alt2.xml, 正面人脸
haarcascade_frontalface_alt_tree.xml, 正面人脸
haarcascade_frontalface_default.xml, 正面人脸
haarcascade_fullbody.xml, 人体
haarcascade_lefteye_2splits.xml, 左眼
haarcascade_license_plate_rus_16stages.xml, 
haarcascade_lowerbody.xml, 
haarcascade_profileface.xml, 
haarcascade_righteye_2splits.xml, 右眼
haarcascade_russian_plate_number.xml, 
haarcascade_smile.xml, 笑脸
haarcascade_upperbody.xml, 上身

Python程序文件

任务逻辑由Python程序文件cvFlask08.py实现，完整代码如下。

# cvFlask08c.py
# OpenCV+Flask 图像处理例程 08
# 通过浏览器播放摄像头实时监控视频+人脸检测+控制按钮
# Copyright 2023 Youcans, XUPT
# Crated：2023-5-18# coding:utf-8
from flask import Flask, render_template, Response
import numpy as np
import cv2app = Flask(__name__)# 定义视频流类
class VideoCamera(object):def __init__(self):# 创建视频捕获对象，调用笔记本摄像头self.video = cv2.VideoCapture(0)  # 修改 API 设置为视频输入# 加载 Haar 级联分类器 预训练模型model_path = "./models/haarcascade_frontalface_alt2.xml"# 加载人脸检测级联分类器self.face_cascade = cv2.CascadeClassifier(model_path)print(type(self.face_cascade))def __del__(self):self.video.release()def get_frame(self):success, image = self.video.read()gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)# 使用级联分类器检测人脸faces = self.face_cascade.detectMultiScale(gray, scaleFactor=1.2,minNeighbors=5, minSize=(30, 30), maxSize=(300, 300))# 绘制人脸检测框for (x, y, w, h) in faces:cv2.rectangle(image, (x, y), (x + w, y + h), (255, 0, 0), 2)ret, buffer = cv2.imencode('.jpg', image)  # 编码为 jpg 格式frame_byte = buffer.tobytes()  # 转换为 bytes 类型return frame_byte@app.route('/')
def index():return render_template('index4c.html')def gen(camera):while True:frame = camera.get_frame()yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')@app.route('/video_feed')
def video_feed():return Response(gen(VideoCamera()),mimetype='multipart/x-mixed-replace; boundary=frame')if __name__ == '__main__':print("Running on http://127.0.0.1:5000")print("Running on http://192.168.3.249:5000")app.run(host='0.0.0.0', port=5000, debug=True)

视频流的网页模板

视频流的网页模板 index4c.html 位于templates文件夹。控制开始和停止播放视频流的控制按钮“Start/Stop”和帮助按钮“Help”，都是在网页模板 index4c.html 中定义的。

内容如下。

<!DOCTYPE html>
<html>
<head><title>Video Streaming</title><style>#video {display: block;margin: 0 auto;width: 600px;height: 360px;}#button-container {display: flex;justify-content: center;gap: 100px;margin-top: 10px;}button {width: 60px;height: 30px;}</style>
</head>
<body><h2 style="text-align:center">OpenCV+Flask 例程：实时视频监控</h2><img id="video" src="" style="display: block"><div id="button-container"><button id="start" onclick="start()">Start</button><button id="stop" onclick="stop()" style="display: none">Stop</button><button id="help" onclick="help()">Help</button></div><script>function start() {document.getElementById("video").src = "{{ url_for('video_feed') }}";document.getElementById("start").style.display = "none";document.getElementById("stop").style.display = "inline";}function stop() {document.getElementById("video").src = "";document.getElementById("start").style.display = "inline";document.getElementById("stop").style.display = "none";}function help() {alert("This is an OpenCV+Flask routine. OpenCV reads the camera in real-time, uses a cascaded classifier to detect faces for face detection, and the browser plays monitoring videos in real-time.");}</script>
</body>
</html>

程序运行

进入cvFlask08c项目根目录，运行程序cvFlask08c.py，启动流媒体服务器。

在局域网内设备（包括移动手机）的浏览器打开http://192.168.3.249:5000，点击“Start”按钮，就可以播放视频监控画面。画面中检测到的人脸，用蓝色方框标记。

在这里插入图片描述

【本节完】

下节我们将讨论：OpenCV+Flask 多线程处理实时监控人脸识别。

版权声明：
欢迎关注『OpenCV DNN @ Youcans』系列
youcans@xupt 原创作品，转载必须标注原文链接：
【OpenCV DNN】Flask 视频监控目标检测教程 08
(https://blog.csdn.net/youcans/article/details/131175664)
Copyright 2023 youcans, XUPT
Crated：2023-06-12