Introducción

Nota: ya hay una versión 3 de este código. En ese nuevo post explico cómo dar la posibilidad de que el usuario cambie la cámara, además de que introduzco otras mejoras y actualizaciones. Míralo aquí.

Nunca imaginé que algún día se podría tomar una foto y guardarla en un servidor usando código nativo de Javascript y la cámara del dispositivo. Eso abre un mundo de posibilidades que permite a nuestras aplicaciones tener más características.

Hoy mostraré aquí un pequeño tutorial que nos permitirá tomar una simple foto y subirla a un servidor que tendrá PHP. No se usará ningún framework, ni de Javascript ni de PHP.

Nota: debido a que vamos a tomar una foto con la cámara, debemos servir nuestra app en localhost (para hacer pruebas locales) o en un servidor con https. Es decir, nuestro código debe estar en un servidor con un certificado SSL, o corriendo en nuestra máquina.

Si te gusta programar en Python, te invito a leer cómo tomar una foto de la cámara web, utilizando Python.

Probar proyecto terminado

Online

Si quieres ver el resultado en vivo, sin descargar nada, pues hacer click aquí.

Nota: no me hago responsable de las fotos que tomes, no se borrarán y se quedarán ahí hasta que tenga la oportunidad de eliminarlas periódicamente.

Descargar

También puedes descargar el código de GitHub (https://parzibyte.me/l/zwcOVm), extraerlo y pegarlo en la raíz de tu servidor local. Si usas XAMPP (en este tutorial explico cómo configurarlo), este podría ser C:\xampp\htdocs.

Programando la parte del cliente

Consiguiendo permiso

Para acceder a la cámara del dispositivo es necesario tener permiso del usuario (si no, imagina: cualquier usuario tendría acceso para tomarte fotografías y vídeos con sólo visitar una página web).

Antes de pedir acceso, debemos comprobar si el navegador del usuario tiene soporte. Como no sabemos cuál es el que usa, y como tampoco podemos imaginar un escenario perfecto en donde todos usen Chrome, debemos considerar todas las posibilidades.

El siguiente código comprueba si existe al menos una de las funciones. Primero prueba con la que debería ser de Chrome, después con Mozilla y así. Si no encuentra ninguna, entonces regresa false.

See the gist on github.

Una vez que tenemos la función para verificar, debemos crear otra función que envuelva a todas las posibles opciones. Es decir, que devuelva la función para pedir permiso independientemente del navegador. Para ello, podemos crear una de la siguiente forma:

See the gist on github.

Con todo esto, finalmente podremos pedir permiso sólo si el navegador tiene soporte. Es buen momento para describir los argumentos que toma la función getUserMedia.

1. Restricciones: aquí pedimos lo que queremos obtener. Debemos indicar si queremos vídeo y audio con una variable booleana. En este caso sólo pondré video a true, porque el audio no es necesario.
2. Función en caso de aprobación: si el usuario da permiso, se llamará a esta función que traerá el stream como parámetro.
3. Función en caso de rechazo: si el usuario deniega el servicio o existe algún error, se llamará esta función que traerá el error como parámetro.

Una vez explicado esto, ahora sí podemos pedir permiso de la siguiente manera:

See the gist on github.

Nota: por si no lo sabes, para abrir la consola y ver los mensajes puedes presionar F12 en Chrome, Mozilla y Edge. Y Ctrl + Shift + I en Opera.

Mostrando stream

Ya tenemos el stream, pero no lo estamos mostrando. Se supone que debemos mostrar al usuario lo que su cámara ve, y cuando él quiera, tomar la foto. Así que vamos a definir un elemento video:

<video id="video"></video>

En el código haremos referencia a él y mostraremos el stream:

See the gist on github.

Con esto, mostraremos al usuario lo que su cámara ve.

Agregando botón y canvas para tomar foto

Abajo del vídeo agregaremos un botón. También hará falta un elemento canvas para pintar ahí la foto tomada. Ahora que lo pienso, necesitamos un elemento para mostrarle al usuario el estado; es decir, si la foto ya se guardó, si se está enviando, etcétera. Para ello pondré un párrafo vacío.

El HTML quedaría así:

See the gist on github.

Notar por favor que el canvas está oculto, porque no sería necesario mostrarlo. Simplemente lo usaremos para poner ahí la imagen.

El código que define a los elementos está hasta ahora así:

See the gist on github.

Ahora es momento de escuchar el click del botón y al hacerlo tomar la foto. El código quedaría así:

See the gist on github.

De esta forma hacemos una petición POST usando AJAX al servidor. Enviamos la foto que estaba en el canvas en base64. Se supone que el servidor nos debería responder con el nombre de la imagen guardada.

Recibirla y guardarla en el servidor es otra historia que veremos abajo. Hasta aquí termina la programación del lado del cliente.

Importante: Actualización abril 2018

Chrome genera una advertencia indicando que URL.createObjectURL es obsoleto, así que tenemos que actualizarnos.

Básicamente es cambiar esta línea:

$video.src = window.URL.createObjectURL(stream);

Por esto:

$video.srcObject = stream;

Más información aquí: Tomar foto de cámara web con Javascript, actualizado

Programando servidor

Ahora es el turno de PHP. Vamos a recibir la imagen, decodificarla y guardarla. Algo muy importante para tomar en cuenta es que al obtenerla desde el canvas, se agrega “data:image/png;base64,” al inicio de la cadena. Si la guardamos así, no será una imagen válida; tenemos que remover esa parte.

Recordemos también que la imagen se codifica para que viaje sin alterarse, y sin tener su forma original.

Dicho esto, aquí está el código PHP:

See the gist on github.

Los datos enviados por ajax los obtenemos leyendo el stream de php://input. Comprobamos si se mandó algo y si es que sí, lo recuperamos.

Eso lo decodificamos y limpiamos para finalmente hacer uso de file_put_contents para escribir la imagen en un fichero. uniqid es usado para generar, como su nombre lo dice, una cadena única. Así, aunque se envíen muchas imágenes todas tendrán un nombre distinto.

Al terminar, salimos y mostramos los bytes que se escribieron. No es necesario capturar esa respuesta

¿Y en dónde veo las fotos que he tomado? muy fácil, si vamos al directorio en donde reside el archivo php, las imágenes estarán ahí mismo. Por ejemplo, mi carpeta luce así:

Si lo descargas y pruebas tú mismo, o pruebas la versión online, al tomar la foto saldrá un enlace para que la veas.

Referencias

Algunas de las cosas que aparecen en este post no las sabía, y las aprendí de algunos sitios. Aquí dejo los enlaces:

MDN – Navigator.getUserMedia

Ajax sin jQuery