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>
相关推荐
Antonio91537 分钟前
【音视频】WebRTC P2P、SFU 和 MCU 架构
音视频·webrtc·p2p
山河君2 小时前
webrtc之高通滤波——HighPassFilter源码及原理分析
算法·音视频·webrtc·信号处理
OC溥哥99916 小时前
Flask论坛与个人中心页面开发教程完整详细版
后端·python·flask·html
Rhys..16 小时前
python + Flask模块学习 2 接收用户请求并返回json数据
python·学习·flask
音视频牛哥16 小时前
打造一款高稳定、低延迟、跨平台RTSP播放器的技术实践
音视频·rtsp播放器·rtsp player·rtsp播放器录像·rtsp h.265·rtsp hevc·rtsp播放器h.265
水印云17 小时前
2025精选5款AI视频转文字工具,高效转录秒变文字!
人工智能·音视频
菊风 Juphoon17 小时前
13问详解VoLTE视频客服:菊风带你从基础到应用,厘清所有疑惑
音视频
我是海飞1 天前
外置flash提示音打包脚本
运维·服务器·音视频·嵌入式
wan5555cn1 天前
AI生成内容的版权问题解析与实操指南
人工智能·笔记·深度学习·算法·音视频
linux开发之路1 天前
C++ 音视频开发常见面试题及答案汇总
c++·ffmpeg·音视频·流媒体·音视频编解码