CODEWITHSUNDEEP
pythonhtmlopencvvideoqueue
tester
tester

Reputation: 425

Displaying a video queue buffer in HTML

I want to be able to view a queue of opencv frames (from my webcam) in a HTML file.

I have a writer function, which writes the webcams frames to a python queue:

def writer():
    cap = cv2.VideoCapture(0)
    while(True):
        # Capture frame-by-frame
        ret, frame = cap.read()
        # If a frame is read, add new frame to queue
        if ret == True:
            q.put(frame)
        else:
            break

The main part of my code is as follows:

q = queue.Queue()
threading.Thread(target=writer).start()

I now have a queue called q, which I would like to view in a HTML file. What is the best method to do this?

Upvotes: 0

Views: 525

Answers (1)

DanyAlejandro
DanyAlejandro

Reputation: 1468

I will assume you know Python and Web Development (HTML, CSS, JavaScript), since you need to create something on both ends.

In your HTML, use JavaScript to continuously do requests for the frames and show them; One easy way to do this is using the ajax $.get() functionality from jQuery to grab the new image and show it, and use the JavaScript setInterval() method to call the function that loads new images every x milliseconds Check This post on reloading an image for simple implementations, many without AJAX, for example:

setInterval(function () {
var d = new Date();
    $("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
}, 2000);

The reason I sugest you to do this using AJAX is that you probably want to create a web server in Python, so that your JavaScript can request new frames by consuming a simple REST API that serves the image frames. In Python it's easy to create your web server from scratch, or use libraries like Flask if you need to grow this into something more complex afterwards. From your description, all you need is to create a web server with one service: downloading an image.

A really hacky and slow way of doing this without a web server is to just use imwrite() to write your frames to disk, and use waitKey(milliseconds) in your loop to wait before rewriting the same image file. That way you could use the JavaScript code from above to reload this image.

Upvotes: 1

Related Questions