Python 基于Flask的视频和数据流可视化_Python_Flask_Streaming

Python 基于Flask的视频和数据流可视化

python flask streaming

Python 基于Flask的视频和数据流可视化,python,flask,streaming,Python,Flask,Streaming,我正在尝试创建一个带有flask的仪表板，在这里我可以在同一html页面上看到视频流和其他数据（字符串）。为了使事情更简单，目前我从文件夹“static/imgs/”中的一组jpg图像流式传输，遥测是每个jpg文件的名称。问题是遥测数据没有显示在index.html：即我只看到视频流和预期遥测文本的空白处。这些文件是：app.py，index.html，tel.html app.py index.html 视频流 {%include“tel.html”%} 电话：http://www.t

我正在尝试创建一个带有flask的仪表板，在这里我可以在同一html页面上看到视频流和其他数据（字符串）。为了使事情更简单，目前我从文件夹

“static/imgs/”

中的一组

jpg

图像流式传输，遥测是每个

jpg

文件的名称。问题是遥测数据没有显示在

index.html

：即我只看到视频流和预期遥测文本的空白处。这些文件是：

app.py

，

index.html

，

tel.html

app.py index.html


视频流


{%include“tel.html”%}

电话：http://www.tel.html


帧名称：{{fname}

您的意思是，在“Frame Name:”之后，您希望看到

fname

的值吗？是的，这是正确的！例如，我希望index.html显示：[Image]和[Frame Name:img_126.jpg]下面，但我看到的是：[Image]和[Frame Name:]

from flask import Flask, render_template, Response
import os
from time import time, sleep

app = Flask(__name__)

#load images from folder
class Camera(object):
    def __init__(self):
        self.dir_imgs = "static/imgs/"

        self.frames_name = [f for f in sorted(os.listdir (self.dir_imgs))]
        self.current_idx = 0

    def get_frame(self):
        idx = self.current_idx 
        self.current_idx = idx + 1
        if self.current_idx >= len(self.frames_name):
            self.current_idx = 0
        sleep(0.02)
        #return an image
        return open(self.dir_imgs+self.frames_name[idx], 'rb').read()


@app.route('/')
def index():
    return render_template('index.html' )

def gen(camera):
    while True:
        frame = camera.get_frame()
        idx = camera.current_idx
        yield (b'--frame\r\n'
               b'Content-Type: static/imgs/jpeg\r\n\r\n' + frame + b'\r\n')


class Telemetry():
    def __init__(self):
        self.frame_name = None

telemetry = Telemetry()

@app.route('/video_feed')
def video_feed():
    camera = Camera()
    feed_gen = gen(camera)
    telemetry.frame_name = camera.frames_name[camera.current_idx]

    return Response(feed_gen,
                    mimetype='multipart/x-mixed-replace; boundary=frame')


@app.route('/tel')
    def tel():
        frame_name = telemetry.frame_name
        return render_template("tel.html", fname=frame_name)


if __name__ == "__main__":
    app.run(debug=True) #start the webserver

<html>
  <head>
    </head>
  <body>
    <h1>Video Streaming</h1>
    <img src="{{ url_for('video_feed') }}">
<br>
{% include "tel.html" %}
  </body>
</html>

<html>
  <head>
  </head>
  <body>
      <h1> Frame Name: {{ fname }}</h1>
  </body>
</html>
  </body>

</html>