JS Webcam: Captura de imágenes o vídeo con la cámara web

JS Webcam es una clase javascript que puede comprobar si el navegador puede acceder a la cámara web, y si es así, capturar una imagen o una secuencia de vídeo.

 Descargar: JS Webcam

 ¡Entre los archivos de descarga viene un ejemplo de como hacer uso de la clase!

Métodos de la clase:

element : Regresa el actual vídeo HTMLElement
fallback : Mecanismo de reserva para seleccionar archivos. Utilice esta opción cuando desee tomar fotografías desde un dispositivo móvil o cargar imágenes desde el disco.
isStarted : Comprueba si se inicia la cámara web
isSupported : Comprueba si la API es soportada por el navegador
start : Activa la webcam, le preguntará al usuario para compartir su cámara web
stop : Detiene el objeto Webcam
takePicture : Tome una imagen fija de la cámara web, devuelve un Blob
uriToBlob : Toma en datos Uri y lo transforma en un Blob
useFallback : Establece si un fallback debe estar en su lugar para seleccionar los archivos. Establezca esta propiedad a true cuando desee tomar fotografías desde un dispositivo móvil o subir fotos desde el disco.
  
Ejemplo de uso: 

document.addEventListener('DOMContentLoaded', function () {

 document.getElementById('image').style.display = 'none';
 document.getElementById('thumb').style.display = 'none';
 document.getElementById('video').style.display = 'none';

 var webcam = new Webcam('#video');

 document.getElementById('stop').addEventListener('click', function(e){
  e.preventDefault();
  webcam.stop();
  document.getElementById('image').style.display = 'none';
  document.getElementById('thumb').style.display = 'none';
 }, false);

 document.getElementById('start').addEventListener('click', function(e){
  e.preventDefault();

  if (webcam.isSupported()) {
      webcam.start({video: true, audio: false}, function(stream) {
        // success function, video is streaming...
        document.getElementById('video').style.display = 'block';
      }, function(e) {
        alert('Oops, something went wrong');
      });
  }
  else {
   if (window.navigator.userAgent.match(/Mobi/)){ // mobile browser...
    webcam.useFallback(true);
   }
      else{
       alert('API is not supported by your browser');
      }
  }
 }, false);

 document.getElementById('picture').addEventListener('click', function(e){
  e.preventDefault();
  if (webcam.isStarted()){
   // now take an picture using the webcam
      webcam.takePicture(function(pic){
       // and assign it to an image
       document.querySelector('#image').src = pic;
       document.querySelector('#image').style.display = 'inline';
      });

      // now take an picture using the webcam and make a square centered thumb
      webcam.takePicture(function(pic){
       document.getElementById('video').style.display = 'none';
       // and assign it to an image
       document.querySelector('#thumb').src = pic;
       document.querySelector('#thumb').style.display = 'inline';
      },function(ctx, canvas){
          var min = Math.min(canvas.width,canvas.height);
          var max = Math.max(canvas.width,canvas.height);
          canvas.width = min;
          canvas.height = min;
          ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min);
        });
     }
 }, false);

 document.getElementById('fallback').addEventListener('click', function(e){

  // now take an picture using the webcam and make a square centered thumb
     webcam.fallback(function(pic){
      document.getElementById('video').style.display = 'none';
      // and assign it to an image
      document.querySelector('#thumb').src = pic;
      document.querySelector('#thumb').style.display = 'inline';
     },function(ctx, canvas){
         var min = Math.min(canvas.width,canvas.height);
         var max = Math.max(canvas.width,canvas.height);
         canvas.width = min;
         canvas.height = min;
         ctx.drawImage(webcam.element(), (max-min)/2, 0, min,min, 0,0,min,min);
     });

 }, false);
});