How to take the frames captured by opencv and display them directly in my html page?

Viewed 20

In an application with python and flask, I am using opencv to capture frames from a video, save them in a specific directory and then display them on an HTML page.

  • Code to save a frame (simple.py)
path = "static/images/"
def get_frame(self):

    while True:
    #Capture frame-by-frame
        success, img = self.video.read()
        if success:
            cv2.imwrite(path+".jpg", img, [cv2.IMWRITE_JPEG_QUALITY, 100])
  • Code to get all images saved in the folder (app.py)
@app.route('/teste', methods =["GET", "POST"])
def teste():
    basepath = f"static/images"
    dir = os.walk(basepath)
    file_list = []

    for path, subdirs, files in dir:
        for file in files:
            temp = joinPath(path + '/', file)
            file_list.append(temp)
    
    if request.method == "POST":
        
        for f in joinPath(basepath).glob('*.jpg'):
            try:
                f.unlink()
            except OSError as e:
                print("Error: %s : %s" % (f, e.strerror))


    return render_template('teste.html', hists=file_list)

  • Displaying all saved images on teste.html
        <div class="board"> <br>
            {% for hist in hists %}
                <img  src="{{hist}}" alt="{{hist}}">
            {% endfor %}
        </div>

I deployed this application to heroku, however, I noticed that the folder static/images was not storing the images which makes sense since I am capturing these frames while the application is running.

For this reason, I' m looking for a way to avoid this part of saving the images inside a folder and just display them in the html page. My question is if there is a way to directly grab the frames captured by opencv and display them directly in my html page?

0 Answers
Related