您现在的位置是：首页 >学无止境 >【OpenCV DNN】Flask 视频监控目标检测教程 05网站首页学无止境
【OpenCV DNN】Flask 视频监控目标检测教程 05
欢迎关注『OpenCV DNN @ Youcans』系列，持续更新中
【OpenCV DNN】Flask 视频监控目标检测教程 05
本系列从零开始，详细讲解使用 Flask 框架构建 OpenCV DNN 模型的 Web 应用程序。
本节介绍用 Flask 构建流媒体服务器，向服务器发送请求可以播放本地视频文件。
3.5 浏览器播放视频服务器上的视频文件
本例程使用Flask框架构建一个视频流服务器，通过OpenCV读取本地视频文件，向服务器发送请求可以播放视频流。
本项目的框架与cvFlask04相同，主要区别在于从网页获取视频文件路径名称和使用OpenCV读取视频文件。
cvFlask05 项目文件树
新建一个Flask项目。cvFlask05项目的文件树如下。
---文件名
|---templates
| |---index2.html
|--- cvFlask05.py
|--- vedio_01.mp4
cvFlask05 项目程序文件
任务逻辑由Python程序文件cvFlask05.py实现，完整代码如下。
# cvFlask05.py
# OpenCV+Flask 图像处理例程 05
# 通过浏览器播放视频服务器上的视频文件
# Copyright 2023 Youcans, XUPT
# Crated：2023-4-30
# coding:utf-8
from flask import Flask, Response, render_template, request
import cv2
app = Flask(__name__)
# 定义视频流类
class VideoStream:
def __init__(self, source): # 传入视频源
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() # 释放视频流
# 视频流的网页 HTML 模板
@app.route('/')
def index():
return render_template('index2.html')
# 生成视频流的帧
def gen_frames(video_source):
video_stream = VideoStream(video_source) # 从视频文件获取视频流
while True:
frame = video_stream.get_frame() # 获取视频帧
if frame is None:
# video_stream.__del__() # 释放视频流
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),
content_type='multipart/x-mixed-replace; boundary=frame')
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 地址和端口号
程序cvFlask05.py与cvFlask04.py的区别在于：
（1）定义的视频流类VideoStream接受视频源参数source，使用OpenCV创建视频读取对象，逐帧读取视频帧。
（2）子程序video_feed()从网页模板index2.html获取视频文件的路径和文件名’vedio_01.mp4’，作为视频源。
cvFlask05 项目网页模版
在子程序index()中指定了视频流的网页模板index2.html。网页index2.html位于templates文件夹，具体内容如下。
<!DOCTYPE html>
<html>
<head>
<title>Video Streaming Demonstration</title>
</head>
<body>
<h2 align="center">OpenCV+Flask 例程：视频传输</h2>
<img src="{{ url_for('video_feed', video_source='vedio_01.mp4') }}" alt="Video stream">
</body>
</html>
类似地，img标签定义了图片使用的url，由url_for()函数向前端返回。网页模板index2.html与index1.html的区别仅在于，利用视图函数的名字和查询字符串动态获取url。'video_feed’是视图函数的名字，而视频文件的路径和文件名’vedio_01.mp4’以关键字实参的形式放在url_for()里作为参数。
/video_feed路径由video_feed()方法提供服务，返回一个multipart应答。生成器函数gen_frames()不断地从VideoStream逐帧获取图片，通过生成器返回给客户端。客户端浏览器收到流媒体时，在img标签定义的图片中逐帧显示，从而实现视频播放。
cvFlask05 项目运行
进入cvFlask05项目的根目录，运行程序cvFlask05.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，就可以播放视频服务器上的视频文件 vedio_01.mp4。
3.6 浏览器播放视频文件+控制按钮
进一步地，我们添加两个控制按钮“Start”和“Stop”，用来控制开始和停止播放视频流。
在 Flask 应用中添加控制按钮需要修改前端和后端代码。前端需要添加按钮以及发送请求的 JavaScript 代码，后端则需要添加处理这些请求的路由。
我们在前端添加 “start” 和 “stop” 按钮，这两个按钮在被点击时会发送请求到 “/start” 和 “/stop” 路由。
我们修改 VideoCamera 类以及gen函数，使其能够根据请求开始或停止生成视频帧。VideoCamera 类中添加了新的方法set_path，用来改变视频源。我们添加了新的路由"/set_path"，它接受 POST 请求和一个表单参数 ‘video_path’，然后使用这个参数来设置视频源。添加了新的路由"/start"和"/stop"，控制视频流的开关状态。
cvFlask05c 项目文件树
新建一个Flask项目。cvFlask05c项目的文件树如下。
---文件名
|---templates
| |---index2c.html
|--- cvFlask05c.py
|--- vedio_01.mp4
cvFlask05c 项目程序文件
任务逻辑由Python程序文件cvFlask05c.py实现，完整代码如下。
# cvFlask05c.py
# OpenCV+Flask 图像处理例程 05b
# 通过浏览器播放视频服务器上的视频文件+控制按钮
# Copyright 2023 Youcans, XUPT
# Crated：2023-4-30
# coding:utf-8
from flask import Flask, Response, render_template, request
import cv2
app = Flask(__name__)
# 定义视频流类
class VideoStream:
def __init__(self, video_path=None): # 传入视频源
if video_path is None:
self.video_cap = cv2.VideoCapture(0) # 创建视频设备读取对象
else:
self.video_cap = cv2.VideoCapture(video_path) # 创建视频文件读取对象
self.is_streaming = False
def __del__(self):
self.video_cap.release() # 释放视频流
def get_frame(self):
success, frame = self.video_cap.read() # 读取视频帧
if success and self.is_streaming:
ret, buffer = cv2.imencode('.jpg', frame) # 编码为 jpg 格式
frame_byte = buffer.tobytes() # 转换为 bytes 类型
return frame_byte
else:
return None
def set_path(self, video_path):
self.video_cap.release()
self.video_cap = cv2.VideoCapture(video_path)
video_stream = VideoStream() # 实例化视频流对象
# 生成视频流的帧
def gen_frames():
while True:
frame = video_stream.get_frame() # 获取视频帧
if frame is not None:
yield (b'--frame
' b'Content-Type: image/jpeg
'
+ frame + b'
') # 生成视频流的帧
# 视频流的网页 HTML 模板
@app.route('/')
def index():
return render_template('index2c.html')
# 视频流的传输路由：从网页获取视频源，返回视频流
@app.route('/video_feed')
def video_feed():
return Response(gen_frames(),
content_type='multipart/x-mixed-replace; boundary=frame')
@app.route('/start', methods=['POST'])
def start():
video_stream.is_streaming = True
return ('', 204)
@app.route('/stop', methods=['POST'])
def stop():
video_stream.is_streaming = False
return ('', 204)
@app.route('/set_path', methods=['POST'])
def set_path():
video_path = request.form.get('video_path')
video_stream.set_path(video_path)
return ('', 204)
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 地址和端口号
cvFlask05c 项目网页模版
在子程序index()中指定了视频流的网页模板index2c.html。我们在前端添加 “start” 和 “stop” 按钮，并指定了按钮的格式。网页index2c.html位于templates文件夹，具体内容如下。
<!DOCTYPE html>
<html>
<head>
<title>Video Streaming Demonstration</title>
<style>
#video {
display: block;
margin: 0 auto;
width: 600px;
height: 300px;
}
#button-container {
display: flex;
justify-content: center;
gap: 100px;
margin-top: 10px; /* 新增：设置按钮与视频画面的间距 */
}
button {
width: 60px;
height: 30px;
}
</style>
</head>
<body>
<h2 align="center">OpenCV+Flask 例程：播放视频文件</h2>
<div style="text-align:center; padding-top:inherit">
<img id="video" src="{{ url_for('video_feed') }}" style="display: none">
</div>
<div id="button-container">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var video_path = "vedio_01.mp4"; // 替换为你的视频文件路径
$("#start").click(function(){
$.post("/set_path", {"video_path": video_path}, function() {
$.post("/start", function() {
$("#video").show();
});
});
});
$("#stop").click(function(){
$.post("/stop", function() {
$("#video").hide();
});
});
});
</script>
</body>
</html>
进入cvFlask05c项目根目录，运行程序cvFlask05c.py，启动流媒体服务器。
在局域网内设备（包括移动手机）的浏览器打开http://192.168.3.249:5000，页面中有“Start”和“Stop”两个动作按钮。点击“Start”按钮，开始播放视频服务器上的视频文件vedio_01.mp4，点击“Stop”按钮结束播放。
【本节完】
下节我们将讨论：OpenCV+Flask实时监控和视频播放。
版权声明：
youcans@xupt 原创作品，转载必须标注原文链接：
【OpenCV DNN】Flask 视频监控目标检测教程 05
(https://blog.csdn.net/youcans/article/details/130989608)
Copyright 2023 youcans, XUPT
Crated：2023-06-01
欢迎关注『OpenCV DNN @ Youcans』系列
【OpenCV DNN】Flask 视频监控目标检测教程 01
【OpenCV DNN】Flask 视频监控目标检测教程 02
【OpenCV DNN】Flask 视频监控目标检测教程 03
【OpenCV DNN】Flask 视频监控目标检测教程 04
站长推荐
- stm32使用HAL库配置串口中断收发数据（保姆级教程）
stm32使用HAL库配置串口中断收发数据（保姆级教程） - SpringSecurity实现前后端分离认证授权
SpringSecurity实现前后端分离认证授权 - U8W/U8W-Mini使用与常见问题解决
U8W/U8W-Mini使用与常见问题解决 - 【社区图书馆】伴我前行的一本书《The C Programming Language》
【社区图书馆】伴我前行的一本书《The C Programming Language》 - 【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述
【云原生进阶之容器】第六章容器网络6.6.1--Cilium网络方案概述