Capture Image from Webcam through js/JavaScript

Question

I am looking to capture the image from the webcam. I have tested quite a few libraries including

https://github.com/jhuckaby/webcamjs

https://github.com/amw/jpeg_camera

But all existing libraries are very old and no longer maintained by authors. I have also tried "navigator.mediaDevices.getUserMedia" to capture the image but it does not work with safari.

I am wondering if you can suggest something that works cross-browsers and can manage a responsive view as well.

Thanks.

Answer 1

The navigator.mediaDevices.getUserMedia method should work with the latest version of safari 11. You'll want to use the MediaDevices.getUserMedia() method which has full support by almost every latest browser (except IE).

Note that if your writing an HTML file and opening it in the browser, it may not work because your browser may require a secure context (HTTPS instead of HTTP) to use that method.

See https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia

Also, Sam Dutton created a great example, and you can find the github code for it as well.