Via el Tumblr de Esteban Saiz descubro jpegcam, que aunque es antigua se trata de una herramienta que aprovecha varias tecnologías para conseguir integrar una webcam en nuestro sitio web.
Como vimos hace unos días, una nueva especificación nos permitirá conseguir esto mismo desde el mismo navegador sin tener que usar Flash para activar la cámara, pero por el momento esta herramienta permitirá que vayamos disfrutando de esta posibilidad.
Instalación
La herramienta está compuesta de una serie de ficheros que debemos incluir en el directorio en el que incluyamos la aplicación:
- webcam.js: Fichero que aporta la API con la que acceder a la cámara
- webcam.swf: Interfaz flash que permite conectar con la cámara
- shutter.mp3: Audio que simulará el sonido de captura de fotos.
Una vez colocados en lugar que deben estar tenemos que cargar el fichero webcam.js en nuestra página. Para ello, incluiremos el siguiente código:
<script type="text/javascript" src="webcam.js"></script>
Aunque puede ir entre los tags <head /> lo pondría al final del <body /> para aligerar un poco la carga de la página.
En este punto ya tenemos cargada la API que nos permite trabajar con la cámara, ahora nos quedará la configuración previa:
<script type="text/javascript">
webcam.set_api_url( 'test.php' ); // Fichero de subida
webcam.set_swf_url( '/path/to/webcam.swf' ); // Fichero SWF
webcam.set_quality( 90 ); // Cálidad JPEG (1 - 100)
webcam.set_shutter_sound( true ); // Activar sonido
// Eventos (onLoad, onComplete, onError)
webcam.set_hook( 'onComplete', 'my_callback_function' );
function my_callback_function(response) {
alert("Success! PHP returned: " + response);
}
</script>
Una vez configurado, ya podemos ponernos a usarlo. Para ello disponemos de una serie de métodos que nos permitirán generar el HTML e interactuar con las acciones que la cámara tendrá que realizar.
<script type="text/javascript">
// Código necesario para incrustar la cámara
document.write( webcam.get_html(320, 240) );
</script>
Con esto ya tenemos la película Flash cargada y ubicada allá donde lo hayamos puesto en nuestra página. Ahora solo nos quedará añadir los métodos para que el usuario pueda tomar la captura o configurar la cámara.
<form>
<!-- Activamos la configuración -->
<input type=button value="Configure..." id="configure" />
<!-- Tomamos la imagen -->
<input type=button value="Take Snapshot" id="capture" />
</form>
<script type="text/javascript">
document.getElementById("configure").appendChild('click', function(){
webcam.configure();
}, false);
document.getElementById("capture").appendChild('click', function(){
webcam.snap();
}, false);
</script>
Ya está hecho, con todo esto ya tenemos preparada nuestra página para aceptar las imágenes capturadas desde la webcam de nuestros usuarios. Solo tenemos que implementar, en el lado del servidor, la recepción de imágenes, en PHP sería algo parecido a esto:
$jpeg_data = file_get_contents('php://input');
$filename = "my_file.jpg";
$result = file_put_contents( $filename, $jpeg_data );
El script está preparado para recibir una URL y recibirla en el callback que recibirán los eventos disponibles por webcam, haciendo posible la carga asíncrona, para ello simplemente debemos pasar la URL después de haber subido el fichero.
$url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI'])
. '/' . $filename;
print "$url\n";
He montado un pequeño ejemplo para que me dejéis una foto de vuestra cara 😀
