bump package version

Support for passing an existing tcpVideoStream

.gitignore

@@ -1,2 +1,4 @@
 node_modules
+dist/broadway.js
 .*.swp
+.DS_Store

.jshintrc

@@ -0,0 +1,30 @@
+{
+    "browser" : false,
+    "boss" : true,
+    "curly": true,
+    "debug": false,
+    "devel": true,
+    "eqeqeq": true,
+    "evil": false,
+    "forin": true,
+    "immed": true,
+    "indent": 4,
+    "jquery": true,
+    "laxbreak": false,
+    "laxcomma": true,
+    "newcap": true,
+    "noarg": false,
+    "noempty": true,
+    "nonew": true,
+    "nomen": false,
+    "onevar": true,
+    "plusplus": false,
+    "regexp": false,
+    "trailing": true,
+    "undef": true,
+    "sub": false,
+    "strict": true,
+    "globalstrict": true,
+    "white": true,
+    "node" : true
+}

Gruntfile.js

@@ -0,0 +1,49 @@
+module.exports = function (grunt) {
+    'use strict';
+    // load all grunt tasks
+    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
+
+    grunt.initConfig({
+
+        pkg: grunt.file.readJSON('package.json'),
+
+        jshint: {
+            options: {
+                jshintrc: '.jshintrc'
+            },
+            all: [
+                'Gruntfile.js',
+                'lib/{,*/}*.js',
+                'dist/nodecopter-stream.js'
+            ]
+        },
+
+        uglify: {
+            dist: {
+                files: {
+                    'dist/broadway.js' : [
+                        'dist/vendor/broadway/glUtils.js',
+                        'dist/vendor/broadway/util.js',
+                        'dist/vendor/broadway/avc.js',
+                        'dist/vendor/broadway/canvas.js',
+                        'dist/nodecopter-stream.js'
+                    ]
+                }
+            }
+        },
+        concat: {
+            options: {
+                banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+            },
+            dist: {
+                src: [
+                    'dist/vendor/broadway/sylvester.js',
+                    'dist/vendor/broadway/avc-codec.js',
+                    'dist/broadway.js'
+                ],
+                dest: 'dist/nodecopter-client.js'
+            }
+        }
+    });
+    grunt.registerTask('default', ['jshint', 'uglify', 'concat']);
+};

History.md

@@ -0,0 +1,50 @@
+0.1.0 / 2012-10-20
+==================
+
+  * Initial version, unreleased
+
+0.2.0 / 2012-10-20
+==================
+
+  * released as npm package dronestream
+
+1.0.0 / 2012-12-15
+==================
+
+  * add support for multiple browser clients
+  * add support for browser reloads
+  * reconnect to drone on failure
+  * add support for bare http sockers
+  * remove express dependency
+  * export as a module
+  * added examples for using in other applications
+
+1.0.1 / 2012-12-16
+==================
+
+  * update documentation
+  * add changelog
+
+1.0.2 / 2012-12-27
+==================
+
+  * use requestAnimationFrame() for rendering video frames
+  * cleaned up express example
+  * update ar-drone and buffy dependencies to latest versions
+
+1.0.3 / 2013-03-19
+==================
+
+  * add custom drone ip to server options
+  * fix static files on webserver
+
+1.1.0 / 2013-08-07
+==================
+
+  * add support for custom host and port to client
+  * support passing an existing video stream
+  * switch to grunt for building
+  * express fixes
+  * remove constants for strict mode
+  * bump ws and ar-drone dependencies
+  * add hook for postprocessors

README.md

@@ -10,6 +10,29 @@ This code uses web-sockets and the incredibly awesome
 [Broadway.js](https://github.com/mbebenita/Broadway) to render the video frames
 in your browser using a WebGL canvas.
 
+## How to use
+
+Please see the http.createServer and Express 3.0 examples in the 'examples' dir.
+You attach the stream to your server like this:
+```javascript
+// in node:
+//
+// note that the 'server' object points to a server instance and NOT an express app.
+require("dronestream").listen(server); 
+// if your drone is on a different IP
+require("dronestream").listen(server, { ip: "192.168.2.155" });
+```
+
+We serve the client in the same manner as Socket.IO. Add a reference to 
+**/dronestream/nodecopter-client.js** in your template. Then attach the stream to a DOM node:
+```html
+<!-- on the client -->
+<script src="/dronestream/nodecopter-client.js"></script>
+<script>
+  // video canvas will auto-size to the DOM-node, or default to 640*360 if no size is set.
+  new NodecopterStream(document.getElementById("droneStream"));
+</script>
+```
 
 ## How it works
 
@@ -22,10 +45,9 @@ In the browser broadway takes care of the rendering of the WebGL canvas.
 
 ## Status
 
-For this release I was exclusively interested in the lowest possible latency.
-There is no error handling for the websockets, the connection to the drone or
-the video player what-so-ever. This may come eventually, or may not. I think it
-is enough to be used as a starting point for your own integration.
+Node-dronestream has gained some stability in the last release. It attempts 
+to recover lost connections to the drone, and it handles multiple clients, 
+disconnections, etc. See "How to use" for API.
 
 ## Thanks
 
@@ -45,3 +67,9 @@ is enough to be used as a starting point for your own integration.
 - Brian Leroux for being not content with the original solution and for
   cleaning up the predecessor, nodecopter-stream.
 
+- @karlwestin for picking up where I was to lazy to actually make this usable.
+
+## Demo
+
+Watch @felixge demoing node-dronestream live at german user group cgnjs:
+http://www.youtube.com/watch?v=nwGNNMJt4mE&t=19m52

app.js

@@ -1,82 +0,0 @@
-'use strict';
-/**
- * Module dependencies.
- */
-
-var express = require('express')
-  , routes = require('./routes')
-  , http = require('http')
-  , path = require('path')
-  , app = express()
-  , server = http.createServer(app)
-  , WebSocketServer = require('ws').Server
-  , wss = new WebSocketServer({server: server})
-  , sockets = []
-  , Parser = require('./lib/PaVEParser')
-  , arDrone = require('ar-drone')
-  ;
-
-function init() {
-    var tcpVideoStream = new arDrone.Client.PngStream.TcpVideoStream({timeout: 4000})
-      , p = new Parser();
-
-    console.log("Connecting to stream");
-
-    tcpVideoStream.connect(function () {
-        tcpVideoStream.pipe(p);
-    });
-
-    tcpVideoStream.on("error", function(err) {
-      console.log("There was an error: %s", err.message);
-      tcpVideoStream.end();
-      tcpVideoStream.emit("end");
-      init();
-    });
-
-    p.on('data', function (data) {
-      sockets.forEach(function(socket) {
-        socket.send(data, {binary: true});
-      });
-    });
-}
-init();
-
-wss.on('connection', function (socket) {
-  sockets.push(socket);
-
-  socket.on("close", function() {
-    console.log("Closing socket");
-    sockets = sockets.filter(function(el) {
-      return el !== socket;
-    });
-  });
-});
-
-
-app.configure(function () {
-    app.set('port', process.env.PORT || 3000);
-    app.set('views', __dirname + '/views');
-    app.set('view engine', 'jade', { pretty: true });
-    app.use(express.favicon());
-    app.use(express.logger('dev'));
-    app.use(express.bodyParser());
-    app.use(express.methodOverride());
-    app.use(app.router);
-    app.use(express.static(path.join(__dirname, 'public')));
-});
-
-app.configure('development', function () {
-    app.use(express.errorHandler());
-    app.locals.pretty = true;
-});
-
-
-app.get('/', routes.index);
-
-if (module.parent) {
-    module.exports = server;
-} else {
-    server.listen(app.get('port'), function () {
-        console.log("Express server listening on port " + app.get('port'));
-    });
-}

dist/nodecopter-stream.js

@@ -0,0 +1,129 @@
+/*jshint browser:true */
+/*global Avc:true, YUVWebGLCanvas: true, Size: true, requestAnimationFrame:true */
+
+/* requestAnimationFrame polyfill: */
+(function (window) {
+    'use strict';
+    var lastTime = 0,
+        vendors = ['ms', 'moz', 'webkit', 'o'],
+        x,
+        length,
+        currTime,
+        timeToCall;
+
+    for (x = 0, length = vendors.length; x < length && !window.requestAnimationFrame; ++x) {
+        window.requestAnimationFrame = window[
+            vendors[x] + 'RequestAnimationFrame'
+        ];
+        window.cancelAnimationFrame = window[
+            vendors[x] + 'CancelAnimationFrame'
+        ] || window[vendors[x] + 'CancelRequestAnimationFrame'];
+    }
+
+    if (!window.requestAnimationFrame) {
+        window.requestAnimationFrame = function (callback, element) {
+            currTime = new Date().getTime();
+            timeToCall = Math.max(0, 16 - (currTime - lastTime));
+            lastTime = currTime + timeToCall;
+            return window.setTimeout(function () {
+                callback(currTime + timeToCall);
+            }, timeToCall);
+        };
+    }
+
+    if (!window.cancelAnimationFrame) {
+        window.cancelAnimationFrame = function (id) {
+            clearTimeout(id);
+        };
+    }
+}(window));
+
+
+/* NodeCopterStream: */
+(function (window, document, undefined) {
+    'use strict';
+    var NS,
+        socket,
+        avc,
+        webGLCanvas,
+        width,
+        height,
+        callbackOnce = null;
+
+    function setupAvc() {
+        avc = new Avc();
+        avc.configure({
+            filter: 'original',
+            filterHorLuma: 'optimized',
+            filterVerLumaEdge: 'optimized',
+            getBoundaryStrengthsA: 'optimized'
+        });
+        avc.onPictureDecoded = handleDecodedFrame;
+    }
+
+    function handleNalUnits(message) {
+        avc.decode(new Uint8Array(message.data));
+    }
+
+    function handleDecodedFrame(buffer, bufWidth, bufHeight) {
+        var callback;
+
+        requestAnimationFrame(function () {
+            var lumaSize = bufWidth * bufHeight,
+                chromaSize = lumaSize >> 2;
+
+            webGLCanvas.YTexture.fill(buffer.subarray(0, lumaSize));
+            webGLCanvas.UTexture.fill(buffer.subarray(lumaSize, lumaSize + chromaSize));
+            webGLCanvas.VTexture.fill(buffer.subarray(lumaSize + chromaSize, lumaSize + 2 * chromaSize));
+            webGLCanvas.drawScene();
+        });
+
+        // call callback with Y portion (grayscale image)
+        if (null !== callbackOnce && width) {
+            callback = callbackOnce;
+            callbackOnce = null;
+            // decoded buffer size may be larger,
+            // so use subarray with actual dimensions
+            callback(buffer.subarray(0, width * height));
+        }
+    }
+
+    function setupCanvas(div) {
+        var canvas = document.createElement('canvas');
+
+        width = div.attributes.width ? div.attributes.width.value : 640;
+        height = div.attributes.height ? div.attributes.height.value : 360;
+
+        canvas.width = width;
+        canvas.height = height;
+        canvas.style.backgroundColor = "#333333";
+        div.appendChild(canvas);
+
+        webGLCanvas = new YUVWebGLCanvas(canvas, new Size(width, height));
+    }
+
+
+    NS = function (div, options) {
+        var hostname, port;
+        options = options || {};
+        hostname = options.hostname || window.document.location.hostname;
+        port = options.port || window.document.location.port;
+
+        setupCanvas(div);
+        setupAvc();
+
+        socket = new WebSocket(
+             'ws://' + hostname + ':' + port + '/dronestream'
+        );
+        socket.binaryType = 'arraybuffer';
+        socket.onmessage = handleNalUnits;
+    };
+
+    // enqueue callback oto be called with next (black&white) frame
+    NS.prototype.onNextFrame = function (callback) {
+        callbackOnce = callback;
+    };
+
+    window.NodecopterStream = NS;
+
+}(window, document, undefined));

dist/vendor/broadway/avc.js

@@ -11,7 +11,7 @@ HEAP32 = Module.HEAP32;
 _h264bsdClip = Module._get_h264bsdClip();
 
 var Avc = (function avc() {
-  const MAX_STREAM_BUFFER_LENGTH = 1024 * 1024;
+  var MAX_STREAM_BUFFER_LENGTH = 1024 * 1024;
   
   function constructor() {
     Module._broadwayInit();

dist/vendor/broadway/canvas.js

@@ -337,7 +337,7 @@ var WebGLCanvas = (function () {
     },
     onInitWebGL: function () {
       try {
-        this.gl = this.canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
+        this.gl = this.canvas.getContext("experimental-webgl");
       } catch(e) {}
       
       if (!this.gl) {

example/createServer/app.js

@@ -0,0 +1,10 @@
+var http = require("http"),
+    drone = require("../../index");
+
+
+var server = http.createServer(function(req, res) {
+  require("fs").createReadStream(__dirname + "/index.html").pipe(res);
+});
+
+drone.listen(server);
+server.listen(5555);

example/createServer/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html>
+<head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+    <title>Stream as module</title>
+    <script src="/dronestream/nodecopter-client.js" type="text/javascript" charset="utf-8"></script>
+</head>
+<body>
+    <h1 id="heading">Stream through a normal require("http").createServer</h1>
+    <div id="droneStream" style="width: 640px; height: 360px">   </div>
+
+    <script type="text/javascript" charset="utf-8">
+        new NodecopterStream(document.getElementById("droneStream"));
+    </script>
+</body>
+</html>

example/express/app.js

@@ -0,0 +1,33 @@
+var express = require('express')
+  , routes = require('./routes')
+  , app = express()
+  , path = require('path')
+  , server = require("http").createServer(app)
+  ;
+
+
+app.configure(function () {
+    app.set('views', __dirname + '/views');
+    app.set('view engine', 'jade', { pretty: true });
+    app.use(express.favicon());
+    app.use(express.logger('dev'));
+    app.use(app.router);
+    app.use(express.static(path.join(__dirname, 'public')));
+});
+
+app.configure('development', function () {
+    app.use(express.errorHandler());
+    app.locals.pretty = true;
+});
+
+app.get('/', routes.index);
+
+/*
+ * Important:
+ *
+ * pass in the server object to listen, not the express app
+ * call 'listen' on the server, not the express app
+ */
+// should be require("dronestream").listen(server);
+require("../../index").listen(server);
+server.listen(3000);

example/express/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "dronestream-example",
+  "version": "0.1.1",
+  "dependencies": {
+    "express": "3.0.x",
+    "jade": "*"
+  },
+  "scripts": {
+    "start": "node app"
+  },
+  "author": "Bernhard K. Weisshuhn <bkw@codingforce.com>",
+  "license": "BSD"
+}

example/express/views/index.jade

@@ -0,0 +1,22 @@
+extends layout
+
+block append head
+  script(type='text/javascript', src='/dronestream/nodecopter-client.js')
+
+-# for developing the client, use those url:s
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/sylvester.js')
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/glUtils.js')
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/util.js')
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/avc-codec.js')
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/avc.js')
+-# script(type='text/javascript', src='/dronestream/vendor/broadway/canvas.js')
+-# script(type='text/javascript', src='/dronestream/nodecopter-stream.js')
+-# concatenated version of client
+
+
+block append bodyscripts
+  script.
+    var copterStream = new NodecopterStream(document.querySelector('#dronestream'));
+
+block content
+  div#dronestream(width=640, height=360)

example/express/views/layout.jade

@@ -7,7 +7,6 @@ html
       title= title
       link(rel='stylesheet', href='/css/normalize.min.css')
       link(rel='stylesheet', href='/css/style.css')
-      script(src='/js/vendor/h5bp/modernizr-2.6.1-respond-1.1.0.min.js')
   body
     div.header-container
       header.wrapper.clearfix

index.js

@@ -0,0 +1 @@
+module.exports = require("./lib/server");

lib/server.js

@@ -0,0 +1,56 @@
+/*
+ * Drone Stream listen:
+ * Takes a) a port number or b) a server object (node http or express, etc);
+ */
+var staticDir = 'dronestream',
+    check = new RegExp('^/' + staticDir, 'i'),
+    dist = __dirname + '/../dist';
+
+module.exports.listen = function listen(server, options) {
+    'use strict';
+    var port, oldHandlers;
+
+    if (typeof server === 'number') {
+        port = server;
+        server = require('http').createServer();
+        server.listen(port);
+    }
+
+    /*
+     * Serving up the static files needed
+     */
+    oldHandlers = server.listeners('request').splice(0);
+    server.removeAllListeners('request');
+
+    server.on('request', function (req, res) {
+        var i = 0;
+        if (handler(req, res)) {
+            return;
+        }
+
+        for (; i < oldHandlers.length; ++i) {
+            oldHandlers[i].call(server, req, res);
+        }
+    });
+
+    function handler(req, res, next) {
+        var path, read;
+        if (!check.test(req.url)) {
+            return false;
+        }
+        path = dist + req.url.replace(check, '');
+        console.log('checking static path: %s', path);
+        read = require('fs').createReadStream(path);
+        read.pipe(res);
+        read.on('error', function (e) {
+            console.log('Stream error: %s', e.message);
+        });
+
+        return true;
+    }
+
+    /*
+     * Connecting stream + websocket server
+     */
+    return require('./stream').attach(server, options);
+};

lib/stream.js

@@ -0,0 +1,62 @@
+/*jshint node:true*/
+/*
+ * Sets up a real stream + attaches it to a server
+ */
+module.exports.attach = function droneStream(server, options) {
+    'use strict';
+    var WebSocketServer = require('ws').Server,
+        wss = new WebSocketServer({server: server, path: '/dronestream'}),
+        sockets = [],
+        Parser = require('./PaVEParser'),
+        arDrone = require('ar-drone');
+
+    options = options || {};
+    options.timeout = options.timeout || 4000;
+
+    function init() {
+
+        var tcpVideoStream, parser;
+
+        if (!options.tcpVideoStream) {
+            tcpVideoStream = new arDrone.Client.PngStream.TcpVideoStream(
+                options
+            );
+
+            console.log(
+                "Connecting to drone on %s", options.ip || "192.168.1.1"
+            );
+
+            tcpVideoStream.connect();
+            tcpVideoStream.on('error', function (err) {
+                console.log('There was an error: %s', err.message);
+                tcpVideoStream.end();
+                tcpVideoStream.emit("end");
+                init();
+            });
+        } else {
+            tcpVideoStream = options.tcpVideoStream;
+        }
+
+        parser = new Parser();
+        tcpVideoStream.on('data', function (data) {
+            parser.write(data);
+        });
+        parser.on('data', function (data) {
+            sockets.forEach(function (socket) {
+                socket.send(data, {binary: true});
+            });
+        });
+    }
+    init();
+
+    wss.on('connection', function (socket) {
+        sockets.push(socket);
+
+        socket.on("close", function () {
+            console.log("Closing socket");
+            sockets = sockets.filter(function (el) {
+                return el !== socket;
+            });
+        });
+    });
+};

package.json

@@ -1,11 +1,12 @@
 {
   "name": "dronestream",
   "description": "video live stream from your parrot ar.drone 2.0 to your browser in pure javascript",
-  "version": "0.2.0",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "git@github.com:bkw/node-dronestream.git"
   },
+  "main": "index",
   "keywords": [
     "drone",
     "nodecopter",
@@ -15,16 +16,24 @@
     "browser",
     "x264"
   ],
-  "scripts": {
-    "start": "node app"
-  },
   "dependencies": {
-    "express": "3.0.0rc5",
-    "jade": "*",
-    "ws": "~0.4.22",
-    "ar-drone": "0.0.3",
-    "buffy": "0.0.4"
+    "ws": "~0.4.27",
+    "ar-drone": "0.1.0",
+    "buffy": "0.0.5"
+  },
+  "devDependencies": {
+    "grunt": "~0.4.1",
+    "grunt-contrib-uglify": "~0.2.2",
+    "grunt-contrib-jshint": "~0.6.2",
+    "matchdep": "~0.1.2",
+    "grunt-contrib-concat": "~0.3.0"
   },
   "author": "Bernhard K. Weisshuhn <bkw@codingforce.com>",
+  "contributors": [
+    {
+      "name": "Karl Westin",
+      "email": "karl.westin@gmail.com"
+    }
+  ],
   "license": "BSD"
 }

public/js/nodecopter-stream.js

@@ -1,84 +0,0 @@
-/*jshint browser:true */
-/*global Avc:true, YUVWebGLCanvas: true, Size: true */
-(function (window, document, undefined) {
-    'use strict';
-    var NS,
-        socket,
-        avc,
-        webGLCanvas,
-        width,
-        height;
-
-    function setupAvc() {
-        avc = new Avc();
-        avc.configure({
-            filter: 'original',
-            filterHorLuma: 'optimized',
-            filterVerLumaEdge: 'optimized',
-            getBoundaryStrengthsA: 'optimized'
-        });
-        avc.onPictureDecoded = handleDecodedFrame;
-    }
-
-    function handleNalUnits(message) {
-        avc.decode(new Uint8Array(message.data));
-    }
-
-    function handleDecodedFrame(buffer, width, height) {
-        var lumaSize = width * height,
-            chromaSize = lumaSize >> 2;
-        webGLCanvas.YTexture.fill(buffer.subarray(0, lumaSize));
-        webGLCanvas.UTexture.fill(buffer.subarray(lumaSize, lumaSize + chromaSize));
-        webGLCanvas.VTexture.fill(buffer.subarray(lumaSize + chromaSize, lumaSize + 2 * chromaSize));
-        webGLCanvas.drawScene();
-    }
-
-    function setupCanvas(div) {
-        var canvas = document.createElement('canvas');
-
-        width = div.attributes.width ? div.attributes.width.value : 640;
-        height = div.attributes.height ? div.attributes.height.value : 360;
-
-        canvas.width = width;
-        canvas.height = height;
-        canvas.style.backgroundColor = "#333333";
-        div.appendChild(canvas);
-
-        webGLCanvas = new YUVWebGLCanvas(canvas, new Size(width, height));
-    }
-
-
-    NS = function (div) {
-        setupCanvas(div);
-        setupAvc();
-
-        socket = new WebSocket(
-             'ws://' +
-            window.document.location.hostname + ':' +
-            window.document.location.port
-        );
-        socket.binaryType = 'arraybuffer';
-        socket.onmessage = handleNalUnits;
-    };
-
-    NS.prototype.getImageData = function (rgbaData) {
-        var gl = webGLCanvas.gl;
-
-        gl.readPixels(
-            0, 0, width, height,
-            gl.RGBA, gl.UNSIGNED_BYTE,
-            rgbaData
-        );
-        // WebGL returns pixels upside down.
-        // Instead of wasting time by vertically flipping it now,
-        // we just leave it like it is and invert the coordinates later:
-        return;
-    };
-
-    NS.prototype.getCanvas = function () {
-        return webGLCanvas.canvas;
-    };
-
-    window.NodecopterStream = NS;
-
-}(window, document, undefined));

public/js/nodecopter-track.js

@@ -1,156 +0,0 @@
-/*jshint browser:true */
-/*global jsfeat:true console:true */
-(function (window, document, undefined) {
-    'use strict';
-    var NodecopterTrack,
-        lastTime;
-
-    function schedule (callback, element) {
-          var requestAnimationFrame =
-              window.requestAnimationFrame        ||
-              window.webkitRequestAnimationFrame  ||
-              window.mozRequestAnimationFrame     ||
-              window.oRequestAnimationFrame       ||
-              window.msRequestAnimationFrame      ||
-              function(callback, element) {
-                  var currTime = new Date().getTime(),
-                      timeToCall = Math.max(0, 16 - (currTime - lastTime)),
-                      id = window.setTimeout(function() {
-                            callback(currTime + timeToCall);
-                      }, timeToCall);
-                  lastTime = currTime + timeToCall;
-                  return id;
-              };
-
-          return requestAnimationFrame.call(window, callback, element);
-    }
-
-
-    var relMouseCoords = function (event) {
-        var totalOffsetX = 0,
-            totalOffsetY = 0,
-            canvasX = 0,
-            canvasY = 0,
-            currentElement = this;
-
-        do {
-            totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
-            totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
-        } while (currentElement = currentElement.offsetParent);
-
-        canvasX = event.pageX - totalOffsetX;
-        canvasY = event.pageY - totalOffsetY;
-        return {x:canvasX, y:canvasY};
-    };
-
-
-    NodecopterTrack = function (copterStream, imgId) {
-        var tracker = this;
-        this.curr_img_pyr = new jsfeat.pyramid_t(3);
-        this.prev_img_pyr = new jsfeat.pyramid_t(3);
-        this.point_count  = 0;
-        this.point_status = new Uint8Array(1);
-        this.prev_xy      = new Float32Array(2);
-        this.curr_xy      = new Float32Array(2);
-        this.copterStream = copterStream;
-        this.canvas       = copterStream.getCanvas();
-        this.rgbaData     = new Uint8Array(
-            this.canvas.width * this.canvas.height * 4
-        ); // RGBA
-        this.crosshairs   = document.querySelector(imgId);
-
-        this.curr_img_pyr.allocate(
-            this.canvas.width, this.canvas.height, jsfeat.U8_t | jsfeat.C1_t
-        );
-        this.prev_img_pyr.allocate(
-            this.canvas.width, this.canvas.height, jsfeat.U8_t | jsfeat.C1_t
-        );
-
-        this.canvas.addEventListener('click', function(event) {
-            tracker.canvasClickHandler(event);
-        }, false);
-        HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords;
-        // this.canvas.prototype.relMouseCoords = relMouseCoords;
-
-        this.update();
-    };
-
-    NodecopterTrack.prototype.update = function () {
-        var _pt_xy, _pyr,
-            tracker = this;
-
-        schedule(function () {
-            tracker.update();
-        });
-
-        if (! this.point_count) {
-            this.crosshairs.style.display = 'none';
-            return;
-        }
-
-        _pt_xy = this.prev_xy;
-        _pyr = this.prev_img_pyr;
-
-        this.prev_xy = this.curr_xy;
-        this.curr_xy = _pt_xy;
-
-        this.prev_img_pyr = this.curr_img_pyr;
-        this.curr_img_pyr = _pyr; // reuse old pyramid data structure
-
-        this.copterStream.getImageData(this.rgbaData);
-        jsfeat.imgproc.grayscale(
-            this.rgbaData,
-            this.curr_img_pyr.data[0].data
-        );
-
-        // optional: enhance contrast:
-        jsfeat.imgproc.equalize_histogram(
-            this.curr_img_pyr.data[0].data,
-            this.curr_img_pyr.data[0].data
-        );
-
-        this.curr_img_pyr.build(this.curr_img_pyr.data[0], true);
-
-        jsfeat.optical_flow_lk.track(
-            this.prev_img_pyr,
-            this.curr_img_pyr,
-            this.prev_xy,
-            this.curr_xy,
-            1,
-            50,            // win_size
-            30,            // max_iterations
-            this.point_status,
-            0.01,          // epsilon,
-            0.001          // min_eigen
-        );
-
-        if (this.point_status[0] == 1) {
-            this.crosshairs.style.left = (this.curr_xy[0] - 83) + 'px';
-            this.crosshairs.style.top = (
-                this.canvas.height - 83 - this.curr_xy[1]
-            ) + 'px';
-            this.crosshairs.style.display = 'block';
-        } else {
-            this.point_count = 0;
-            console.log('lost target');
-        }
-    };
-
-    NodecopterTrack.prototype.canvasClickHandler = function (e) {
-        var coords = this.canvas.relMouseCoords(e);
-        if (
-            (coords.x > 0) &&
-            (coords.y > 0) &&
-            (coords.x < this.canvas.width) &&
-            (coords.y < this.canvas.height)
-        ) {
-            this.curr_xy[0] = coords.x;
-            this.curr_xy[1] = this.canvas.height - coords.y;
-            this.point_count = 1;
-        }
-        console.log('Click:', coords);
-    };
-
-    window.NodecopterTrack = NodecopterTrack;
-
-}(window, document, undefined));

views/index.jade

@@ -1,22 +0,0 @@
-extends layout
-
-block append head
-  script(type='text/javascript', src='/js/vendor/broadway/sylvester.js')
-  script(type='text/javascript', src='/js/vendor/broadway/glUtils.js')
-  script(type='text/javascript', src='/js/vendor/broadway/util.js')
-  script(type='text/javascript', src='/js/vendor/broadway/avc-codec.js')
-  script(type='text/javascript', src='/js/vendor/broadway/avc.js')
-  script(type='text/javascript', src='/js/vendor/broadway/canvas.js')
-  script(type='text/javascript', src='/js/vendor/jsfeat/jsfeat-min.js')
-  script(type='text/javascript', src='/js/nodecopter-stream.js')
-  script(type='text/javascript', src='/js/nodecopter-track.js')
-
-block append bodyscripts
-  script
-    'use strict';
-    var copterStream = new NodecopterStream(document.querySelector('#dronestream'));
-    var tracker = new NodecopterTrack(copterStream, '#sniper');
-
-block content
-  div#dronestream(width=640, height=360, style="position:relative")
-    img#sniper(src="images/sniper.png", style="position:absolute; opacity:0.6")