Utilizar la webcam con HTML5

por .

Photobooth.js es una biblioteca JavaScript para la utilización de la cámara web en cualquier sitio web, utilizando para ello HTML5 de manera eficiente y rápida.

Este interesante proyecto no se limita a utilizar la cámara web, también permite realizar pequeños ajustes dinámicamente, por ejemplo podemos cambiar los tonos de la captura, los matices y hasta recortar parte de lo que se esta capturando. Para realizar estos pequeños ajustes Photobooth.js muestra un pequeño panel de herramientas con los iconos para realizar las acciones.

utilizar la webcam con html5

Ejemplo de uso de la webcam con HTML5:

Versión que utiliza jQuery:

$('#example').photobooth().on("image",function( event, dataUrl ){
    $( "#gallery" ).append( '<img src="' + dataUrl + '" >');
});

Versión standalone:

container = document.getElementById( "example" );
gallery = document.getElementById( "gallery" );

myPhotobooth = new Photobooth( container );

myPhotobooth.onImage = function( dataUrl ){
    var myImage = document.createElement( "img" );
    myImage.src = dataUrl;
    gallery.appendChild( myImage );
};

Photobooth.js soporta la mayoría de los navegadores modernos, sin embargo pueden aparecer pequeñas incompatibilidades. El soporte es completo en las siguientes versiones: Chrome 12+, Firefox 17+, Opera 12+. Lamentablemente el soporte es muy malo para Internet Explorer y Safari.

Web: Photobooth.js

Categorizado en: