Exemple de prise de photos à l'aide de getUserMedia de HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-03-31 13:40:51

original

2145 Les gens l'ont consulté

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>

Copier après la connexion

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

Copier après la connexion

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;

Copier après la connexion

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!