How can i Pass Variable from flask) o HTML without render template?

Question

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'--framern'
        b'Content-Type: text/plainrnrn'+stringData+b'rn')

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

Asked By: Shahansha C

||

Source

Answer 1

FLASK APP.py

#This route accepts request against the url http://domain_name/change_label
#You could add the argument, method=["POST"],<br>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 succesfull, 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

How can i Pass Variable from flask) o HTML without render template?

Question:

Answers: