I'm trying to setup a flask video streaming server based on the code from this tutorial:
from camera_utils import Camera
@app.route('/')
def index():
"""Video streaming home page."""
return render_template('index.html', endpoint='video_feed', source=1)
def gen_feed(camera):
"""Video streaming generator function."""
while True:
frame = camera.get_frame()['frame']
yield (b'--frame\r\n'
b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
@app.route('/video_feed/<path:source>')
def video_feed(source):
"""Video streaming route. Put this in the src attribute of an img tag."""
return Response(gen_feed(Camera(source)),
mimetype='multipart/x-mixed-replace; boundary=frame')
The index.html template includes a line :
<img src="{{ url_for(endpoint, source=source) }}">
Now, my function camera.get_frame() returns a dict with the frame as a jpg string and some additional information (e.g. camera.get_frame()['fps']). What would be the best way to display this information on the webpage so that it's updated each time a frame is retrieved?
EDIT : Return JSON response from Flask view is nice but a more specific answer would be appreciated as a Flask beginner. How to put the dictionary in the generator, handle mimetype='multipart/x-mixed-replace' with jsonify and display the json object in my webpage?
