flask+layui显示监控视频

1、flask简介

flask是python中的一个轻量级web框架。

2、layui简介

Layui是一套开源免费的 Web UI 组件库，采用自身轻量级模块化规范，遵循原生态的 HTML/CSS/JavaScript 开发模式，非常适合网页界面的快速构建。Layui 区别于一众主流的前端框架，它更多是面向于后端开发者，即无需涉足各类构建工具，只需面向浏览器本身，便可将页面所需呈现的元素与交互信手拈来。

想了解更多请阅读Layui官方文档。

3、flask和layui实现实时显示监控视频

要在Flask结合Layui框架中显示监控视频，可以使用Flask提供视频流的功能，并在前端使用Layui的相关组件来展示视频。

3.1、在flask中，使用opencv实现视频帧的生成

py 复制代码

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

app = Flask(__name__)

# 视频流源，比如摄像头或视频文件
def video_stream():
    # 打开视频流
    cap = cv2.VideoCapture(0)  # 0 代表系统默认摄像头
    while True:
        # 读取帧
        ret, frame = cap.read()
        # 如果正确读取帧，ret为True
        if not ret:
            print("read frame err.")
            continue
        else:
            # 编码帧并转换为字节流
            _, buffer = cv2.imencode('.jpg', frame)
            frame = buffer.tobytes()
            yield (b'--frame\r\n'
                   b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/',methods=['GET', 'POST'])
def videoshow():
    if request.method == 'GET':
        return render_template('video.html')

@app.route('/video_feed')
def video_feed():
    # 返回multipart/x-mixed-replace响应，这是流式HTTP相应的一种类型
    return Response(video_stream(), mimetype='multipart/x-mixed-replace; boundary=frame')
 
if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

3.2、layui前端(templates/video.html)
在Layui前端页面中，使用<img>标签来显示视频流中的帧，如下所示：

html 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Monitoring Video</title>
    <!-- layui的官方cdn链接中的css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12">
            <img id="video-feed" src="" style="width: 100%; height: 100%;"/>
        </div>
    </div>
</div>

<!-- layui的官方cdn链接的js -->
<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
<script>
    function initVideoStream() {
        var img = document.getElementById('video-feed');
        img.onload = function() {
            setTimeout(initVideoStream, 33); // 每33毫秒刷新一次
        };
        img.src = '/video_feed'; // 视频流的URL
    }
 
    layui.use(function(){
        initVideoStream(); // 初始化视频流
    });
</script>

</body>
</html>