web-dev-qa-db-fra.com

Comment capturer une image via la webcam de l'utilisateur à l'aide de getUserMedia?

Je veux créer un programme sur le Web qui capture une image via la webcam de l'utilisateur. 

J'utilise l'API Web getUserMedia. Voici mon code, mais ça ne marche pas. Comment puis-je le changer pour capturer l'image de la webcam? 

<div id="container">
    <video autoplay="true" id="videoElement">

    </video>
</div>
<script>

</script>

Il y a le JS:

var video = document.querySelector("#videoElement");

navigator.getUserMedia, elem = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;

console.log(navigator.getUserMedia);

if (navigator.getUserMedia) {
    navigator.getUserMedia({video: true}, handleVideo, videoError);
}

function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
}

function videoError(e) {
    // do something
}
javascripthtml5getusermedia
9
PumpkinSeed

Vous pouvez utiliser cet exemple de travail

 <!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload="init();">
    <h1>Take a snapshot of the current video stream</h1>
   Click on the Start WebCam button.
     <p>
    <button onclick="startWebcam();">Start WebCam</button>
    <button onclick="stopWebcam();">Stop WebCam</button> 
       <button onclick="snapshot();">Take Snapshot</button> 
    </p>
    <video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video>
  <p>

        Screenshots : <p>
      <canvas  id="myCanvas" width="400" height="350"></canvas>  
  </body>
  <script>
      //--------------------
      // GET USER MEDIA CODE
      //--------------------
          navigator.getUserMedia = ( navigator.getUserMedia ||
                             navigator.webkitGetUserMedia ||
                             navigator.mozGetUserMedia ||
                             navigator.msGetUserMedia);

      var video;
      var webcamStream;

      function startWebcam() {
        if (navigator.getUserMedia) {
           navigator.getUserMedia (

              // constraints
              {
                 video: true,
                 audio: false
              },

              // successCallback
              function(localMediaStream) {
                  video = document.querySelector('video');
                 video.src = window.URL.createObjectURL(localMediaStream);
                 webcamStream = localMediaStream;
              },

              // errorCallback
              function(err) {
                 console.log("The following error occured: " + err);
              }
           );
        } else {
           console.log("getUserMedia not supported");
        }  
      }

      function stopWebcam() {
          webcamStream.stop();
      }
      //---------------------
      // TAKE A SNAPSHOT CODE
      //---------------------
      var canvas, ctx;

      function init() {
        // Get the canvas and obtain a context for
        // drawing in it
        canvas = document.getElementById("myCanvas");
        ctx = canvas.getContext('2d');
      }

      function snapshot() {
         // Draws current image from the video element into the canvas
        ctx.drawImage(video, 0,0, canvas.width, canvas.height);
      }

  </script>
</html>
18
scaisEdge

L'API getUserMedia a été mise à jour et expose désormais takePhoto et grabFrame. La méthode grabFramemet est moins intéressante, car elle fait ce que nous avons toujours fait et ne renvoie que la prochaine image vidéo du flux, mais takePhoto interrompt le flux pour qu'il utilise la "résolution maximale de caméra photographique disponible" de l'appareil photo pour capturer un blob d'image compressée. Plus de détails ici: google devs 

var stream, imageCapture; 

function getMediaStream()
{ 
    window.navigator.mediaDevices.getUserMedia({video: true})
    .then(function(mediaStream)
    { 
        stream = mediaStream; 
        let mediaStreamTrack = mediaStream.getVideoTracks()[0];
        imageCapture = new ImageCapture(mediaStreamTrack);
        console.log(imageCapture);
    })
    .catch(error);
}

function error(error)
{ 
    console.error('error:', error); 
}

function takePhoto(img)
{ 
    const img = img || document.querySelector('img');

    imageCapture.takePhoto()
    .then(blob => {
        let url = window.URL.createObjectURL(blob);
        img.src = url;
        window.URL.revokeObjectURL(url); 
    })
    .catch(error);
}; 

/* just call */ 
getMediaStream(); 

/* and when you want to capture an image */ 
takePhoto();
8
tech-e

getUserMedia n'est pas supporté par IE11, consultez ce lien: https://caniuse.com/#search=getuserMedia

Donc, si vous souhaitez toujours utiliser la propriété principale de getUserMedia, vous devez utiliser polyfill. Jetez un coup d’œil sur ce lien polyfill: https://github.com/addyosmani/getUserMedia.js

0
Santosh