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

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

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


    本系列从零开始，详细讲解使用 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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    注意增加了一个子目录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, 上身


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    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)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    视频流的网页模板

    视频流的网页模板 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51

    程序运行

    进入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


  • 相关阅读:
    第九篇：– 过程发现（Process Discovery）是如何赋能数字化市场营销全过程？- 我为什么要翻译介绍美国人工智能科技巨头IAB公司
    带你一起来理解布隆过滤器，带图分析~
    C++类内定义友元却无需类外声明的特殊情况
    Kafka命令行操作
    App测试和Web测试的区别
    QML android 采集手机传感器数据 并通过udp 发送
    超详讲解yum包管理器/Vim编辑器/gdb调试器【Linux】
    java中Long和Integer缓存-128~127的简介说明
    .NET餐厅管理系统sql数据帮助类执行SQL返回DataReader数据集、执行SQL语句，返回影响的记录数、执行多条SQL语句，实现数据库事务。
    小程序源码：求职招聘微信小程序源码下载v4.1.78
  • 原文地址：https://blog.csdn.net/youcans/article/details/131175664