Uso de webcam en proyecto React

Hola, soy Álvaro Moya Herraiz, alumno del máster de Desarrollo Web Full Stack, MultiCloud y Multiplataforma y voy a enseñaros a como acceder a la webcam en vuestro proyecto de React.

Imaginemos que tenemos una aplicación web con React la cual requiere el uso de la webcam, ya sea para hacer fotos, grabar vídeo en tiempo real, etc. En este post os enseñare detalladamente a hacerlo de forma clara y sencilla

Primero de todo, deberemos acceder a nuestro proyecto desde la consola de comandos e introducir el siguiente comando:

Gracias a este comando podremos hacer uso de las funciones que nos ofrece react-webcam.

El siguiente paso sería crear el archivo .js en nuestro proyecto, y dentro del mismo, importar Webcam from «react-webcam».

Dentro del render, en el return, creamos un <div> y dentro de ese <div>, declaramos el componente Webcam mediante la etiqueta <Webcam/>. Dentro de esta etiqueta, podemos añadir algunos atributos que modificarán determinadas características de la imagen que se mostrará luego en la web (altura, ancho, formato de la captura, etc).

Cabe destacar el atributo ref={this.setRef}. Gracias a este atributo podemos crear un objeto webcam mediante un setRef. Este objeto webcam nos permitirá más adelante usar algunos de los métodos de react-webcam, como por ejemplo, sacar una foto/captura de lo que la cámara esté grabando en ese momento.

Si ahora iniciamos nuestro servidor y vamos al navegador (en este caso yo uso Google Chrome, pero funciona en casi todos los navegadores actuales) podremos ver que la imagen se está grabando.

Aquí podemos ver como la cámara graba la bola de cristal

Por el momento hemos conseguido que se muestre por pantalla aquello que está grabando nuestra cámara, pero es lógico que queramos trabajar sobre esa imagen. En esta parte del post enseñaré a sacar una foto/captura.

Lo primero será crear un state en el cual declararemos la variable imagen que tendrá un valor null. En esta variable se guardarán los datos necesarios para poder mostrar la foto/captura más tarde en una etiqueta <img/>. También crearemos el método foto(), que será el encargado de tomar la foto.

Ahora explicaré más a fondo como funciona el método foto(). Lo primero que hacemos es crear una variable captura, la cual tendrá como valor el resultado de usar uno de los métodos de react-webcam, el cual se puede utilizar gracias al objeto webcam anteriormente mencionado. Acto seguido (y totalmente opcional) mostramos por consola el resultado de dicha variable para que sepamos que datos está guardando exactamente. Finalmente, actualizamos el valor de la variable imagen mediante un this.setState.

El siguiente paso sería crear una etiqueta <button> dentro del <div> para poder realizar una llamada al método que hemos creado. También crearemos una etiqueta <img> cuyo atributo src tendrá como valor la variable imagen del state, todo esto con el fin de poder mostrar por pantalla la foto tomada al pulsar el botón.

Creación de las etiquetas <button> y <img>

Volvemos al navegador y vemos los resultados.

Muestra por consola del valor de la variable captura, la cual se encuentra dentro del método foto()

Finalmente, si necesitamos la imagen creada para algún otro fin, podemos hacer que se descargué en nuestro Pc para que así podamos usarla cuando deseemos.

Para hacer esto simplemente bastaría con añadir una etiqueta <a> dentro del <div>. A esta etiqueta <a> hay que añadirle los atributos href={this.state.imagen} y download=»captura».

Creación de la etiqueta <a> con sus atributos necesarios

A continuación procederé a explicar el uso de los dos atributos anteriormente nombrados:

href={this.state.imagen}: Añadir la variable imagen del state como valor del atributo href nos permite pasarle al navegador los datos del archivo que vamos a descargar, en este caso la variable imagen tenía como valor un .jpg, que será el que se descargue.
download=»captura»: El valor que haya dentro de este atributo pasará a ser el nombre del archivo que descarguemos.

El archivo descargado se guardará por defecto en la carpeta descargas de nuestro ordenador

Volvemos a la web por última vez para comprobar que todo funciona correctamente.