Use the camera from your webpage, take a snapshot and use for facial recognition. Whatt?

20 March 2019

.

Using the #HTML5 getUserMedia method from the MediaDevices API you can take a picture using the user’s camera and use that on your webpage. Let’s see some code!

By leveraging the navigator.mediaDevices.getUserMedia method you can prompt the user for access to their camera, listen for a click event to grab a photo and take a snapshot of the user!

First, we set our html:

<video id="video" class="video" autoplay playsinline></video>
<div id="button" class="button">Take Photo</div>
<canvas id="canvas" width="640" height="480"></canvas>

In the above we’re making a video element, a button to show that user can click that to take a picture. Finally, we have a canvas element which allows us to draw graphics and animations. In this case, we use this to render the snapshot we’re going to take.

Then we set up our javascript:

let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

// make sure the browser supports accessing the user's media - in our case camera
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    const params = { video: true };
    navigator.mediaDevices.getUserMedia(params).then(function(stream) {
        // set the video element to the stream object
        video.srcObject = stream;
        video.play();
    });
}

In the above we make sure the browser the user is on supports the getUserMedia method and we pass in the params to let the getUserMedia method know we want video. We then get the user’s media aka access the camera and set the video element’s property srcObject to the stream coming from the camera and then we “play” the video meaning we show the output from our camera 👀.

let button = document.getElementById('button');

button.addEventListener('click', function(e) {
    context.drawImage(video, 0, 0, 640, 480);
});

In the above we grab the button element that we created in our HTML and using the context from our canvas element and use that to draw the image from the video element that now has an srcObject from what we set above. This is what allows the drawImage to draw the snapshot we just took.

You could then convert that snapshot to a PNG data URI and even pass that along to the server for some facial recognition if you wish! Intrigued? Read on for more!

Want to see it in action?! Click Me

<!-- Dev Diaries: Here is all the the code so you can copy and paste it and get started right away! -->
<video id="video" class="video" autoplay playsinline></video>
<div id="button" class="button">Take Photo</div>
<canvas id="canvas" width="640" height="480"></canvas>

<script>
let video = document.getElementById('video');
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
    const params = { video: true };
    navigator.mediaDevices.getUserMedia(params).then(function(stream) {
        // set the video element to the stream object
        video.srcObject = stream;
        video.play();
    });
}

let button = document.getElementById('button');
button.addEventListener('click', function(e) {
    context.drawImage(video, 0, 0, 640, 480);
});
</script>

Instagram Post