Cómo usar la cámara web con Electron Framework (imágen instantanea) y guardar la imágen en el sistema

Cómo usar la cámara web con Electron Framework (imágen instantanea) y guardar la imágen en el sistema

Aprende a implementar el uso de la cámara web para crear fotos instantaneas en tu aplicación para escritorio híbrida con webcamjs y Electron Framework.

Preparando la cámara

Para manipular la cámara, usaremos el módulo webcamjs. Este módulo es realmente pequeño y no tiene dependencias, es usado para capturar imágenes con JavaScript a través de la cámara web y puede entregar el resultado en diferentes formatos como JPEG, PNG e incluso  Esquema de URI de datos. WebcamJS usa el método getUserMedia de HTML5.

Instala el plugin con el siguiente comando en tu proyecto:

npm install webcamjs --save

De esta manera podrás requerir el módulo más tarde, pero antes, crea la estructura básica para generar una foto (un elemento div que muestra en tiempo real lo que captura la cámara y un boton para iniciar y parar la cámara):

<!-- Puedes cambiar las dimensiones de la camara con CSS, las propiedades text-align y margin son solo para centrarla -->
<div id="camdemo" style="width: 320px; height: 240px; text-align: center; margin: 0 auto;"></div>
<br>
<div style="text-align:center;">
    <input type="button" id="start" value="Iniciar / Apagar cámara"/>
</div>

Luego hazlo funcionar con algo de JavaScript, crea un event listener al botón y usa el plugin para activar la cámara:

// Una variable "bandera" para saber cuando iniciar o parar la cámara
var enabled = false;
// Agrega webcamjs
var WebCamera = require("webcamjs");

document.getElementById("start").addEventListener('click',function(){
   if(!enabled){
     enabled = true;
     WebCamera.attach('#camdemo');
     console.log("La cámara ha sido iniciada");
   }else{ // Disable the camera !
     enabled = false;
     WebCamera.reset();
    console.log("La camara ha sido desactivada");
   }
},false);

Finalmente ejecuta el proyecto de electron con npm start y prueba la cámara:

Webcamerajs in Electron

Puedes ver más ejemplos de webcamjs si lo necesitas aquí.

Guardar imagen al escritorio

Gracias al módulo de webcamjs, la creación de una instantanea es realmente sencillo, sin embargo este retorna la imágen en formato base64. Para generar la imágen se usa el método snap (aprende como funciona aquí).

Ahora para guardar la imágen necesitamos procesarla de tal manera que se pueda guardar, para ello debe ser convertida a un Buffer. Comienza por agregar un nuevo boton para guardar la imágen en el escritorio:

<input type="button" id="savefile" value="Guardar imágen"/>

Agrega la dependencia del dialogo para guardar el archivo, la acción de generar imágen y guardarla a un archivo:

var remote = require('remote'); // Carga el componente remote de electron que contiene los dialogos
var dialog = remote.require('dialog'); // Escoger los dialogos del modulo remote
var fs = require('fs'); // Cargar modulo de File System

// Retorna un objeto con la imágen base64 procesada
function processBase64Image(dataString) {
      var matches = dataString.match(/^data:([A-Za-z-+\/]+);base64,(.+)$/),response = {};

      if (matches.length !== 3) {
          return new Error('Cadena base64 invalida');
      }

      response.type = matches[1];
      response.data = new Buffer(matches[2], 'base64');

      return response;
}

document.getElementById("savefile").addEventListener('click',function(){
     if(enabled){
            WebCamera.snap(function(data_uri) {
                // Guardar buffer de imágen en variable 
                var imageBuffer = processBase64Image(data_uri);
                // Inicia el dialogo de guardar archivo para darle un nombre al archivo
                dialog.showSaveDialog({
                    filters: [
                        { name: 'Imágenes', extensions: ['png'] },
                    ]
                },function (fileName) {
                       if (fileName === undefined){
                            console.log("No se guardo el archivo porque no le diste un nombre o saliste del dialogo");
                            return;
                       }
                       
                       // Usa el modulo filesystem para guardar el archivo
                       fs.writeFile(fileName, imageBuffer.data, function(err) {
                           if(err){
                               console.log("No se pudo guardar el archivo");
                           }else{
                               alert("Imágen guardada satisfactoriamente");
                           }
                       });
                });
             });
     }else{
            console.log("Por favor activa la cámara para crear imagenes");
     }
},false);

El dialogo debería funcionar sin ningun problema y podrás guardar la imágen usando el dialogo nativo (aprende más sobre el ciclo de vida de un archivo, como guardarlo con dialogos etc):

Y la imágen debería guardarse en el escritorio:

Notes

  • Puedes cambiar el formato de la imágen a través de la propiedad image_format al inicializar webcamjs.
  • Si la camara está siendo usada por otro programa, simplemente verás una pantalla negra. Hasta la fecha no hay manera de detectar si la cámara está siendo usada por otro programa.
  • Visita los ejemplos en nuestro repositorio de Electron en Github

Que te diviertas !

Esto podría ser de tu interes

Conviertete en un programador más sociable