Django - OpenCV Integrate pop up camera window into static page

Viewed 1105

OpenCv code to open and save image from webcam:

def webcam(request):
    camera = cv2.VideoCapture(0)
    while True:
        return_value,image = camera.read()
        cv2.imshow('image',image)
        if cv2.waitKey(1) & 0xFF == ord('s'):
            cv2.imwrite('./media/test.jpg',image)
            break
    camera.release()
    cv2.destroyAllWindows()


    return render(request,'page.html')

This is a function from a django project. It is being called when pressing an Html button and it turns on the webcam. It opens it on a popup python window though. Does anyone know if and how could I integrate that window to open into the same or different Html page? Meaning, when I press the button instead of opening outside the webpage, I need to open the can in the Html page itself.

Thanks for any help in advance.

1 Answers

Actually your computer opens a new python window outside because you run it in your views so on backend's side. Imagine you deploy your solution, it will just try to open the camera of the server, not of the user.

What I advise you is building this feature on frontend's side. You could do it easily with javascript :

Just add a <div id="my_camera"> </div> in your template and add this to your script :

  function runCam(){
    Webcam.set({
        width: 320,
        height: 240,
        image_format: 'jpeg',
        jpeg_quality: 90
        });
    Webcam.attach('#my_camera');
  }

Don't forget to add onload="runCam()" in your body

Related