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实现视频帧的生成
pyfrom 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>