我正在尝试使用 flask 创建一个仪表板，我可以在同一个html页面上看到视频流和其他数据（字符串）。为了方便起见，目前我从文件夹jpg中的一组"static/imgs/"图像流式传输，遥测是每个jpg文件的名称。问题是遥测数据没有显示在index.html上：即我只看到视频流和预期遥测文本的空白。
这些文件包括：app.py，index.html，tel.html
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>