lunes, 26 de mayo de 2014

Código HTML + JavaScript para usar la Webcam

He encontrado un script muy interesante para poder usar la Webcam mediante HTML y JavaScript.
El código es el siguiente:

En el head ponemos:
    
    Prueba de cámara Web
    
    
    

En el script de Javascript ponemos:
//Nos aseguramos que estén definidas
//algunas funciones básicas
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || function(){alert('Su navegador no soporta navigator.getUserMedia().');};
 
jQuery(document).ready(function(){
    //Este objeto guardará algunos datos sobre la cámara
    window.datosVideo = {
        'StreamVideo': null,
        'url' : null
    };
     
    jQuery('#botonIniciar').on('click', function(e){
        //Pedimos al navegador que nos de acceso a 
        //algún dispositivo de video (la webcam)
        navigator.getUserMedia({'audio':false, 'video':true}, function(streamVideo){
            datosVideo.StreamVideo = streamVideo;
            datosVideo.url = window.URL.createObjectURL(streamVideo);
            jQuery('#camara').attr('src', datosVideo.url);
        }, function(){
            alert('No fue posible obtener acceso a la cámara.');
        });
 
    });
 
    jQuery('#botonDetener').on('click', function(e){
        if(datosVideo.StreamVideo){
            datosVideo.StreamVideo.stop();
            window.URL.revokeObjectURL(datosVideo.url);
        };
    });
 
 jQuery('#botonFoto').on('click', function(e){
    var oCamara, 
        oFoto,
        oContexto,
        w, h;
         
    oCamara = jQuery('#camara');
    oFoto = jQuery('#foto');
    w = oCamara.width();
    h = oCamara.height();
    oFoto.attr({'width': w, 'height': h});
    oContexto = oFoto[0].getContext('2d');
    oContexto.drawImage(oCamara[0], 0, 0, w, h);
 
});
});

En el body ponemos:
    
Cámara
Foto

He encontrado el código en esta página web: http://variabletecnica.com/2012/09/30/acceso-a-la-camara-con-html5/ Ahí explican mejor todo.
Un saludo.

1 comentario:

  1. PErfecto me da img la camaara pero tengo un error al tomar la foto... y segun el inspector de codigo de chrome el problema es esta linea /= oContexto = oFoto[0].getContext('2d');

    ResponderEliminar