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

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