Utilizar la webcam con HTML5

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.

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

Pablo: Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
Entradas relacionadas