【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 cv2
app = 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