Issue
I'm new to using Flask and I've just been trying to pass a variable to web pages. I know how pass variable in render_template method
but now I am trying a realtime streaming app. It uses different methods like .responses and yields
the flask code for streaming webcam is given below
@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)
and template is
<html>
<head>
<title>Video Streaming Demonstration</title>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{ url_for('calc') }}">
</body>
</html>
Now I need add a label on my template like <label>{{ value }}</label>>
I have calculated the variable value from flask and I can print it on the console but now I need to pass that value to a label on the same template that is streaming the video. please help
Solution
FLASK APP.py
# This route accepts request against the url http://domain_name/change_label
# You could add the argument, method=["POST"],
# so the route only accepts post request against that url.
@app.route("/change_label")
def change_label():
#Return the text you want the label to be
return "New Label"
JAVASCRIPT_FILE
function change_label(){
// Create xhttp object
var xhttp = new XMLHttpRequest();
// Listen for the response of your xhttp object
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// If the request is 200 aka successful, set the text of
// the label to the response text of the xhttp request
document.getElementById("Id of the label").innerHTML =
this.responseText;
}
};
// Open a post request with the xhttp object.
xhttp.open("POST", "http://domain/change_label", true);
// Send the post request
xhttp.send();
}
HTML FILE
<html>
<head>
<title>Video Streaming Demonstration</title>
<script src="link_to_javascript"></script>
</head>
<body>
<h1>Video Streaming Demonstration</h1>
<img src="{{ url_for('calc') }}">
</body>
</html>
Sorry if its hard to understand, i am very bad at explaining things, my brain is just not wired normally
Answered By - DontBe3Greedy
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.