How to display an encoded OpenCV image on a Flask web server?

Question

I have a client that extracts frames from a camera then compresses and stores them in a JSON object to be sent to a Flask server. I need to display said frame images on the Flask interface. My current attempt doesn't return an error, but it just prints an np array instead of displaying the actual image.

client.py

class Camera(object):
    def __init__(self, mode, addr, id):
        self.id = id
        self.video = None
        if(mode == "file" and type(addr) == type("hi")):
            self.video = cv2.VideoCapture(addr)
        elif(mode == "live" and type(addr) == type(0)):
            self.video = cv2.VideoCapture(addr)
        else:
            print("ERROR: Camera class given either an incorrect mode or an address of the wrong type.")

    def __del__(self):
        self.video.release()

    def get_cam_id(self):
        return self.id

    def get_frame(self):
        ret, frame = self.video.read()
        if(ret == True):
            return frame
        else:
            return None

    def norm_frame(self, frame):
        frame = cv2.resize(frame, None, fx=0.6, fy=0.6)
        return frame

    def package(self, frame):
                frame = cv2.imencode('.jpg', frame, [cv2.IMWRITE_JPEG_QUALITY, 70])[1].tolist()
                frame = json.dumps(frame)
                return frame

test_config route in applications.py

@application.route('/test_config', methods = ['GET', 'POST'])
def test2():
    var = input('Enter ID: ')
    print(FEEDS[var])
    frame = FEEDS[var].package(FEEDS[var].norm_frame(FEEDS[var].get_frame()))
    print(frame)


""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
Attempt
""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
    #frame = json.loads(frame)
    #frame = np.asarray(frame, np.uint8)
    #frame = cv2.imdecode(frame, cv2.IMREAD_COLOR)
    #return frame
    return "Frame will display here eventually!"

There is a /test_input route that allows the user to enter information about the cameras. Said information is used to create camera objects in client.py . The objects are stored in a dictionary in applications.py with an ID key, which when entered in test_config will determine which frame is displayed. What I'm having trouble with is displaying the image after the key for Camera object has been entered.

Answer 1

I found a solution. Thank you, @furas, for your help.

r = requests.get('http://127.0.0.1:8080/get_frame').content
frame = json.loads(r)
frame = np.asarray(frame, np.uint8)
frame = cv2.imdecode(frame, cv2.IMREAD_COLOR)
r, jpg = cv2.imencode('.jpg', frame)
return Response(b'--frame\r\n' b'Content-Type: image/jpeg\r\n\r\n' + jpg.tobytes() + b'\r\n\r\n', mimetype='multipart/x-mixed-replace; boundary=frame')