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

news2024/11/24 18:29:18

欢迎关注『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