How to access webcam in OpenCV on PythonAnywhere through Javascript?

Question

I have developed a WebApplication in Django that has a view method which contains the OpevCV code that when triggered opens the User Webcam to detect its face. This app works fine in my localserver but when I have hosted it on PythonAnywhere it says camera not found as my PA hosting doesnt serve a camera.
So someone suggested me to open the webcam through javascript as it deals with the client machine and then pass its feed to server machine which is my hosting.
But as i am a rookie in Python i am not able to figure how to perform the above task. I found this piece of js code but i dont know how and where to add this in my Django App.

Code for getting the feed with Javascript

var video = document.querySelector("#videoElement");

if (navigator.mediaDevices.getUserMedia) {
    navigator.mediaDevices.getUserMedia({video: true}).then(function(stream) {
      video.srcObject = stream;
  }).catch(function(err0r) {
      console.log("Something went wrong!");
  });
}

My Python code for opening the camera and detecting faces is as follows (it works in localserver)

import cv2

cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')

cam = cv2.VideoCapture(0)


while True:
    ret, frame = cam.read()
    frame = cv2.flip(frame, 1)

    if ret:
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)

        for (x, y, w, h) in faces:
            cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
            cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break
            cv2.destroyAllWindows()

        cv2.imshow('Stream', frame)

Any help is appreciated. Thank you in advance

Answer 1

I used to do something similar, the scheme I used was as follows:

As you are already aware, we need javascript to get user's picture from the webcam. I found an article that shows us how to do that, you can use only the frontend side (the HTML file) if you want to use Django. That's code is for getting pictures and encode it to base64 (string) and send it via websocket.

After that, we want Django to serve websocket. In the past, I did it with Flask, not Django, but you can see how you can create websocket server using django-channel.

For the last step, you need a function with your OpenCV code. You need to decode base64 and convert it to opencv

def modify_picture(img_data):
    # decode image
    img = from_b64(img_data)

    # your OpenCV filter
    gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)

    # encode image to base64
    return to_b64(gray)

And of course, you don't need while True and cv2.imshow, but return the base64 version of your new picture. Hope it helps.

---

Update: I write a sample code in my github. Not in Django, but still in Python. Hope it will give you more insight.

Answer 2

You need to get the live video streaming using javascript, then feed that stream to opencv2 to get it working.

Use: get live videostream in nodejs

You will get a url as "http://localhost:3000" which you can use in the python code as follows:

import cv2

cascade = cv2.CascadeClassifier('./haarcascade_frontalface_default.xml')

cam = cv2.VideoCapture('http://localhost:3000')


while True:
    ret, frame = cam.read()
    frame = cv2.flip(frame, 1)

    if ret:
        gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

        faces = cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=3)

        for (x, y, w, h) in faces:
            cropped = cv2.resize(frame[y:y+h, x:x+w], (198,198))
            cv2.rectangle(frame, (x, y), (x+w, y+h), (255, 0, 0), 2)

        if cv2.waitKey(1) & 0xFF == ord('q'):
            break
            cv2.destroyAllWindows()

        cv2.imshow('Stream', frame)