flask+python 实时视频流输出到前台

简介: 该文章介绍了如何使用Flask和Python实现实时视频流输出到网页前端,包括后端通过OpenCV捕获摄像头视频流、处理并编码为JPEG格式,然后以HTTP响应的形式发送给前端显示的完整示例代码和运行效果。

flask+python 实时视频流输出到前台

二、问题描述:

1。调用摄像头获取视频流

2。将视频流处理并传递给浏览器

3。不是录制后处理,而是边录制边处理,边传递

4。 flash后台进行处理,而不是在前端处理

三、程序

1、后端处理程序

server.py

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

class VideoCamera(object):
    def __init__(self):
        # 通过opencv获取实时视频流
        self.video = cv2.VideoCapture(0)

    def __del__(self):
        self.video.release()

    def get_frame(self):
        success, image = self.video.read()
        # 在这里处理视频帧
        cv2.putText(image, "hello", (10, 30), cv2.FONT_HERSHEY_SIMPLEX, 0.8, (0, 255, 0))
        #
        # 因为opencv读取的图片并非jpeg格式,因此要用motion JPEG模式需要先将图片转码成jpg格式图片
        ret, jpeg = cv2.imencode('.jpg', image)
        return jpeg.tobytes()

app = Flask(__name__)

@app.route('/')  # 主页
def index():
    # jinja2模板,具体格式保存在index.html文件中
    return render_template('index.html')

def gen(camera):
    while True:
        start_t=time.time()
        frame = camera.get_frame()
        #print('{0}'.format(time.time()-start_t))
        # 使用generator函数输出视频流, 每次请求输出的content类型是image/jpeg
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')

@app.route('/video_feed')  # 这个地址返回视频流响应
def video_feed():
    return Response(gen(VideoCamera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True, port=5000)

2、前端html

templates/index.html

<html>
  <head>
    <title>Video Streaming Demonstration</title>
  </head>
  <body>
    <h1>Video Streaming Demonstration</h1>
    <img src="{
  
  { url_for('video_feed') }}">
  </body>
</html>

注:在py文件同目录下,新建一个templates,然后新建一个index.html的文件,将上面内容复制进去即可

四、运行结果展示在这里插入图片描述

相关文章
|
2月前
|
监控 前端开发 API
实战指南:使用Python Flask与WebSocket实现高效的前后端分离实时系统
【7月更文挑战第18天】构建实时Web应用,如聊天室,可借助Python的Flask和WebSocket。安装Flask及Flask-SocketIO库,创建Flask应用,处理WebSocket事件。前端模板通过Socket.IO库连接服务器,发送和接收消息。运行应用,实现实时通信。此示例展现了Flask结合WebSocket实现前后端实时交互的能力。
271 3
|
3月前
|
开发框架 数据库 开发者
Web开发新境界:用Python玩转Django和Flask!
【6月更文挑战第12天】Python的Web开发框架Django和Flask各有千秋。Django是全能型框架,适合快速开发大型应用,提供ORM、模板引擎、URL路由和后台管理等全面功能。Flask则轻量级且灵活,适用于小型到中型应用,以其简单易用、高度可扩展和灵活路由著称。两者结合使用,能应对各种Web开发需求。
59 5
|
3月前
|
关系型数据库 MySQL 数据库
如何使用Python的Flask框架来构建一个简单的Web应用
如何使用Python的Flask框架来构建一个简单的Web应用
71 0
|
4月前
|
应用服务中间件 nginx Docker
使用 Python Flask 创建简易文件上传服务
在平时工作中,文件上传是一项常见的需求,例如将应用异常时通过脚本生成的dump文件收集起来进行分析,但实现起来却可能相当复杂。幸运的是,Flask框架提供了一种简单而高效的方式来处理文件上传,代码不到100行。在本文中,我们将探讨如何使用Flask实现文件上传功能,编写Dockerfile将应用程序通过docker部署。
|
1天前
|
Python
使用Python和Flask构建简单的Web应用
使用Python和Flask构建简单的Web应用
13 6
|
1月前
|
机器学习/深度学习 数据采集 数据可视化
【优秀python系统毕设】基于Python flask的气象数据可视化系统设计与实现,有LSTM算法预测气温
本文介绍了一个基于Python Flask框架开发的气象数据可视化系统,该系统集成了数据获取、处理、存储、LSTM算法气温预测以及多种数据可视化功能,旨在提高气象数据的利用价值并推动气象领域的发展。
|
1月前
|
数据可视化 算法 前端开发
基于python flask+pyecharts实现的中药数据可视化大屏,实现基于Apriori算法的药品功效关系的关联规则
本文介绍了一个基于Python Flask和Pyecharts实现的中药数据可视化大屏,该系统应用Apriori算法挖掘中药药材与功效之间的关联规则,为中医药学研究提供了数据支持和可视化分析工具。
|
1月前
|
数据可视化 搜索推荐 数据挖掘
基于Python flask 的数据可视化平台,可定制,可连接数据库
本文介绍了一个基于Python Flask框架开发的可定制数据可视化平台,该平台支持多种数据库连接,并提供丰富的图表类型和个性化设置,以实现交互式数据分析和展示。
基于Python flask 的数据可视化平台,可定制,可连接数据库
|
21天前
|
Python Windows 内存技术
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
【Azure 应用服务】Azure App Service (Windows) 使用Flask框架部署Python应用,如何在代码中访问静态文件呢?如何设置文件路径?是相对路径还是绝对路径呢?
|
1月前
|
数据可视化 前端开发 JavaScript
基于python flask +pyecharts实现的气象数据可视化分析大屏
本文介绍了一个基于Python Flask和Pyecharts技术实现的气象数据可视化分析大屏,该系统通过图表展示气象数据,提供实时监测和数据分析功能,帮助用户和决策者进行有效应对措施的制定。