Example of taking photos using HTML5's getUserMedia-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

Example of taking photos using HTML5's getUserMedia

黄舟

Mar 31, 2017 pm 01:40 PM

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

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


    <script src="index.js"></script>
</body>
</html>

Copy after login

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

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

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(&#39;capture&#39;);
btnCapture.addEventListener(&#39;click&#39;, snapshot, false);

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

Copy after login

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;

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn