基于flask与opencv制作一个视频监控小程序

主要实现引入视频流到web页面。

douyu0814

593人浏览 · 2023-10-25 09:40:20

douyu0814 · 2023-10-25 09:40:20 发布

基于flask与opencv制作一个视频监控小程序：

主要实现引入视频流到web页面

import cv2
import numpy as np
from flask import Flask, render_template, Response

app = Flask(__name__)
video_writer = None

class Camera:
    _instance = None
    def __new__(cls):
        if cls._instance is None:
            cls._instance = super().__new__(cls)
            cls._instance.camera = cv2.VideoCapture(0)
        return cls._instance

    def __del__(self):
        self.camera.release()

    def get_frame(self):
        success, frame = self.camera.read()
        if not success:
            return None
        else:
            ret, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
            return frame

camera = Camera()


def convert_bytes_to_frame(frame_bytes):
    # 将bytes类型的图像数据解码为OpenCV图像格式
    frame_array = np.frombuffer(frame_bytes, dtype=np.uint8)
    frame = cv2.imdecode(frame_array, flags=cv2.IMREAD_COLOR)
    return frame

# 获取视频流
def get_video_stream():
    global camera,video_writer
    while True:
        if camera is None:
            break
        frame = camera.get_frame()
        if frame is None:
            break
        else:
            if video_writer is not None:
                video_writer.write(convert_bytes_to_frame(frame))
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

# 关闭摄像头
def close_camera():
    global camera
    camera = None

@app.route('/open_camera', methods=['POST'])
def open_camera_route():
    global camera
    camera = Camera()
    return Response(get_video_stream(), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/close_camera', methods=['POST'])
def close_camera_route():
    close_camera()
    return 'Camera closed'

@app.route('/')
def index():
    return render_template('index3.html')

@app.route('/video_feed')
def video_feed():
    return Response(get_video_stream(), mimetype='multipart/x-mixed-replace; boundary=frame')

@app.route('/start_recording')
def start_recording():
    global video_writer
    video_writer = cv2.VideoWriter('output.avi', cv2.VideoWriter_fourcc(*'XVID'), 20.0, (640, 480))
    return 'Recording started'

@app.route('/stop_recording')
def stop_recording():
    global video_writer
    video_writer.release()
    video_writer = None
    return 'Recording stopped'

if __name__ == '__main__':
    app.run(debug=True)

前台页面写法

<!DOCTYPE html>
<html>
<head>
    <title>Video Streaming</title>
</head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<body>
    <h1>监控视频流</h1>
    <img src="{{ url_for('video_feed') }}" width="640" height="480">
    <br>
    <button id="open" onclick="openCamera(),location.reload();">打开摄像头</button>
    <button id="close" onclick="closeCamera()">关闭摄像头</button>
    <br>
    <a href="{{ url_for('start_recording') }}">开始录像</a>
    <a href="{{ url_for('stop_recording') }}">结束录像</a>

    <script>
        function openCamera() {
            $.ajax({
                url: '/open_camera',
                type: 'POST',
                success: function(response) {
                    console.log(response);
                }
            });
        }
        function closeCamera() {
            $.ajax({
                url: '/close_camera',
                type: 'POST',
                success: function(response) {
                    console.log(response);
                }
            });
        }
    </script>
</body>
</html>

魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda