当前位置： 首页 > news >正文

Flask如何在后端实时处理视频帧在前端展示

news 2025/10/21 17:50:49

        怎么样在前端->选择视频文件->点击上传视频后->后端实时分析上传的视频->在前端展示后端分析结果（视频，文本）

↓

咱们先看整看整体代码，有个大概的印象。

Flask后端代码

'''
cljc车流检测Demo
'''
from pytz import timezone
from datetime import datetime# 用于上传保存视频
@app.route('/upload', methods=['POST'])
def upload_video():VIDEOS_FOLDER = 'static\Videos'video = request.files['video']video.save(os.path.join(VIDEOS_FOLDER, '视频1.mp4'))return jsonify({'message': 'Video uploaded and saved successfully'}), 200# 用于把后端处理的视频帧数据传输到前端展示
@app.route('/video_feed')
def video_feed():return Response(generate_frames(),mimetype='multipart/x-mixed-replace; boundary=frame')# 处理函数
def generate_frames():frame_Num = 1                                   max_cars = 0video_path = './static/Videos/视频1.mp4' # 必须固定一个位置，用于存放上传的视频文件cap = cv2.VideoCapture(video_path)fps = cap.get(cv2.CAP_PROP_FPS)              carsCascade = cv2.CascadeClassifier("car_rear.xml")  while cap.isOpened():success, frame = cap.read()if not success:break   cv2.putText(frame,"second:"+str(round(frame_Num/fps,2))+"s",(0,100),cv2.FONT_HERSHEY_SIMPLEX,1,(255,0,255),1)cars = carsCascade.detectMultiScale(frame[700:1280,0:720], 1.2,minSize=(10,10))   for (x, y, w, h) in cars:  # 遍历所有汽车的区域cv2.rectangle(frame[700:1280,0:720], (x, y), (x + w, y + h), (0, 0, 255), 2)  # ！！！！将每一帧转换为JPEG格式并以字节流方式返回，！！！！！ret, buffer = cv2.imencode('.jpg', frame)frame = buffer.tobytes()frame_Num+=1yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')@app.route('/')     ###主页面路由
def index():return render_template('index.html')

HTML前端代码 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head><link rel="stylesheet" type="text/css" href="/static/css/cljc.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"><title>车流监测</title>
<style type="text/css">
body {
margin:0;
padding:0;
font-size:12px;
}</style>
</head>
<body>
<div class="header"><div><style>* { box-sizing: border-box; } body {margin: 0;}
.c14101{padding:10px;
text-align:center;
font-weight:600;
color:#ffffff;
font-family:"Microsoft Yahei", sans-serif;
background-image:url(/static/img/bg3.jpg);
background-repeat:repeat;
background-position:left top;
background-attachment:scroll;
background-size:auto;}</style>
<div id="ib1w" class="c14101">车流监测</div></div>
</div>
<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">
<div><style>* {box-sizing: border-box; 
} body {margin: 0;}
.c14101{padding:10px;
text-align:center;
font-weight:600;
color:#ffffff;
font-family:"Microsoft Yahei", sans-serif;
background-image:url(/static/img/bg1.jpg);
background-repeat:repeat;
background-position:left top;background-attachment:scroll;
background-size:auto;}
.htmlpage-row{display:table;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
width:100%;}
.htmlpage-cell{
width:8%;
display:table-cell;height:75px;}
.c4195{height:400px;width:950px;
text-align:center;
position:relative;}
@media (max-width: 768px){
.htmlpage-cell{width:100%;display:block;}}.footer {display: flex;justify-content: center;align-items: center;height: 50; /* 设置合适的高度 */
}#upload-form {display: flex;flex-direction: column;/* align-items: center; */
}</style><div class="htmlpage-row"><!-- <div class="htmlpage-cell"></div> --><!-- <div class="htmlpage-cell"><video allowfullscreen="allowfullscreen" class="c4195" src="/static/img/video2.webm" controls="controls"></video></div> --><img src="{{ url_for('video_feed') }}" width="600px" height=590px"><!-- <div class="htmlpage-cell"></div> -->
</div></div>
</div><div class="col2"> <div class="BoxConTop">当前帧数</div><input type="text" id="frameNumber" name="frameNumber" readonly style="margin-top: -100px;"><div class="BoxConTop">当前车辆数</div><input type="text" id="vehicleNumber" name="vehicleNumber" readonly style="margin-top: -100px;"><div class="BoxConTop">车流量峰值</div><input type="text" id="peakTraffic" name="peakTraffic" readonly style="margin-top: -100px;">
</div><div class="col3"><p>北京时间</p><input type="text" id="timeShow" name="timeWarning" readonly><p>安全预警栏</p><input type="text" id="safetyWarning" name="safetyWarning" readonly>
</div></div>
</div>
</div>
</div>
<div class="footer"><form id="upload-form"><input type="file" id="video" name="video" accept="video/*"><button type="submit">上传视频</button></form>
</div>
<script src="https://cdn.socket.io/4.0.1/socket.io.min.js"></script>
<script>var socket = io();socket.on('update_data', function(data) {document.getElementById('frameNumber').value = data.frame_Num;document.getElementById('vehicleNumber').value = data.car_number;document.getElementById('peakTraffic').value = data.max_cars;document.getElementById('timeShow').value = data.timeShow;document.getElementById('safetyWarning').value = data.safetyWarning;});
</script>
</body>
<script>document.getElementById('upload-form').addEventListener('submit', async (e) => {e.preventDefault();const formData = new FormData(e.target);const response = await fetch('/upload', { method: 'POST', body: formData });const data = await response.json();console.log(data.message);});document.getElementById('play-btn').addEventListener('click', () => {const videoFrame = document.getElementById('video-frame');const source = new EventSource('/play');source.onmessage = (event) => {videoFrame.src = event.data;};});
</script>
</html>

代码可以创建一个.py文件，在编译软件（vscode,pycharm）中打开，这样看起来比较清晰。 

video_path = './static/Videos/视频1.mp4'

必须固定一个位置，这个位置是upload路由从前端传输过来视频数据，保存的地址，上面是处理函数generate_frames()里面读取的步骤。

下面是保存的步骤,在upload_video()路由：

 video.save(os.path.join(VIDEOS_FOLDER, '视频1.mp4')) #固定保存视频的地方，

二、前后端代码结合讲解

实现上传视频并保存在指定路径的功能！ 

@app.route('/upload', methods=['POST'])
def upload_video():VIDEOS_FOLDER = 'static\Videos'video = request.files['video']video.save(os.path.join(VIDEOS_FOLDER, '视频1.mp4')) #固定保存视频的地方，return jsonify({'message': 'Video uploaded and saved successfully'}), 200
<div class="footer"><form id="upload-form"><input type="file" id="video" name="video" accept="video/*"><button type="submit">上传视频</button></form>
</div>

↓ 

传输在后端处理好的视频帧数据到前端展示

@app.route('/video_feed')
def video_feed():return Response(generate_frames(),mimetype='multipart/x-mixed-replace; boundary=frame')
# 处理函数
def generate_frames():frame_Num = 1                                   max_cars = 0video_path = './static/Videos/视频1.mp4' # 必须固定一个位置，用于存放上传的视频文件cap = cv2.VideoCapture(video_path)fps = cap.get(cv2.CAP_PROP_FPS)              carsCascade = cv2.CascadeClassifier("car_rear.xml")  while cap.isOpened():success, frame = cap.read()if not success:break   cv2.putText(frame,"second:"+str(round(frame_Num/fps,2))+"s",(0,100),cv2.FONT_HERSHEY_SIMPLEX,1,(255,0,255),1)cars = carsCascade.detectMultiScale(frame[700:1280,0:720], 1.2,minSize=(10,10))   for (x, y, w, h) in cars:  # 遍历所有汽车的区域cv2.rectangle(frame[700:1280,0:720], (x, y), (x + w, y + h), (0, 0, 255), 2)  # ！！！！将每一帧转换为JPEG格式并以字节流方式返回，！！！！！ret, buffer = cv2.imencode('.jpg', frame)frame = buffer.tobytes()frame_Num+=1yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

这是最关键的，其余都是处理函数。最后这一步将每一帧数据转换为了JPEG的格式并以字节流的方式返回。

        # ！！！！将每一帧转换为JPEG格式并以字节流方式返回，！！！！！# 1.转换为JPEG格式ret, buffer = cv2.imencode('.jpg', frame)# 2.转换为字节流frame = buffer.tobytes()# 3.通过路由函数发送给前端yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

yield (b'--frame\r\n'b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

 通过上面这个方法yield（），把转换好的图像以字节流的方式传送给前端，那么前端如何接收到呢？这很简单，  

<div class="htmlpage-row"><img src="{{ url_for('video_feed') }}" width="600px" height=590px"></div>
  • 前端HTML：“接收来自后端路由video_feed（）函数传过来的参数。”
  • 后端FLASK：“yield（）通过video_feed（）函数发送数据给前端。”

相关文章：

Flask如何在后端实时处理视频帧在前端展示

怎么样在前端->选择视频文件->点击上传视频后->后端实时分析上传的视频->在前端展示后端分析结果&#xff08;视频&#xff0c;文本&#xff09; ↓ 咱们先看整看整体代码&#xff0c;有个大概的印象。 Flask后端代码 cljc车流检测Demofrom pytz import timezon…...

编程日记 2024/4/18 6:18:55

04-15 周一 GitHub仓库CI服务器actions-runner和workflow yaml配置文档解析

04-15 周一 GitHub仓库CI服务器配置过程文档 时间版本修改人描述2024年4月15日10:35:52V0.1宋全恒新建文档2024年4月17日10:33:20v1.0宋全恒完成github actions CI的配置和工作流配置文件解读文档的撰写 简介 一些基础概念 前提知识 仓库介绍 地址镜像介绍https://github.…...

编程日记 2024/4/18 6:17:54

论文笔记：SmartPlay : A Benchmark for LLMs as Intelligent Agents

iclr 2024 reviewer评分 5688 引入了 SmartPlay&#xff0c;一种从 6 种不同游戏中提取的基准 衡量LLM作为智能体的能力 1 智能代理所需的能力 论文借鉴游戏设计的概念&#xff0c;确定了智能LLM代理的九项关键能力&#xff0c;并为每项能力确定了多个等级&#xff1a; 长文…...

编程日记 2024/4/18 6:16:53

搜维尔科技：【工业仿真】煤矿安全知识基础学习VR系统

产品概述 煤矿安全知识基础学习VR系统 系统内容&#xff1a; 煤矿安全知识基础学习VR系统内容包括&#xff1a;下井流程&#xff08;正确乘坐罐笼、班前会、井下行走注意事项、工作服穿戴、入井检身及人员清点、下井前准备工作、提升运输安全&#xff09;&#xff1b;运煤流程…...

编程日记 2024/4/18 6:15:52

线程和进程的区别(面试)

线程和进程的区别 进程和线程的区别线程的优点 进程和线程的区别 1. 进程是系统进行资源分配和调度的一个独立单位,线程是程序执行的最小单位. 2. 进程有自己的内存地址空间,线程只独享指令流执行的必要资源,如寄存器和栈. 3. 由于同一进程的各线程共享内存和文件资源,可以不通…...

编程日记 2024/4/18 6:14:48

抓取电商产品数据的方法|电商平台商品详情数据|批量上架|商品搬家|电商封装API数据采集接口更高效安全的数据采集

大量级电商数据采集时使用电商API接口有以下优势&#xff1a; 1. 数据准确性&#xff1a;通过电商API接口获取数据&#xff0c;可以保证数据的准确性和实时性&#xff0c;避免了手动采集可能出现的错误和延迟。 2. 自动化采集&#xff1a;API接口可以实现自动化的数据获取和更…...

编程日记 2024/4/18 6:13:46

关联规则Apriori算法

1.前置知识 经典应用场景&#xff1a;购物车商品的关联规则。 符号表示&#xff1a; I代表项集,项是可能出现的值&#xff0c;例如购物车中能有尿布、啤酒、奶粉等&#xff0c;I{尿布、啤酒、奶粉}&#xff0c;尿布是项 K代表I中包含的项的数目&#xff0c;上面的k3 事…...

编程日记 2024/4/18 6:12:45

书生·浦语大模型全链路开源体系-第4课

书生浦语大模型全链路开源体系-第4课 书生浦语大模型全链路开源体系-第4课相关资源XTuner 微调 LLMXTuner 微调小助手认知环境安装前期准备启动微调模型格式转换模型合并微调结果验证 将认知助手上传至OpenXLab将认知助手应用部署到OpenXLab使用XTuner微调多模态LLM前期准备启动…...

编程日记 2024/4/18 6:10:42

HTML优化SEO

在网站开发中&#xff0c;除了关注设计和用户体验&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;也是提升网站流量和可见度的关键。合理的HTML结构和元素运用能够帮助搜索引擎更好地理解页面内容&#xff0c;从而提高搜索排名。以下是一些基于HTML的SEO优化技巧&#xf…...

编程日记 2024/4/18 6:09:41

RabbitMQ-交换机

文章目录 交换机fanoutDirecttopicHeadersRPC 交换机 **交换机 **是消息队列中的一个组件&#xff0c;其作用类似于网络路由器。它负责将我们发送的消息转发到相应的目标&#xff0c;就像快递站将快递发送到对应的站点&#xff0c;或者网络路由器将网络请求转发到相应的服务器…...

编程日记 2024/4/18 6:08:38

mapreduce中的MapTask工作机制（Hadoop）

MapTask工作机制 MapReduce中的Map任务是整个计算过程的第一阶段&#xff0c;其主要工作是将输入数据分片并进行处理&#xff0c;生成中间键值对&#xff0c;为后续的Shuffle和Sort阶段做准备。 1. 输入数据的划分&#xff1a; 输入数据通常存储在分布式文件系统&#xff08;…...

编程日记 2024/4/18 6:07:37

景区文旅剧本杀小程序亲子公园寻宝闯关系统开发搭建

要开发景区文旅剧本杀小程序亲子公园寻宝闯关系统&#xff0c;您需要考虑以下步骤&#xff1a; 1. 设计游戏场景和规则&#xff1a;根据亲子公园的主题和特点&#xff0c;设计适合亲子游玩的游戏场景和规则。您需要考虑游戏的安全性、趣味性和互动性&#xff0c;确保孩子们能够…...

编程日记 2024/4/18 6:06:36

性能优化---webpack优化

1、如何提高webpack打包速度 a、优化Loader--影响Loader打包速度的首要元素是Babel&#xff0c;Babel 会将代码转为字符串生成 AST&#xff0c;然后对 AST 继续进行转变最后再生成新的代码&#xff0c;项目越大&#xff0c;转换代码越多&#xff0c;效率就越低。先优化 Loader …...

编程日记 2024/4/18 6:05:35

YOLOv9改进策略 | 损失函数篇 | EIoU、SIoU、WIoU、DIoU、FocusIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了YOLOv9的重大改进&#xff0c;特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体&#xff0c;如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU&#xff0c;还融合了“Focus”思想&#xff0c;创造了一系列新的损失函数。这些组合形式的…...

编程日记 2024/4/18 6:04:34

贪心算法-跳跃游戏

给你一个非负整数数组 nums &#xff0c;你最初位于数组的 第一个下标 。数组中的每个元素代表你在该位置可以跳跃的最大长度。 判断你是否能够到达最后一个下标&#xff0c;如果可以&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输…...

编程日记 2024/4/18 6:02:32

sql知识总结二

一.报错注入 1.什么是报错注入&#xff1f; 这是一种页面响应形式&#xff0c;响应过程如下&#xff1a; 用户在前台页面输入检索内容----->后台将前台输入的检索内容无加区别的拼接成sql语句&#xff0c;送给数据库执行------>数据库将执行的结果返回给后台&#xff…...

编程日记 2024/4/18 6:01:30

VSCode和CMake实现C/C++开发

VSCode和CMake实现Ubuntu下C/C++开发总结 目录 0.简介1.Linux系统介绍2.开发环境搭建2.1 编译器，调试器安装2.2 CMake安装3.GCC编译器3.1 编译过程3.2 g++重要编译参数4.g++编译实战4.0 编译前4.1 直接编译4.2 生成库文件并编译4.3 编译后4.3.1 编译完成后的目录结构4.3.2 运行…...

编程日记 2024/4/18 6:00:29

【机器学习300问】74、如何理解深度学习中L2正则化技术？

深度学习过程中&#xff0c;若模型出现了过拟合问题体现为高方差。有两种解决方法&#xff1a; 增加训练样本的数量采用正则化技术 增加训练样本的数量是一种非常可靠的方法&#xff0c;但有时候你没办法获得足够多的训练数据或者获取数据的成本很高&#xff0c;这时候正则化技…...

编程日记 2024/4/18 5:59:28

C语言程序设计每日一练（4）

完全平方数 首先&#xff0c;我们需要明确什么是完全平方数。完全平方数是指一个整数&#xff0c;它可以表示为另一个整数的平方。例如&#xff0c;1、4、9、16等都是完全平方数&#xff0c;因为它们分别是1、2、3、4的平方。 现在&#xff0c;让我们回到这个问题。我们知道这…...

编程日记 2024/4/18 5:58:27

m4p转换mp3格式怎么转？3个Mac端应用~

M4P文件格式的诞生伴随着苹果公司引入FairPlay版权管理系统&#xff0c;该系统旨在保护音频的内容。M4P因此而生&#xff0c;成为受到FairPlay系统保护的音频格式&#xff0c;常见于苹果设备的iTunes等平台。 MP3文件格式的多个优点 MP3格式的优点显而易见。首先&#xff0c;其…...

编程日记 2024/4/18 5:57:25

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/10/19 17:11:10

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/10/19 2:35:33

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

编程新知 2025/9/22 20:53:03

C# 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2025/9/29 10:49:30

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/9/28 3:34:59

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/10/13 18:27:11

CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝

目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为&#xff1a;一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...

编程新知 2025/10/5 5:38:24

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2025/7/7 14:36:50

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

编程新知 2025/10/20 23:11:09