How to stream video on web browser/HTML page by aiohttp?

Viewed 1604

My project uses socket.io to send/receive data.

I added aiohttp to help display the results on the browser.

import asyncio
from aiohttp import web
sio = socketio.AsyncServer(async_mode='`aiohttp`')
app = web.Application()
sio.attach(app)

I followed https://us-pycon-2019-tutorial.readthedocs.io/aiohttp_file_uploading.html to upload an image but I cannot upload a video.

def gen1():
    # while True:
    # if len(pm.list_image_display) > 1 :
    image = cv2.imread("/home/duong/Pictures/Chess_Board.svg")
    image = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
    # img = PIL.Image.new("RGB", (64, 64), color=(255,255,0))
    image_pil = PIL.Image.fromarray(image)
    fp = io.BytesIO()
    image_pil.save(fp, format="JPEG")
    content = fp.getvalue()
    return content

async def send1():
    print("11")
    return web.Response(body=gen1(), content_type='image/jpeg')

How to display video via aiohttp on browsers?

1 Answers

To stream a video in aiohttp you may open a StreamResponse in response to the fetching of a img HTML node:

@routes.get('/video')
async def video_feed(request):
    response = web.StreamResponse()
    response.content_type = 'multipart/x-mixed-replace; boundary=frame'
    await response.prepare(request)

    for frame in frames('/dev/video0'):
        await response.write(frame)
    return response

and send your frames in the form of bytes:

def frames(path):
    camera = cv2.VideoCapture(path)
    if not camera.isOpened():
        raise RuntimeError('Cannot open camera')

    while True:
        _, img = camera.read()
        img = cv2.resize(img, (480, 320))
        frame = cv2.imencode('.jpg', img)[1].tobytes()
        yield b'--frame\r\nContent-Type: image/jpeg\r\n\r\n'+frame+b'\r\n'

This may be however network demanding as the bitrate required to send each frame individually is high. For real-time streaming with further compression you may want to use WebRTC implementations like aiortc.

Related