Passing video feed from Javascript to OpenCV in Python

Question

I am trying to create a web application that takes detects faces in a live video feed. I have written the webcam feed code with Javascript as I would like to later host the application.

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!");
  });
}

And my Python code for opening the camera and detecting faces is as follows

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)

My question is instead of opening the webcam in Python can I somehow pass the feed from Javascript to Python. I guess I will have to change this line to include the code from Javascript

cam = cv2.VideoCapture(0)

Any help is appreciated. Thank you in advance

score 1 · Answer 1 · edited May 09 '21 at 07:33

1

You can check out this tutorial in the OpenCV documentation. The syntax is not really that different.

If you do want to use Python you will need to send an AJAX request for the video feed. Stream it someplace and use it as a source for your <video>.

edited May 09 '21 at 07:33

Paul C

25
8

answered Nov 23 '18 at 08:16

Raghav Kukreti

552
5
18

I want to use python for the face detection stuff as I plan on adding more functionality to the application that will be easier to code in python. Can the second option be done live and if yes, is there any tutorial you can direct me to? – Sashaank Nov 23 '18 at 08:21
Okay so I am going to assume you want a *processed* video feed. Why not just use Django or Flask for this? You can use ```VideoWriter``` to write the processed file and then simply use ``` – Raghav Kukreti Nov 23 '18 at 11:54
Hi firstly sorry for the late reply. I checked the link that you had sent. But I guess the person is not working with live video. What should I do to work on the feed from a webcam? Is is possible to do that on live video? – Sashaank Nov 26 '18 at 04:28
Have a look at this https://github.com/rena2damas/remote-opencv-streaming-live-video – Raghav Kukreti Nov 27 '18 at 05:10
Hey! Thanks for the link. I guess doing that will solve the problem. The only other question I have is, can the same be done with django? Cause I have already started implementing this with django and it will be a bummer to start again in flask. – Sashaank Nov 29 '18 at 04:25
There's not a big difference between the two implementations. Have a look at Django docs or just this link http://sudeepanadeeshan.me/2017/08/hello-world – Raghav Kukreti Nov 30 '18 at 05:02
@Sashaank did you manage to get this in django? please help me out here!!!! the django implementation link in the above comment is deleted – pythonPleasue Sep 17 '20 at 09:12
@pythonPleasue. I could not get this to work the way I wanted. I don't have the code with me now, but what I did was to open the camera on the client side with `js` and save each frame to the system. I then passed each frame to python for the face recognition part. This was pretty inefficient but I could not find a better solution. Hope this helps.. – Sashaank Sep 18 '20 at 14:17
@Sashaank Sorry about the rate reply, Did you try using websockets/channels? – pythonPleasue Sep 20 '20 at 14:56
@pythonPleadue not sure if this will help. But check out this [link](https://webrtchacks.com/webrtc-cv-tensorflow/) – Sashaank Sep 20 '20 at 18:32

Passing video feed from Javascript to OpenCV in Python

1 Answers1