Home > Article > Web Front-end > Example of taking photos using HTML5's getUserMedia

Example of taking photos using HTML5's getUserMedia

黄舟Original: 2017-03-31 13:40:512155browse

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>

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

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!

Statement：

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

Previous article：Sample code sharing for paging using html5 APINext article：Sample code sharing for paging using html5 API

See more

Example of taking photos using HTML5's getUserMedia

Related articles