Access camera from a browser Access camera from a browser javascript javascript

Access camera from a browser


The HTML5 spec does allow accessing the webcamera, but last I checked, it is far from finalized, and has very, very little browser support.

This is a link to get you started:http://www.html5rocks.com/en/tutorials/getusermedia/intro/

You'll probably have to use flash if you want it to work cross-browser.

W3 draft


As of 2017, WebKit announces support for WebRTC on Safari

Now you can access them with video and standard javascript WebRTC

E.g.

var video = document.createElement('video');video.setAttribute('playsinline', '');video.setAttribute('autoplay', '');video.setAttribute('muted', '');video.style.width = '200px';video.style.height = '200px';/* Setting up the constraint */var facingMode = "user"; // Can be 'user' or 'environment' to access back or front camera (NEAT!)var constraints = {  audio: false,  video: {   facingMode: facingMode  }};/* Stream it to video element */navigator.mediaDevices.getUserMedia(constraints).then(function success(stream) {  video.srcObject = stream;});

Have a play with it.


There is a really cool solution from Danny Markov for that. It uses navigator.getUserMedia method and should work in modern browsers. I have tested it successfully with Firefox and Chrome. IE didn't work:

Here is a demo:

https://tutorialzine.github.io/pwa-photobooth/

Link to Danny Markovs description page:

http://tutorialzine.com/2016/09/everything-you-should-know-about-progressive-web-apps/

Link to GitHub:

https://github.com/tutorialzine/pwa-photobooth/