Maison >interface Web >Tutoriel H5 >Exemple de prise de photos à l'aide de getUserMedia de HTML5

Exemple de prise de photos à l'aide de getUserMedia de HTML5

黄舟original: 2017-03-31 13:40:512184parcourir

1. Appelez la caméra de l'appareil via getUserMedia (soit un ordinateur, soit un téléphone mobile, selon la prise en charge du navigateur pour cette API) et placez la ressource dans la balise vidéo.
2. Placez la ressource video dans la vidéo dans le canevas via l'API drawImage de canvas.
3. Convertissez le contenu du canevas en une image au format webp codée en base64 (si le navigateur ne prend pas en charge ce format, il reviendra au format png) et placez-le en img, afin que vous puissiez voir les photos que vous avez prises.

Fin de bêtises, voici le 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;);
    }
);

Quelques notes :

Différents navigateurs prennent en charge différemment getUserMedia et doivent ajouter des préfixes, tels que webkitGetUserMedia, mozGetUserMedia, msGetUserMedia. Si vous souhaitez bloquer ce problème, vous pouvez procéder comme suit :

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

Chrome. a imposé de nombreuses restrictions sur file:///, sans parler de la géolocalisation inter-domaines qui ne peut pas être utilisée localement, et il en va de même pour getUserMedia.

Ce que fait cette fonction sizeCanvas est de garantir que la taille de la photo que vous prenez est la même que la taille capturée par l'appareil photo. Sinon, la photo prise n'en sera qu'une partie. ce qui a été capturé par la caméra. La situation de l'écran.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de partage de code pour la pagination à l'aide de l'API HTML5Article suivant：Exemple de partage de code pour la pagination à l'aide de l'API HTML5

Articles Liés

Voir plus