Image / Stream

Display an image and continuously update it in real time.

import ioimport timeimport uuid
import cv2from h2o_wave import app, Q, ui, mainimport numpy as np
frame_count = 256

def create_random_image():    frame = (np.random.rand(100, 100, 3) * 255).astype(np.uint8)    _, img = cv2.imencode('.jpg', frame)    return io.BytesIO(img)

@app('/demo')async def serve(q: Q):    # Mint a unique name for our image stream    stream_name = f'stream/demo/{uuid.uuid4()}.jpeg'
    # Send image    endpoint = await q.site.uplink(stream_name, 'image/jpeg', create_random_image())
    # Display image    q.page['qux'] = ui.form_card(box='1 1 5 5', items=[ui.image('Image Stream', path=endpoint)])    await q.page.save()
    t0 = time.time()    # Update image in a loop    for i in range(frame_count):        # Send image (use stream name as before).        await q.site.uplink(stream_name, 'image/jpeg', create_random_image())
    await q.site.unlink(stream_name)
    print(f'{frame_count / (time.time() - t0)}fps')