Plotly dash - Dynamically displaying a ndarray image

I've found a solution, with Flask.Response and the src parameter of html.Img, and openCV for the image encoding :

import dash
import dash_core_components as dcc
import dash_html_components as html
import cv2

from flask import Flask, Response
import numpy as np
import time


def get_image(seed=0):
    # strip slide
    size = 400
    res = np.mod((np.arange(size)[..., None] + np.arange(size)[None, ...]) + seed, [255])

    ret, jpeg = cv2.imencode('.jpg', res)

    return jpeg.tobytes()


def gen():
    i = 0
    while True:
        time.sleep(0.03333)
        frame = get_image(i)
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n\r\n')
        i += 1


server = Flask(__name__)
app = dash.Dash(__name__, server=server)


@server.route('/video_feed')
def video_feed():
    return Response(gen(),
                    mimetype='multipart/x-mixed-replace; boundary=frame')


app.layout = html.Div([
    html.H1("Webcam Test"),
    html.Img(src="/video_feed")
])

if __name__ == '__main__':
    app.run_server(debug=True)

Result :

On the browser, the strips are slowly moving, I guess a gif would've made a better demonstration.

Careful to not send too much images per second, or you'll overflow the application and the browser and they'll eventually crash. So use time.pause or other equivalent limiter in the generator loop.

Tough, I'm still intrested on how other people would do that. One drawback with this solution is that I think that the users would have to share the same display, defined at the path /video_feed.