【OpenCV DNN】Flask 视频监控目标检测教程 06网站首页 其他

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

youcans_ 2024-08-10 12:01:02

简介【OpenCV DNN】Flask 视频监控目标检测教程 06

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

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

- 3.6 OpenCV+Flask实时监控和视频播放

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

本节介绍用 Flask 构建流媒体服务器，通过OpenCV捕获摄像头的实时画面，向服务器发送请求可以播放实时的视频流。也可以播放本地视频文件。

3.6 OpenCV+Flask实时监控和视频播放

本例程使用Flask框架构建一个视频流服务器，通过OpenCV捕获摄像头的实时画面，向服务器发送请求可以播放实时的视频流。

OpenCV提供的视频处理类VideoCapture既可以处理视频文件，也可以处理摄像头设备。创建视频读取或捕获对象、读取视频文件或设备的函数也相同，区别仅在于：在读取视频文件或读取视频流时，通过filename指定视频文件或视频流的路径；在使用摄像头时，通过index定义摄像头的ID号。

本项目的框架与cvFlask05相同，主要区别在于从网页获取视频文件路径名称和使用OpenCV读取视频文件。

cvFlask06 项目的文件树

新建一个Flask项目。cvFlask06项目的文件树如下。

---文件名
    |---templates
    |    |---index4.html
    |    |---index5.html
|--- cvFlask06.py
|--- vedio_01.mp4

cvFlask06 项目的程序文件

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

# cvFlask06.py
# OpenCV+Flask 图像处理例程 06
# 通过浏览器播放摄像头实时监控视频
# Copyright 2023 Youcans, XUPT
# Crated：2023-4-30
# coding:utf-8

from flask import Flask, Response, request, render_template
import cv2

app = Flask(__name__)  # 实例化 Flask 对象

# 定义视频流类
class VideoStream:
    def __init__(self, source):  # 传入视频源
        if source == 'camera':
            self.video_capture = cv2.VideoCapture(0)  # 使用摄像头
        else:
            self.video_capture = cv2.VideoCapture(source)  # 使用视频文件

    def get_frame(self):
        success, frame = self.video_capture.read()  # 读取视频帧
        if not success:
            return None
        ret, buffer = cv2.imencode('.jpg', frame)  # 编码为 jpg 格式
        frame_byte = buffer.tobytes()  # 转换为 bytes 类型
        return frame_byte

    def __del__(self):
        self.video_capture.release()  # 释放视频流

# 生成视频流的帧
def gen_frames(video_source):
    video_stream = VideoStream(video_source)  # 从视频文件获取视频流
    while True:
        frame = video_stream.get_frame()  # 获取视频帧
        if frame is None:
            break
        yield (b'--frame
' b'Content-Type: image/jpeg

'
               + frame + b'
')  # 生成视频流的帧

@app.route('/video_feed')
def video_feed():
    video_source = request.args.get('video_source', 'camera')  # 从网页获取视频源
    return Response(gen_frames(video_source), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/')
def index_camera():  # 实时视频监控
    # <img src="{{ url_for('video_feed', video_source='camera') }}">
    return render_template('index4.html')

@app.route('/vidfile')
def index_vidfile():  # 播放视频文件
    # <img src="{{ url_for('video_feed', video_source='vedio_01.mp4') }}">
    return render_template('index5.html')

if __name__ == '__main__':
    # 启动一个本地开发服务器，激活该网页
    print("URL: http://127.0.0.1:5000")
    app.run(host='0.0.0.0', port=5000, debug=True, threaded=True)  # 绑定 IP 地址和端口号

cvFlask06 项目的网页模板

在子程序index()中指定了视频流的网页模板index4.html。

网页index4.html位于templates文件夹，具体内容如下。

<!DOCTYPE html>
<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h2  align="center">OpenCV+Flask 例程：实时视频监控</h2>
    <div style="text-align:center; padding-top:inherit">
      <img src="{{ url_for('video_feed', video_source='camera') }}" width="600"; height="360">
    </div>
  </body>
</html>

网页index5.html位于templates文件夹，具体内容如下。

<!DOCTYPE html>
<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h2  align="center">OpenCV+Flask 例程：播放视频文件</h2>
    <div style="text-align:center; padding-top:inherit">
      <img src="{{ url_for('video_feed', video_source='vedio_01.mp4') }}" width="600"; height="360">
    </div>
  </body>
</html>

cvFlask06 项目的网页模板

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

 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:5000
 * Running on http://192.168.3.249:5000

在局域网内设备（包括移动手机）的浏览器打开http://192.168.3.249:5000就可以播放实时视频监控画面：

在这里插入图片描述

打开http://192.168.3.249:5000/vidfile就可以播放视频文件。
在这里插入图片描述

【本节完】

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

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