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) ...