Norbetto89 Norbetto89 - 16 days ago 5
Javascript Question

HTML5 - Access Camera

I'd like to access camera with HTML and JavaScript.
I've seen this example, but it doesn't work in Chrome.
I have tried this, too:

<img src="">
<video></video>
<canvas style="display:none;"></canvas>

<script>
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;

function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// "image/webp" works in Chrome.
// Other browsers will fall back to image/png.
document.querySelector('img').src = canvas.toDataURL('image/webp');
}
}

video.addEventListener('click', snapshot, false);

// Not showing vendor prefixes or code that works cross-browser.
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, errorCallback);
</script>


Who can help? Thanks!

Answer

You are missing errorCallback function.

function errorCallback(e) {
    console.log(e);
}

I added this and got an error: enter image description here

To access userMedia you have to have https. I tried running it here (jsfiddle) and works for me.

Comments