Manejo de la WebCam con JavaScript

Manejo de la WebCam con JavaScript

Ejemplo del uso de la WebCam con JAVASCRIPT, utilizando la libreria WebCamJS, el código es muy simple y básico, pero se puede extender y hacer cosas muy interesantes.

Puedes ver el ejemplo y descargar el código completo AQUI

Primero que nada el siguiente código HTML de nuestra vista, se utiliza la librería Bootstrap.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>WebCam</title>
	<link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/app.css">
	<script src="js/jquery.js"></script>
  <script type="text/javascript" src="js/webcam.min.js"></script>
  <script src="js/app.js"></script>
</head>
<body>
	<div class="container" style="margin-top:10px;">
 
    <div class="row form-group">
        <div class="col-xs-12 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">WebCam</h3>
                </div>
                <div class="panel-image hide-panel-body" id="camara">
 
                </div>
 
                <div class="panel-footer text-center">
                   <button onclick="tomarFoto();" class="btn btn-success btn-block">Tomar Fotografia</button>
                </div>
            </div>
        </div>
 
        <div class="col-xs-12 col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">Tu Fotografia</h3>
                </div>
                <div class="panel-image hide-panel-body" id="foto">
                    <img src="http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_52c470899a2e1_1.JPG" class="panel-image-preview" />
                </div>
                <div class="panel-footer text-center">
                </div>
             </div> 
         </div>
      </div>
     </div>
</body>
</html>

Dentro de nuestro body debemos declarar 2 divs una para la imagen de la webcam y otro para la fotografía que podemos tomar. En el ejemplo a un div le pusimos el id “camara” y al otro “foto”.

El código JavaScript para la inicialización de la cámara y para el evento de la fotografía es el siguiente:

$(document).ready(function() {
    //Inicializamos el div para la camara, con el tamaño y el tipo de imagen
    Webcam.set({
        width: $('#foto').width(),
        height: $('#foto').height(),
        image_format: 'jpeg',
        jpeg_quality: 90
    });
    //Asignamos el id del div que utilizaremos para 
    Webcam.attach( '#camara');
});
 
//Funcion para tomar foto 
function tomarFoto() {
    Webcam.snap( function(data_uri) {
        //Vaciamos el div de la foto
        $('#foto').empty();
        //Asignamos la nueva imagen al div 
        $('#foto').html( '<img src="'+data_uri+'"/>');
    } );
}

Written by Ernesto Solis

Deja un comentario

A %d blogueros les gusta esto: