Eel: Retrieving jpeg data from @route endpoint

Created on 13 Mar 2020 · 3Comments · Source: ChrisKnott/Eel

Describe the problem
I'm using a generator to write jpeg data i.e. frames to memory and a @route to create an endpoint where the jpeg data can be retrieved. I've read through the entire Bottle documentation and Eel source code and I can't figure out what I'm doing wrong.

Code snippet(s)

import numpy as np
import cv2
import eel
import bottle
from bottle import Bottle, route, Response, static_file
import threading

outputFrame = None
lock = threading.Lock()

def generate():
    # grab global references to the output frame and lock variables
    global outputFrame, lock
    # loop over frames from the output stream
    while True:
        # wait until the lock is acquired
        # check if the output frame is available, otherwise skip
        # the iteration of the loop
        with lock:
            if outputFrame is None:
                continue
            # encode the frame in JPEG format
            (flag, encodedImage) = cv2.imencode(".jpg", outputFrame)
            # ensure the frame was successfully encoded
            if not flag:
                continue
        # yield the output frame in the byte format
        yield(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + 
            bytearray(encodedImage) + b'\r\n')
# initialize Eel
eel.init('assets')

def onclose(page, sockets):
    pass

@route("/video_feed")
def video_feed():
    # return the response generated along with the specific media
    # type (mime type)
    Response.content_type = "multipart/x-mixed-replace; boundary=frame"
    return Response(generate())

eel.start("main.html", size=(800, 480), position=(0, 0), close_callback=onclose)

...

In my main.html file I have an img tag that should receive the updated frame. I followed this guide https://www.pyimagesearch.com/2019/09/02/opencv-stream-video-to-web-browser-html-page/ and adapted the code from Flask to Bottle as best I could.

<html>
   ...
          <img width="640" height="480" src="http://localhost:8000/video_feed">

</html>

Desktop:

OS: Manjaro Linux 19
Browser: Chromium
Version: 80.0.3987.122

Eel starts the Chromium browser and then CPU usage shoots up to 100% on a single thread and the browser hangs. I'm guess that the image byte string is being generated but not consumed properly. I'm using the latest version of Eel==0.12.2.

Any help would be greatly appreciated. I'm banging my head against the wall over this. Other than this one issue, I'm loving working with Eel!

help wanted

Source

alifeinbinary

Most helpful comment

Try refering this: It uses frames coming from webcam, maybe you can tweak it to supply frames from some other source (if that is what you intend to do). webcam-feed-eel.
It makes use of the fact that you can call js functions from python (which eel let's you to do)

RahulBadenkalSarci on 13 Mar 2020

👍2

All 3 comments

I don't think your code inside genrator is getting executed. You need to loop over the generator object you receive from calling generator(), to actually execute the code inside of it.

Aside from that I didn't really understand what you are trying to achieve. Is it - you are supplying differernt .jpeg frames to html (from python) so as to achieve a video?
Also I don't see where you are actually recieving new frames either.

RahulBadenkalSarci on 13 Mar 2020

👍1

RahulBadenkalSarci on 13 Mar 2020

👍2

@RahulBadenkalSarci That's exactly what I needed! Thank you so much for chiming in and helping me :)

alifeinbinary on 14 Mar 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings