How can I send OpenCV output to browser with python django?

Question

I want to send an OpenCV output to a browser(web application) that I'm working on. I know how to make a frame appear using my webcam controlled by OpenCV but I want to integrate that frame inside my website. What can I do in order to integrate in my website? Here's the code for OpenCV and thank you in advance!

import numpy as np
import cv2
import pickle

face_cascade = cv2.CascadeClassifier('Cascades/data/haarcascade_frontalface_alt2.xml')
eye_cascade = cv2.CascadeClassifier('Cascades/data/haarcascade_eye.xml')
recognizer = cv2.face.LBPHFaceRecognizer_create()
recognizer.read("trainer.yml")

labels = {"person_name": 1}
with open("labels.pickle", 'rb') as f:
orig_lables = pickle.load(f)
lables = {v:k for k,v in orig_lables.items()}

cap = cv2.VideoCapture(0)

while True:
    #capture frame-by-frame
    ret, frame = cap.read()
    gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.5, 
minNeighbors=5)
for (x, y, w, h) in faces:
   # print(x, y, w, h)
    roi_gray = gray[y:y+h, x:x+w]
    roi_color = frame[y:y+h, x:x+w]

    id_, confidence = recognizer.predict(roi_gray)
    if confidence >= 45 and confidence <= 85:
        print(id_)
        #print(lables[id_])
        cv2.FONT_HERSHEY_SIMPLEX = 0
        font = cv2.FONT_HERSHEY_SIMPLEX
        color = (255, 255, 255)
        name = lables[id_]
        stroke = 2
        cv2.putText(frame, name, (x,y), font, 1, color, stroke, cv2.LINE_AA)

    img_item = "captured-image.png"
    cv2.imwrite(img_item, roi_gray)

    color = (0, 255, 255) #bgr format
    stroke = 2
    width = x + w
    height = y + h
    cv2.rectangle(frame, (x, y), (width, height), color, stroke)
    eyes = eye_cascade.detectMultiScale(roi_gray)
    for(ex,ey, ew, eh) in eyes:
        cv2.rectangle(roi_color, (ex,ey), (ex+ew, ey+eh), (0, 255, 0), 2)


#display the resulting frame
cv2.imshow('APS recognition', frame)
if cv2.waitKey(20) & 0xFF == ord('q'):
    break

#when everything is done, release the caputure
cap.release()
cap.destroyAllWindows()

score 0 · Answer 1 · answered Mar 29 '19 at 21:56

This solution will require some external plumbing but it can be done in two steps:

Stream your OpenCV output, you can use VLC, FFMPEG or others (see Sending OpenCV output to VLC stream)
Add the stream to your web page (see third answer here Streaming via RTSP or RTP in HTML5)

How can I send OpenCV output to browser with python django?

1 Answers1