DIY: Alarma de ingreso, con mensaje y video al celular

Actualización al 20 de diciembre de 2016: Se ha publicado un segundo artículo complementario, donde se reemplaza la laptop usada en la alarma de ingreso por un Raspberry Pi.

Imagine llegar a su local comercial u oficina y se encuentra con la desagradable sorpresa que ha sido robado. O sin ser tan dramáticos, puede ser que solo desee ser avisado cuando un cliente ingrese por la puerta de su negocio. En cualquier caso, su tranquilidad puede ser lograda con una alarma de ingreso que cuente con cámara de seguridad que emita notificaciones directo al celular cuando alguien ingrese por la puerta. Si bien existen soluciones comerciales para esto, explicaremos cómo hacerlo uno mismo desde cero.

websocket-compressor

Los requisitos necesarios para lograrlo son los siguientes:

Vamos a dividir la explicación en dos partes: sensor de distancia, y video.

Sensor de distancia que dispare la alarma de ingreso

El sensor de distancia ultrasónico es la clave para la alarma de ingreso, puesto que medirá la distancia y se activará si dicha distancia es inferior a un valor mínimo (en el ejemplo el umbral era 1.2 metros), que señala un ingreso por la puerta. El sensor debe ser conectado al Arduino y este a la laptop. Luego, la señal recibida del sensor debe ser enviada vía websocket al servidor Node.js, el cual se encargará de difundir hacia los clientes conectados.

Empecemos con la conexión del sensor de distancia a la placa Arduino. Para ello, se recomienda primero seguir el siguiente tutorial, a fin de aclarar algunos conceptos del sensor:

Configuración del sensor en el lado cliente

Luego que se haya logrado obtener la medición del sensor en la laptop a través de la consola de Arduino IDE, uniremos la señal de Arduino con Node.js a través de la librería johnny-five.

Para empezar, el esquema de la conexión del sensor con el Arduino es el siguiente:

Esquema para la conexión entre el Arduino Mega y el sensor ultrasónico de distancia HC-SR04

El resultado final de la alarma de ingreso debe ser algo parecido a esto:

Arduino conectado con sensor de distancia

Para que esta conexión funcione desde NodeJS se debe cargar un firmware especial (Ping Firmata) en el Arduino, cargando el código a través del Arduino IDE, tal y como se explica en la ayuda del módulo Proximity de Johnny Five:

Ping Firmata cargado a través del Arduino IDE

Con esto, ya es posible acceder a las mediciones del sensor a través de Node JS, previa instalación de Johnny Five:

npm install johnny-five

Una vez cargado, ya se puede enviar la señal vía websocket al servidor con el siguiente código:

var five = require("johnny-five");
var board = new five.Board();
var io = require('socket.io-client'),
socket = io.connect('http://107.170.105.36:3000'); //servidor NodeJS
board.on("ready", function() {
var proximity = new five.Proximity({
controller: "HCSR04",
pin: 7
});
proximity.on("data", function() {
socket.emit('medida local del sensor', this.cm);
});
});

Este código se lo puede guardar en un archivo .JS, por ejemplo sensorproximidad.js, y se lo ejecuta con el siguiente comando:

node sensorproximidad.js

Servidor escuchando las mediciones del sensor

Para escuchar las medidas tomadas,el archivo index.js:

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('medida local del sensor', function(msg){
io.emit('medida local del sensor', msg);
});
});
http.listen(3000, function(){
console.log('Escuchando en puerto 3000');
});

Y para desplegar el resultado de la medida, el archivo index.html:

<html>
<body>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('medida local del sensor', function(msg){
console.log('medida tomada por el sensor: ', msg);
});
</script>
</body>
</html>

Para empezar la escucha de las mediciones se debe iniciar el servidor HTTP:

node index.js

Video en tiempo real

Para el cliente de video se ha utilizado en este ejemplo una laptop vieja cuya pantalla estaba rota, pero que fuera de ello funciona sin problemas, incluyendo su cámara web. A continuación detallamos los pasos que fueron tomados del blog de la empresa WeHeartDigital:

En la laptop se instaló el software FFmpeg, el cual entre otras cosas permite enviar video en tiempo real a un servidor.

Para listar los dispositivos se utiliza el siguiente comando:

ffmpeg -list_devices true -f dshow -i dummy

En el presente caso, la cámara identificada fue “TOSHIBA Web Camera – HD”.

Antes de prender el cliente es necesario inicializar el servidor de streaming:

cd /carpeta/con/el/servidor/de/streaming

node stream-server.js socket

Y para hacer funcionar el streaming de video:

ffmpeg -s 320x240 -r 24 -f dshow -rtbufsize 500000k -i video="TOSHIBA Web Camera - HD" -f mpeg1video -b 400k -r 24 http://107.170.105.36:8082/mivideo/320/240

Ojo que el comando debe fallar ya que aun no se ha levantado ningún servidor de streaming, por lo que a continuación vamos a ello.

Desplegando el video en tiempo real

En el servidor se debe iniciar el servicio que captura el streaming, en el puerto 8082. Para ello se utilizó la librería jsmpeg, que es un decodificador MPEG hecho en Javascript.

Una vez descargada la librería, iniciaremos el streaming de video:

node jsmpeg/stream-server.js mivideo

El argumento final, que en el ejemplo es “mivideo”, es una URL secreta bajo donde se mostrará el streaming, por motivos de seguridad. Una vez levantado el servidor de streaming, podemos volver a intentar el inicio del streaming con ffmpeg.

Para mostrar el streaming de video en la misma página web donde se muestran las medidas del sensor, modificamos un poco el archivo index.html agregando al final:

<canvas id="videoCanvas" width="640" height="480"></canvas>
<script type="text/javascript" src="https://www.jybaro.com/jsmpg.js"></script>
<script type="text/javascript">
var client = new WebSocket( 'ws://107.170.105.36:8084/' );
var miVideoCanvas = document.getElementById('videoCanvas');
var player = new jsmpeg(client, {canvas:miVideoCanvas});
</script>

Y listo, tenemos video en tiempo real junto a las mediciones del sensor de proximidad de nuestra alarma de ingreso.

Sobre el audio

El proyecto anterior carece de audio, y es una característica a ser implementada en próximas versiones de este proyecto.

Cabe adelantar que HTML5 cuenta con posibilidades avanzadas para captura de audio del cliente.

DIY: Alarma de ingreso, con mensaje y video al celular
5/5, de 1 voto

Deja un comentario