Example of taking photos using HTML5’s getUserMedia

1. Call the device's camera through getUserMedia (either computer or mobile phone, depending on the browser's support for this API), and put the resource into the video tag.
2. Put the video resource in the video into the canvas through the drawImage API of canvas. This canvas will not be displayed.
3. Convert the canvas content into a base64-encoded webp format image (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 more nonsense, here’s the code:

HTML

    
    


    
    
    
    snapshot


    

JS

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);

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

A few Notes:

Different browsers have different support for getUserMedia, and you need to add prefixes, such as webkitGetUserMedia, mozGetUserMedia, msGetUserMedia. If you want to block this problem, you can do this:

// cross platforms
var myGetUserMedia = navigator.getUserMedia || 
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia || 
                 navigator.msGetUserMedia;

Chrome supports file:// / has made a lot of restrictions, not to mention cross-domain, geolocation cannot be used locally, and the same is true for getUserMedia.

What this sizeCanvasfunction does is to ensure that the size of the photo you take is the same as the size captured by the camera. Otherwise, the photo taken will only be a part of the photo captured by the camera. The situation of the screen.

The above is the detailed content of Example of taking photos using HTML5’s getUserMedia. For more information, please follow other related articles on the PHP Chinese website!