I want to do certain tasks and the processes are as follows: 1. Access the camera of the user to get the video-frames from them. 2. Process the video frames from the backend code for facial recognition and some more tasks. 3. Return the processed frame back to the user.

Initially, I had used cv2.VideoCapture(0) and it was simply triggering the camera of the system which was hosting the server, i.e. my personal laptop. So, I used JavaScript to trigger the camera of the user's system. The HTML and JS code is as follows:

<div id="container">
    <video autoplay="true" id="videoElement">
    
    </video>
</div>

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

Now I want to get the video feed from the user and link it to the backend to process the video frames.

My views.py :

class VideoCamera():
    def __init__(self):
        self.video = cv.VideoCapture(0)
        success, frame = self.video.read()
        ...