How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node

28
How to Hack a Road Trip with a Webcam, a GSP and Some Fun NodeMTL. com StreetView+ on the cheap

description

Part of a presentation @ nodemtl meetup. Presenting Kerouac, a real-time webapp featuring a remote GPS tracking device, a webcam and a whole lot of Node.js magic covering some basics of Node.js such as: event emitters and process spawning.

Transcript of How to Hack a Road Trip with a Webcam, a GSP and Some Fun with Node

Page 1: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

How to Hack a Road Trip with a Webcam, a GSP and Some Fun

NodeMTL.com

StreetView+ on the cheap

Page 2: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Pascal DeschenesTechnologist, Nu Echo Co-Founder

@pdeschenhttp://about.me/pdeschen

Page 3: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

● Background● Base Modules● Geo Storage● Real-time Layer● Web Front● Demo

Outline

Page 4: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Background

Page 5: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Stop-motion movie of our Newfoundland summer road trip

Page 6: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Base Modules

Page 7: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Non-Blocking Webcam Frame Grabbing and Remote Controller

Camelot

Page 8: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

var spawn = require('child_process').spawn;var arguments = [];arguments.push(foo);...var fswebcam = spawn('fswebcam', arguments);

fswebcam.stderr.on('data', function (data) { console.log('stdout: ' + data); });

fswebcam.on('exit', function (code) { ...});

Process Spawning

Page 9: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Non-Blocking GPS Daemon Client

Bancroft

Page 10: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

var events = require('events');.../* tap into prototype chain */sys.inherits(Bancroft, events.EventEmitter);...var emitter = events.EventEmitter.call(this);...emitter.emit('location', self.location);...emitter.emit('error', error);

Event Emitting

Page 11: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

var bancroft = new Bancroft();bancroft.on('connect', function () { console.log('connected');});bancroft.on('location', function (location) { console.log('got new location', location);});

Event Handling

Page 12: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Geo Storage

Page 13: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

A high-level, caching, CouchDB client

Cradle

Page 14: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

var Cradle = require('cradle');var cradle = new (Cradle.Connection)('http://127.0.0.1', 5984, {cache: false});

var db = cradle.database('kerouac');if (!db.exists()) {db.create();}

Init

Page 15: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

var document = { timestamp : new Date().getTime(), location : bancroft.location};

db.save(uuid(), document, function (err, res) { console.log(res); db.saveAttachment(res.id, res.rev, 'frame', 'image/png', frame, function (err, data) { ... });});

Store

Page 16: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

db.view('k/coordinates', function (err, rows) { rows.forEach(function (row) {console.log('deleting', row);db.remove(row.key._id, row.key._rev); });});

Delete

Page 17: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

{ "_id": "ffdba8b3-e125-4b4e-98fe-0be027aaec40", "_rev": "2-43d3afdb1909626bc962e44612c57150", "timestamp": 1311513742115, "location": { "timestamp": 1311513742000, "latitude": 44.423216667, "longitude": -72.944055, "altitude": 194.7, "speed": 0, "geometries": { "type": "Point", "coordinates": [-72.944055, 44.423216667, 194.7] } }, "_attachments": { "frame": { "content_type": "image/png", "revpos": 2, "length": 142666, "stub": true } }}

Model

Page 18: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Real-time Layer

Page 19: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Sending binarymessages

Socket.IO

Page 20: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

/* server side */io.sockets.volatile.emit('frame', { data : frame.toString('base64') });

/* client side */socket.on('frame', function (frame) { var img = $('#frame'); img.attr("src", 'data:image/png;base64,' + frame.data); });

Base64 Encoding

Page 21: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Web Front

Page 22: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

app.get('/map', function (req, res) { res.render('map', { title : "Kerouac" });});

Express

Page 23: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

<?xml version="1.0" encoding="UTF-8"?>kml(xmlns="http://earth.google.com/kml/2.1") Document name Newfoundland RoadTrip description A dynamically waypoint selection from an ongoing road trip Style(id="blueLine") LineStyle color red width 4 Placemark name Blue Line styleUrl #blueLine LineString altitudeMode relative coordinates - if (coordinates.length) - coordinates.forEach(function(coordinate) { =coordinate - })

Jade Templates

Page 24: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

app.get('/status', function (req, res) { res.header('content-type', 'application/json');

var status = messaging.location;

db.view('kerouac/speed_mean', function (err, rows) {

if (rows[0]) { status['mean'] = rows[0].value.toFixed(2); } else { status['mean'] = 'n.a.'; }

var json = JSON.stringify(status); res.send(json); });});

REST Handling

Page 25: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Show Time

Page 26: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

How to unit test event emission?

What about native c++ module?

What are the best practices regarding express.js code organization?

How to distribute Socket.io/Express behind a proxy?

Open Issuesfor an upcoming meet-up? volunteers?

Page 27: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

Questions?

@pdeschen

Page 28: How to Hack a Road Trip  with a Webcam, a GSP and Some Fun with Node

http://nodejs.org/docs/v0.4.9/api/child_processes.htmlhttp://nodejs.org/docs/v0.4.9/api/events.htmlhttp://blog.rassemblr.com/tag/nodejs/https://github.com/pdeschen/camelothttps://github.com/pdeschen/bancrofthttps://github.com/cloudhead/cradlehttp://geojson.org/http://socket.io/http://expressjs.com/http://jade-lang.com/

References