我对使用Flask并不陌生,我一直试图将变量传递给网页。我知道如何在render_template方法中传递变量
但是现在我正在尝试一个实时流应用程序。它使用不同的方法,例如.responses和yields
用于流式网络摄像头的烧瓶代码在下面给出
@app.route('/')
def index():
return render_template('index.html')
def get_frame():
video=cv2.VideoCapture(0) #this makes a web cam object
while True:
ret, frame = video.read()
imgencode=cv2.imencode('.jpg',im)[1]
stringData=imgencode.tostring()
yield (b'--frame\r\n'
b'Content-Type: text/plain\r\n\r\n'+stringData+b'\r\n')
del(video)
@app.route('/calc')
def calc():
return Response(get_frame(),mimetype='multipart/x-mixed-replace; boundary=frame')
if __name__ == '__main__':
app.run(host='localhost', debug=True, threaded=True)
模板是
<html>
<head>
<title>Video Streaming Demonstration</title>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{ url_for('calc') }}">
</body>
</html>
现在我需要在模板上添加一个标签,例如<label>{{ value }}</label>>
我已经从烧瓶计算出了变量值,我可以在控制台上打印它但是现在我需要将该值传递给流视频的同一模板上的标签。请帮助
@app.route("/change_label")
def change_label():
return "New Label"
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("Id of the label").innerHTML =
this.responseText;
}
};
xhttp.open("POST", "http://localhost/change_label", true);
xhttp.send();