javascript - visualize streamed jpg frames and (sync'ed) text on html using Flask -

i stream data rpi (server) laptop (client): data includes jpg images , short text (made of numbers). each image saved on client, , telemetry.dat file records text each image. want visualize in browser, images , text streamed. use flask , followed this tutorial. tutorial shows how visualize in browser, streamed images only, have not found on how visualize images , (sync) text data together. below have tried. generator (gen_frames()) yields alternatively images , text, , data_feed() (in app.py) returns response "that is" image or text. in index.html, how can make sure right element updated, i.e when response image, <img src="{{ url_for('video_feed') }}" id="vid"> updated, , if it's text: xhr.open('get', '{{ url_for('video_feed') }}');

1. create generator alternatively yields img , associated text

def gen_frames():     cnt = 1     while true:         #get streamed image , streamed telemetry (text)         img_stream = data_stream['img']         telemetry = data_stream['telemetry']          if cnt%2 == 0:             yield (b'--frame\r\n'                b'content-type: image/jpeg\r\n\r\n' + img_stream.getvalue() + b'\r\n')         else:             yield telemetry+ '\n'         cnt += 1 

2. in app.py, return response

gen = gen_frames() @app.route('/data_feed')  def data_feed():     #get length of data yield generator     length_data = len(next(gen))     try:         if length_data > 1000:             #data yield image             return response(gen_img, mimetype='multipart/x-mixed-replace; boundary=frame')         else:             #data yield text (telemetry)             return response(gen_img, mimetype='text/plain')     except:         print('no response returned') 

3. show streamed data in index.html: js part this response

<!-- show images -->  <img src="{{ url_for('video_feed') }}" id="vid">  <!-- show text --> <p>telemetry: <span id="telemetry"></span></p> <script>     var telemetry = document.getelementbyid('telemetry');     var xhr = new xmlhttprequest();     xhr.open('get', '{{ url_for('video_feed') }}');     xhr.send();     var position = 0;     function handlenewdata() {         var msg = xhr.responsetext.split('\n');         msg.slice(position, -1).foreach(function(value) {               telemetry.textcontent = value;  // update latest value in place         });         position = msg.length - 1;     }      var timer;     timer = setinterval(function() { handlenewdata(); }, 100); </script> 

ps: want method works, if know of different approach, plz share!