Taking photos through getusermedia of HTML5


Refer to this article on html5rocks for a simple example of implementation.

The ideas are as follows:
1. Open the refrigerator door
2. Put the elephant in the refrigerator
3. Close the refrigerator door

Well, don’t be kidding. In fact, the idea is:
1. Call the camera of the device through getusermedia (computer, mobile phone, depending on the browser’s support for this API), and put the resource into the video tag.
2. Put the video resources in the video into canvas through the DrawImage API of canvas, which is not displayed.
3. Convert the content of canvas into the image of Base64 encoded webp format (if the browser does not support this format, it will fall back to PNG format) and put it into img, so you can see the photos you took.

No nonsense, code:


<!doctype html>
    <title>html5 capture test</title>
    <link rel="stylesheet" href="style.css">
    <video autoplay></video>
    <canvas style="display: none;"></canvas>
    <button id="capture">snapshot</button>



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

var snapshot = function () {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        document.querySelector('img').src = canvas.toDataURL('image/webp');

var sizeCanvas = function () {
    setTimeout(function () {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        img.width = video.videoWidth;
        img.height = video.videoHeight;
    }, 100);

var btnCapture = document.getElementById('capture');
btnCapture.addEventListener('click', snapshot, false);

    {video: true},
    function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    function () {
        alert('your browser does not support getUserMedia');

Several precautions:

  • Different browsers support getusermedia with different prefixes, such as webkitgetusermedia, mozgetusermedia and msgetusermedia. If you want to block this problem, you can do this:
// cross platforms
var myGetUserMedia = navigator.getUserMedia || 
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia || 
  • Chrome has a lot of restrictions on file: / /, not to mention cross domain. Geolocation can’t be used locally. So can getusermedia.
  • The sizecanvas function is to ensure that the size of the photos you take is the same as that of the camera. Otherwise, there will be only a part of the pictures recorded by the camera.