Merge pull request #369 from LasseRafn/patch-1

Update README.md

.babelrc

@@ -0,0 +1,33 @@
+{
+  "plugins": [
+    "check-es2015-constants",
+    "transform-es2015-arrow-functions",
+    "transform-es2015-block-scoped-functions",
+    "transform-es2015-block-scoping",
+    ["transform-es2015-classes", { "loose": true }],
+    ["transform-es2015-computed-properties", { "loose": true }],
+    ["transform-es2015-destructuring", { "loose": true }],
+    ["transform-es2015-for-of", { "loose": true }],
+    "transform-es2015-function-name",
+    "transform-es2015-literals",
+
+    "transform-es2015-object-super",
+    "transform-es2015-parameters",
+    "transform-es2015-shorthand-properties",
+    ["transform-es2015-spread", { "loose": true }],
+    "transform-es2015-sticky-regex",
+    ["transform-es2015-template-literals", { "loose": true }],
+    "transform-es2015-unicode-regex",
+    "transform-es2015-typeof-symbol",
+    "transform-object-rest-spread",
+    "lodash"
+],
+"env": {
+    "commonjs": {
+      "plugins": [
+          ["transform-es2015-modules-commonjs", { "loose": true }],
+          "add-module-exports"
+      ]
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,85 @@
+{
+    "settings" : {
+    "ecmascript": 6,
+    "jsx": true
+    },
+    "env": {
+        "browser": true,
+        "node": true
+    },
+    "ecmaFeatures": {
+        "blockBindings": true,
+        "forOf": true,
+        "defaultParams": true,
+        "globalReturn": false,
+        "modules": true,
+        "objectLiteralShorthandMethods": true,
+        "objectLiteralShorthandProperties": true,
+        "templateStrings": true,
+        "spread": true,
+        "jsx": true,
+        "arrowFunctions": true,
+        "classes": true,
+        "destructuring": true,
+        "objectLiteralComputedProperties": true
+    },
+    "globals": {
+        "ENV": true,
+        "beforeEach": true,
+        "describe": true,
+        "it": true,
+        "expect": true,
+        "sinon": true
+    },
+    "rules": {
+        "no-unused-expressions": 1,
+        "no-extra-boolean-cast": 1,
+        "no-multi-spaces": 2,
+        "no-underscore-dangle": 0,
+        "comma-dangle": 2,
+        "camelcase": 0,
+        "curly": 2,
+        "eqeqeq": 2,
+        "guard-for-in": 2,
+        "wrap-iife": 0,
+        "no-use-before-define": [1, "nofunc"],
+        "new-cap": 2,
+        "quotes": 0,
+        "strict": 0,
+        "no-caller": 2,
+        "no-empty": 1,
+        "no-new": 2,
+        "no-plusplus": 0,
+        "no-unused-vars": 1,
+        "no-trailing-spaces": 2,
+
+        // STYLE
+        "max-params": [2, 7],
+        "key-spacing": [1, {
+            beforeColon: false,
+            afterColon: true
+        }],
+        "indent": [2, 4],
+        "brace-style": [2, "1tbs"],
+        "comma-spacing": [2, {before: false, after: true}],
+        "comma-style": [2, "last"],
+        "consistent-this": [1, "self"],
+        "eol-last": 0,
+        "new-parens": 2,
+        "no-array-constructor": 2,
+        "no-mixed-spaces-and-tabs": 2,
+        "no-multiple-empty-lines": 2,
+        "semi-spacing": 2,
+        "dot-notation": 2,
+        "no-spaced-func": 1,
+        "no-shadow": 2,
+        "no-undef": 2,
+        "padded-blocks": [2, "never"],
+        "semi": [2, "always"],
+        "space-after-keywords": [2, "always"],
+        "space-infix-ops": 2,
+        "max-len" : [1, 120],
+        "consistent-return": 2,
+        "yoda": 2
+    }
+}

.gitignore

@@ -4,3 +4,4 @@ coverage/
 .project
 _site/
 .idea/
+.vscode/

Gruntfile.js

@@ -1,8 +1,7 @@
 module.exports = function(grunt) {
-
     // Project configuration.
     grunt.initConfig({
-        pkg : grunt.file.readJSON('package.json'),
+        pkg: grunt.file.readJSON('package.json'),
         karma: {
             unit: {
                 configFile: 'karma.conf.js'
@@ -10,76 +9,13 @@ module.exports = function(grunt) {
             integration: {
                 configFile: 'karma-integration.conf.js'
             }
-        },
-        uglify : {
-            options : {
-                banner : '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
-                preserveComments: 'some'
-            },
-            build : {
-                src : 'dist/<%= pkg.name %>.js',
-                dest : 'dist/<%= pkg.name %>.min.js'
-            }
-        },
-        jshint : {
-            all : ['Gruntfile.js', 'src/*.js']
-        },
-        requirejs : {
-            compile : {
-                options : {
-                    almond : true,
-                    wrap : {
-                        startFile : 'build/start.frag',
-                        endFile : 'build/end.frag'
-                    },
-                    "baseUrl" : "src",
-                    "name" : "quagga",
-                    "useStrict": true,
-                    "out" : "dist/quagga.js",
-                    "include" : ['quagga'],
-                    "optimize" : "none",
-                    "findNestedDependencies" : true,
-                    "skipSemiColonInsertion" : true,
-
-                    "shim" : {
-                        "typedefs" : {
-                            "deps" : [],
-                            "exports" : "typedefs"
-                        },
-                        "glMatrix" : {
-                            "deps" : ["typedefs"],
-                            "exports" : "glMatrix"
-                        },
-                        "glMatrixAddon" : {
-                            "deps" : ["glMatrix"],
-                            "exports" : "glMatrixAddon"
-                        }
-                    },
-
-                    "paths" : {
-                        "typedefs" : "typedefs",
-                        "glMatrix" : "vendor/glMatrix",
-                        "glMatrixAddon" : "glMatrixAddon"
-                    }
-                }
-            }
         }
     });
 
-    // Load the plugin that provides the "uglify" task.
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-
-    grunt.loadNpmTasks('grunt-requirejs');
     grunt.loadNpmTasks('grunt-karma');
 
     grunt.loadTasks('tasks');
 
-    grunt.registerTask('build', ['check', 'requirejs']);
-    grunt.registerTask('check', ['jshint']);
-    grunt.registerTask('dist', ['build', 'uglify', 'uglyasm']);
     grunt.registerTask('test', ['karma']);
     grunt.registerTask('integrationtest', ['karma:integration']);
-
-    grunt.registerTask('default', ['build']);
 };

README.md

@@ -1,19 +1,28 @@
 quaggaJS
 ========
 
-- [Changelog](#changelog) (2015-07-08)
+[![Join the chat at https://gitter.im/quaggaJS/Lobby](https://badges.gitter.im/quaggaJS/Lobby.svg)](https://gitter.im/quaggaJS/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+
+- [Changelog](#changelog) (2017-06-07)
+- [Browser Support](#browser-support)
+- [Installing](#installing)
+- [Getting Started](#gettingstarted)
+- [API](#api)
+- [Configuration](#configobject)
+- [Tips & Tricks](#tipsandtricks)
+- [Sponsors](#sponsors)
 
 ## What is QuaggaJS?
 
 QuaggaJS is a barcode-scanner entirely written in JavaScript supporting real-
 time localization and decoding of various types of barcodes such as __EAN__,
-__CODE 128__, __CODE 39__, __EAN 8__, __UPC-A__, __UPC-C__ and  __CODABAR__.
-The library is also capable of using `getUserMedia` to get direct access to
-the user's camera stream. Although the code relies on heavy image-processing
-even recent smartphones are capable of locating and decoding barcodes in
-real-time.
+__CODE 128__, __CODE 39__, __EAN 8__, __UPC-A__, __UPC-C__, __I2of5__,
+__2of5__, __CODE 93__ and __CODABAR__. The library is also capable of using
+`getUserMedia` to get direct access to the user's camera stream. Although the
+code relies on heavy image-processing even recent smartphones are capable of
+locating and decoding barcodes in real-time.
 
-Try some [examples](http://serratus.github.io/quaggaJS/examples) and check out
+Try some [examples](https://serratus.github.io/quaggaJS/examples) and check out
 the blog post ([How barcode-localization works in QuaggaJS][oberhofer_co_how])
 if you want to dive deeper into this topic.
 
@@ -30,25 +39,66 @@ invariant to scale and rotation, whereas other libraries require the barcode to
 be aligned with the viewport.
 
 
-## Requirements
+## <a name="browser-support">Browser Support</a>
 
-In order to take full advantage of quaggaJS, the browser needs to support the
-`getUserMedia` API which is already implemented in recent versions of Firefox,
-Chrome and Opera. The API is also available on their mobile counterparts
-installed on Android. Safari and IE do not allow the access to the camera yet,
-neither on desktop, nor on mobile. You can check [caniuse][caniuse_getusermedia]
-for updates.
+Quagga makes use of many modern Web-APIs which are not implemented by all
+browsers yet. There are two modes in which Quagga operates: 1. analyzing static
+images and 2. using a camera to decode the images from a live-stream. The latter
+requires the presence of the MediaDevices API. You can track the compatibility
+of the used Web-APIs for each mode:
 
-In cases where real-time decoding is not needed, or the platform does not
-support `getUserMedia` QuaggaJS is also capable of decoding image-files using
-the File API or other URL sources.
+- [Static Images](http://caniuse.com/#feat=webworkers,canvas,typedarrays,bloburls,blobbuilder)
+- [Live Stream](http://caniuse.com/#feat=webworkers,canvas,typedarrays,bloburls,blobbuilder,stream)
 
-## Getting Started
+### Static Images
 
-You can simply include `dist/quagga.min.js` in your project and you are ready
-to go.
+The following APIs need to be implemented in your browser:
+- [webworkers](http://caniuse.com/#feat=webworkers)
+- [canvas](http://caniuse.com/#feat=canvas)
+- [typedarrays](http://caniuse.com/#feat=typedarrays)
+- [bloburls](http://caniuse.com/#feat=bloburls)
+- [blobbuilder](http://caniuse.com/#feat=blobbuilder)
+
+### Live Stream
+
+In addition to the APIs mentioned above:
+- [MediaDevices](http://caniuse.com/#feat=stream)
+
+__Important:__ Accessing `getUserMedia` requires a secure origin in most
+browsers, meaning that `http://` can only be used on `localhost`. All other
+hostnames need to be served via `https://`. You can find more information in the
+[Chrome M47 WebRTC Release Notes](https://groups.google.com/forum/#!topic/discuss-webrtc/sq5CVmY69sc).
 
-If you want to keep your project modular, you can also install QuaggaJS via npm:
+### Feature-detection of getUserMedia
+
+Every browser seems to differently implement the `mediaDevices.getUserMedia`
+API. Therefore it's highly recommended to include
+[webrtc-adapter](https://github.com/webrtc/adapter) in your project.
+
+Here's how you can test your browser's capabilities:
+
+```javascript
+if (navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') {
+  // safely access `navigator.mediaDevices.getUserMedia`
+}
+```
+
+The above condition evaluates to:
+
+| Browser       | result  |
+| ------------- |:-------:|
+| Edge          | `true`  |
+| Chrome        | `true`  |
+| Firefox       | `true`  |
+| IE 11         | `false` |
+| Safari iOS    | `true` |
+
+## <a name="installing">Installing</a>
+
+QuaggaJS can be installed using __npm__, __bower__, or by including it with
+the __script__ tag.
+
+### NPM
 
 ```console
 > npm install quagga
@@ -57,25 +107,57 @@ If you want to keep your project modular, you can also install QuaggaJS via npm:
 And then import it as dependency in your project:
 
 ```javascript
-var quagga = require('quagga');
+import Quagga from 'quagga'; // ES6
+const Quagga = require('quagga').default; // Common JS (important: default)
 ```
 
+Currently, the full functionality is only available through the browser. When
+using QuaggaJS within __node__, only file-based decoding is available. See the
+example for [node_examples](#node-example).
+
+### Bower
+
+You can also install QuaggaJS through __bower__:
+
+```console
+> bower install quagga
+```
+
+### Script-Tag Anno 1998
+
+You can simply include `dist/quagga.min.js` in your project and you are ready
+to go. The script exposes the library on the global namespace under `Quagga`.
+
+
+## <a name="gettingstarted">Getting Started</a>
+
 For starters, have a look at the [examples][github_examples] to get an idea
 where to go from here.
 
+
 ## <a name="Building">Building</a>
 
 You can build the library yourself by simply cloning the repo and typing:
 
 ```console
 > npm install
-> grunt dist
+> npm run build
 ```
 
-This grunt task builds a non optimized version `quagga.js` and a minified
+This npm script builds a non optimized version `quagga.js` and a minified
 version `quagga.min.js` and places both files in the `dist` folder.
+Additionally, a `quagga.map` source-map is placed alongside these files. This
+file is only valid for the non-uglified version `quagga.js` because the
+minified version is altered after compression and does not align with the map
+file any more.
 
-## API
+### Node
+
+The code in the `dist` folder is only targeted to the browser and won't work in
+node due to the dependency on the DOM. For the use in node, the `build` command
+also creates a `quagga.js` file in the `lib` folder.
+
+## <a name="api">API</a>
 
 You can check out the [examples][github_examples] to get an idea of how to
 use QuaggaJS. Basically the library exposes the following API:
@@ -91,11 +173,17 @@ may be the `inputStream.type` is set to `LiveStream`, but the browser does
 not support this API, or simply if the user denies the permission to use the
 camera.
 
+If you do not specify a target, QuaggaJS would look for an element that matches
+the CSS selector `#interactive.viewport` (for backwards compatibility).
+`target` can be a string (CSS selector matching one of your DOM node) or a DOM
+node.
+
 ```javascript
 Quagga.init({
     inputStream : {
       name : "Live",
-      type : "LiveStream"
+      type : "LiveStream",
+      target: document.querySelector('#yourElement')    // Or '#yourElement' (optional)
     },
     decoder : {
       readers : ["code_128_reader"]
@@ -141,6 +229,16 @@ In contrast to the calls described above, this method does not rely on
 `getUserMedia` and operates on a single image instead. The provided callback
 is the same as in `onDetected` and contains the result `data` object.
 
+### Quagga.offProcessed(handler)
+
+In case the `onProcessed` event is no longer relevant, `offProcessed` removes
+the given `handler` from the event-queue.
+
+### Quagga.offDetected(handler)
+
+In case the `onDetected` event is no longer relevant, `offDetected` removes
+the given `handler` from the event-queue.
+
 ## <a name="resultobject">The result object</a>
 
 The callbacks passed into `onProcessed`, `onDetected` and `decodeSingle`
@@ -214,47 +312,204 @@ empty.
 }
 ```
 
-## <a name="configobject">Config</a>
+## <a name="configobject">Configuration</a>
 
-The default `config` object is set as followed:
+The configuration that ships with QuaggaJS covers the default use-cases and can
+be fine-tuned for specific requirements.
+
+The configuration is managed by the `config` object defining the following
+high-level properties:
 
 ```javascript
 {
-  inputStream: { name: "Live",
-      type: "LiveStream",
-      constraints: {
-          width: 640,
-          height: 480,
-          facing: "environment"
-      },
-      area: { // defines rectangle of the detection/localization area
-          top: "0%",    // top offset
-          right: "0%",  // right offset
-          left: "0%",   // left offset
-          bottom: "0%"  // bottom offset
-      },
-      singleChannel: false // true: only the red color-channel is read
-  },
-  tracking: false,
-  debug: false,
-  controls: false,
-  locate: true,
   numOfWorkers: 4,
-  visual: {
-    show: true
+  locate: true,
+  inputStream: {...},
+  frequency: 10,
+  decoder:{...},
+  locator: {...},
+  debug: false,
+}
+```
+
+### numOfWorkers
+
+QuaggaJS supports web-workers out of the box and runs with `4` workers in its
+default configuration. The number should align with the number of cores
+available in your targeted devices.
+
+In case you don't know the number upfront, or if the variety of devices is
+too big, you can either use `navigator.hardwareConcurrency` (see
+[here](https://wiki.whatwg.org/wiki/Navigator_HW_Concurrency)) where available
+or make use of [core-estimator](https://github.com/oftn/core-estimator).
+
+### locate
+
+One of the main features of QuaggaJS is its ability to locate a barcode in a
+given image. The `locate` property controls whether this feature is turned on
+(default) or off.
+
+Why would someone turn this feature off? Localizing a barcode is a
+computationally expensive operation and might not work properly on some
+devices. Another reason would be the lack of auto-focus producing blurry
+images which makes the localization feature very unstable.
+
+However, even if none of the above apply, there is one more case where it might
+be useful to disable `locate`: If the orientation, and/or the approximate
+position of the barcode is known, or if you want to guide the user through a
+rectangular outline. This can increase performance and robustness at the same
+time.
+
+### inputStream
+
+The `inputStream` property defines the sources of images/videos within QuaggaJS.
+
+```javascript
+{
+  name: "Live",
+  type: "LiveStream",
+  constraints: {
+    width: 640,
+    height: 480,
+    facingMode: "environment",
+    deviceId: "7832475934759384534"
   },
-  decoder:{
-    drawBoundingBox: false,
-    showFrequency: false,
-    drawScanline: true,
-    showPattern: false,
-    readers: [
-      'code_128_reader'
-    ]
+  area: { // defines rectangle of the detection/localization area
+    top: "0%",    // top offset
+    right: "0%",  // right offset
+    left: "0%",   // left offset
+    bottom: "0%"  // bottom offset
   },
-  locator: {
-    halfSample: true,
-    patchSize: "medium", // x-small, small, medium, large, x-large
+  singleChannel: false // true: only the red color-channel is read
+}
+```
+
+First, the `type` property can be set to three different values:
+`ImageStream`, `VideoStream`, or `LiveStream` (default) and should be selected
+depending on the use-case. Most probably, the default value is sufficient.
+
+Second, the `constraint` key defines the physical dimensions of the input image
+and additional properties, such as `facingMode` which sets the source of the
+user's camera in case of multiple attached devices. Additionally, if required,
+the `deviceId` can be set if the selection of the camera is given to the user.
+This can be easily achieved via
+[MediaDevices.enumerateDevices()][enumerateDevices]
+
+Thirdly, the `area` prop restricts the decoding area of the image. The values
+are given in percentage, similar to the CSS style property when using
+`position: absolute`. This `area` is also useful in cases the `locate` property
+is set to `false`, defining the rectangle for the user.
+
+The last key `singleChannel` is only relevant in cases someone wants to debug
+erroneous behavior of the decoder. If set to `true` the input image's red
+color-channel is read instead of calculating the gray-scale values of the
+source's RGB. This is useful in combination with the `ResultCollector` where
+the gray-scale representations of the wrongly identified images are saved.
+
+### frequency
+
+This top-level property controls the scan-frequency of the video-stream. It's
+optional and defines the maximum number of scans per second. This renders
+useful for cases where the scan-session is long-running and resources such as
+CPU power are of concern.
+
+### decoder
+
+QuaggaJS usually runs in a two-stage manner (`locate` is set to `true`) where,
+after the barcode is located, the decoding process starts. Decoding is the
+process of converting the bars into its true meaning. Most of the configuration
+options within the `decoder` are for debugging/visualization purposes only.
+
+```javascript
+{
+  readers: [
+    'code_128_reader'
+  ],
+  debug: {
+      drawBoundingBox: false,
+      showFrequency: false,
+      drawScanline: false,
+      showPattern: false
+  }
+  multiple: false
+}
+```
+
+The most important property is `readers` which takes an array of types of
+barcodes which should be decoded during the session. Possible values are:
+
+- code_128_reader (default)
+- ean_reader
+- ean_8_reader
+- code_39_reader
+- code_39_vin_reader
+- codabar_reader
+- upc_reader
+- upc_e_reader
+- i2of5_reader
+- 2of5_reader
+- code_93_reader
+
+Why are not all types activated by default? Simply because one should
+explicitly define the set of barcodes for their use-case. More decoders means
+more possible clashes, or false-positives. One should take care of the order
+the readers are given, since some might return a value even though it is not
+the correct type (EAN-13 vs. UPC-A).
+
+The `multiple` property tells the decoder if it should continue decoding after
+finding a valid barcode.  If multiple is set to `true`, the results will be
+returned as an array of result objects.  Each object in the array will have a
+`box`, and may have a `codeResult` depending on the success of decoding the
+individual box.
+
+The remaining properties `drawBoundingBox`, `showFrequency`, `drawScanline` and
+`showPattern` are mostly of interest during debugging and visualization.
+
+#### <a name="ean_extended">Enabling extended EAN</a>
+
+The default setting for `ean_reader` is not capable of reading extensions such
+as [EAN-2](https://en.wikipedia.org/wiki/EAN_2) or
+[EAN-5](https://en.wikipedia.org/wiki/EAN_5). In order to activate those
+supplements you have to provide them in the configuration as followed:
+
+```javascript
+decoder: {
+    readers: [{
+        format: "ean_reader",
+        config: {
+            supplements: [
+                'ean_5_reader', 'ean_2_reader'
+            ]
+        }
+    }]
+}
+```
+
+Beware that the order of the `supplements` matters in such that the reader stops
+decoding when the first supplement was found. So if you are interested in EAN-2
+and EAN-5 extensions, use the order depicted above.
+
+It's important to mention that, if supplements are supplied, regular EAN-13
+codes cannot be read any more with the same reader. If you want to read EAN-13
+with and without extensions you have to add another `ean_reader` reader to the
+configuration.
+
+### locator
+
+The `locator` config is only relevant if the `locate` flag is set to `true`.
+It controls the behavior of the localization-process and needs to be adjusted
+for each specific use-case. The default settings are simply a combination of
+values which worked best during development.
+
+Only two properties are relevant for the use in Quagga (`halfSample` and
+`patchSize`) whereas the rest is only needed for development and debugging.
+
+
+```javascript
+{
+  halfSample: true,
+  patchSize: "medium", // x-small, small, medium, large, x-large
+  debug: {
     showCanvas: false,
     showPatches: false,
     showFoundPatches: false,
@@ -271,6 +526,23 @@ The default `config` object is set as followed:
 }
 ```
 
+The `halfSample` flag tells the locator-process whether it should operate on an
+image scaled down (half width/height, quarter pixel-count ) or not. Turning
+`halfSample` on reduces the processing-time significantly and also helps
+finding a barcode pattern due to implicit smoothing.
+It should be turned off in cases where the barcode is really small and the full
+resolution is needed to find the position. It's recommended to keep it turned
+on and use a higher resolution video-image if needed.
+
+The second property `patchSize` defines the density of the search-grid. The
+property accepts strings of the value `x-small`, `small`, `medium`, `large` and
+`x-large`. The `patchSize` is proportional to the size of the scanned barcodes.
+If you have really large barcodes which can be read close-up, then the use of
+`large` or `x-large` is recommended. In cases where the barcode is further away
+from the camera lens (lack of auto-focus, or small barcodes) then it's advised
+to set the size to `small` or even `x-small`. For the latter it's also
+recommended to crank up the resolution in order to find a barcode.
+
 ## Examples
 
 The following example takes an image `src` as input and prints the result on the
@@ -285,10 +557,72 @@ Quagga.decodeSingle({
     locate: true, // try to locate the barcode in the image
     src: '/test/fixtures/code_128/image-001.jpg' // or 'data:image/jpg;base64,' + data
 }, function(result){
-    console.log(result);
+    if(result.codeResult) {
+        console.log("result", result.codeResult.code);
+    } else {
+        console.log("not detected");
+    }
 });
 ```
 
+### <a name="node-example">Using node</a>
+
+The following example illustrates the use of QuaggaJS within a node
+environment. It's almost identical to the browser version with the difference
+that node does not support web-workers out of the box. Therefore the config
+property `numOfWorkers` must be explicitly set to `0`.
+
+```javascript
+var Quagga = require('quagga').default;
+
+Quagga.decodeSingle({
+    src: "image-abc-123.jpg",
+    numOfWorkers: 0,  // Needs to be 0 when used within node
+    inputStream: {
+        size: 800  // restrict input-size to be 800px in width (long-side)
+    },
+    decoder: {
+        readers: ["code_128_reader"] // List of active readers
+    },
+}, function(result) {
+    if(result.codeResult) {
+        console.log("result", result.codeResult.code);
+    } else {
+        console.log("not detected");
+    }
+});
+```
+
+## <a name="tipsandtricks">Tips & Tricks</a>
+
+A growing collection of tips & tricks to improve the various aspects of Quagga.
+
+### Barcodes too small?
+
+Barcodes too far away from the camera, or a lens too close to the object
+result in poor recognition rates and Quagga might respond with a lot of
+false-positives.
+
+Starting in Chrome 59 you can now make use of `capabilities` and directly
+control the zoom of the camera. Head over to the
+[web-cam demo](https://serratus.github.io/quaggaJS/examples/live_w_locator.html)
+and check out the __Zoom__ feature.
+
+You can read more about those `capabilities` in
+[Let's light a torch and explore MediaStreamTrack's capabilities](https://www.oberhofer.co/mediastreamtrack-and-its-capabilities)
+
+### Video too dark?
+
+Dark environments usually result in noisy images and therefore mess with the
+recognition logic.
+
+Since Chrome 59 you can turn on/off the __Torch__ of our device and vastly
+improve the quality of the images. Head over to the
+[web-cam demo](https://serratus.github.io/quaggaJS/examples/live_w_locator.html)
+and check out the __Torch__ feature.
+
+To find out more about this feature [read on](https://www.oberhofer.co/mediastreamtrack-and-its-capabilities).
+
 ## Tests
 
 Unit Tests can be run with [Karma][karmaUrl] and written using
@@ -297,7 +631,7 @@ automatically generated in the coverage/ folder.
 
 ```console
 > npm install
-> grunt test
+> npm run test
 ```
 ## Image Debugging
 
@@ -365,8 +699,116 @@ calling ``decodeSingle`` with the same configuration as used during recording
 . In order to reproduce the exact same result, you have to make sure to turn
 on the ``singleChannel`` flag in the configuration when using ``decodeSingle``.
 
+## <a name="sponsors">Sponsors</a>
+
+- [Maintenance Connection Canada (Asset Pro Solutions Inc.](http://maintenanceconnection.ca/)
+
 ## <a name="changelog">Changelog</a>
 
+### 2017-06-07
+- Improvements
+  - added `muted` and `playsinline` to `<video/>` to make it work for Safari 11
+  Beta (even iOS)
+- Fixes
+  - Fixed  [example/live_w_locator.js](https://github.com/serratus/quaggaJS/blob/master/example/live_w_locator.js)
+
+### 2017-06-06
+- Features
+  - Support for Standard 2of5 barcodes (See
+      [\#194](https://github.com/serratus/quaggaJS/issues/194))
+  - Support for Code 93 barcodes (See
+      [\#194](https://github.com/serratus/quaggaJS/issues/195))
+  - Exposing `Quagga.CameraAccess.getActiveTrack()` to get access to the
+      currently used `MediaStreamTrack`
+    - Example can be viewed here: [example/live_w_locator.js](https://github.com/serratus/quaggaJS/blob/master/example/live_w_locator.js) and a [demo](https://serratus.github.io/quaggaJS/examples/live_w_locator.html)
+
+Take a look at the release-notes (
+    [0.12.0](https://github.com/serratus/quaggaJS/releases/tag/v0.12.0))
+
+### 2017-01-08
+- Improvements
+  - Exposing `CameraAccess` module to get access to methods like
+    `enumerateVideoDevices` and `getActiveStreamLabel`
+    (see `example/live_w_locator`)
+  - Update to webpack 2.2 (API is still unstable)
+
+### 2016-10-03
+- Fixes
+  - Fixed `facingMode` issue with Chrome >= 53 (see [#128](https://github.com/serratus/quaggaJS/issues/128))
+
+### 2016-08-15
+- Features
+  - Proper handling of EXIF orientation when using `Quagga.decodeSingle`
+  (see [#121](https://github.com/serratus/quaggaJS/issues/121))
+
+### 2016-04-24
+- Features
+  - EAN-13 extended codes can now be decoded (See
+      [\#71](https://github.com/serratus/quaggaJS/issues/71))
+
+Take a look at the release-notes (
+    [0.11.0](https://github.com/serratus/quaggaJS/releases/tag/v0.11.0))
+
+### 2016-04-19
+- Improvements
+  - Reducing false-positives for Code 128 barcodes (
+      addresses [\#104](https://github.com/serratus/quaggaJS/issues/104))
+
+### 2016-03-31
+Take a look at the release-notes (
+    [0.10.0](https://github.com/serratus/quaggaJS/releases/tag/v0.10.0))
+
+### 2016-02-18
+
+- Internal Changes
+  - Restructuring into meaningful folders
+  - Removing debug-code in production build
+
+
+### 2016-02-15
+Take a look at the release-notes (
+    [0.9.0](https://github.com/serratus/quaggaJS/releases/tag/v0.9.0))
+
+### 2015-11-22
+
+- Fixes
+  - Fixed inconsistencies for Code 128 decoding (See
+      [\#76](https://github.com/serratus/quaggaJS/issues/76))
+
+### 2015-11-15
+
+- Fixes
+  - Fixed inconsistency in Code 39 decoding
+  - added inline-source-map to quagga.js file
+
+### 2015-10-13
+Take a look at the release-notes ([0.8.0]
+(https://github.com/serratus/quaggaJS/releases/tag/v0.8.0))
+
+- Improvements
+  - Replaced RequireJS with webpack
+
+### 2015-09-15
+Take a look at the release-notes ([0.7.0]
+(https://github.com/serratus/quaggaJS/releases/tag/v0.7.0))
+
+- Features
+  - Added basic support for running QuaggaJS inside __node__ (see [example]
+  (#node-example))
+
+### 2015-08-29
+- Improvements
+  - Added support for Internet Explorer (only Edge+ supports `getUserMedia`)
+
+### 2015-08-13
+- Improvements
+  - Added `offProcessed` and `offDetected` methods for detaching event-
+  listeners from the event-queue.
+
+### 2015-07-29
+- Features
+  - Added basic support for [ITF][i2of5_wiki] barcodes (`i2of5_reader`)
+
 ### 2015-07-08
 - Improvements
   - Parameter tweaking to reduce false-positives significantly (for the
@@ -478,4 +920,6 @@ introduced to the API.
 [upc_wiki]: http://en.wikipedia.org/wiki/Universal_Product_Code
 [ean_8_wiki]: http://en.wikipedia.org/wiki/EAN-8
 [oberhofer_co_how]: http://www.oberhofer.co/how-barcode-localization-works-in-quaggajs/
-[github_examples]: http://serratus.github.io/quaggaJS/examples
+[github_examples]: https://serratus.github.io/quaggaJS/examples
+[i2of5_wiki]: https://en.wikipedia.org/wiki/Interleaved_2_of_5
+[enumerateDevices]: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/enumerateDevices

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "quagga",
-  "version": "0.6.13",
+  "version": "0.12.1",
   "description": "An advanced barcode-scanner written in JavaScript",
   "main": "dist/quagga.js",
   "ignore": [
@@ -58,6 +58,7 @@
     "code128",
     "code39",
     "codabar",
+    "i2of5",
     "upc",
     "getusermedia",
     "imageprocessing"

env/development.js

@@ -0,0 +1,5 @@
+module.exports = {
+    production: false,
+    development: true,
+    node: false
+};

env/node.js

@@ -0,0 +1,5 @@
+module.exports = {
+    production: true,
+    development: false,
+    node: true
+};

env/production.js

@@ -0,0 +1,5 @@
+module.exports = {
+    production: true,
+    development: false,
+    node: false
+};

example/css/fonts.css

@@ -1 +1 @@
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");

example/css/styles.css

@@ -1,79 +1,109 @@
 @charset "UTF-8";
-/* usual styles */
-/* LESS - http://lesscss.org style sheet */
-/* Palette color codes */
-/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
-/* Feel free to copy&paste color codes to your application */
-/* MIXINS */
-/* As hex codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* As RGBa codes */
-/* Main Primary color */
-/* Main Secondary color (1) */
-/* Main Secondary color (2) */
-/* Generated by Paletton.com ├é┬® 2002-2014 */
-/* http://paletton.com */
-@import url("http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
-/* line 1, ../sass/_viewport.scss */
+@import url("https://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600");
+
+body {
+  background-color: #FFF;
+  margin: 0px;
+  font-family: Ubuntu, sans-serif;
+  color: #1e1e1e;
+  font-weight: normal;
+  padding-top: 0;
+}
+
+h1, h2, h3, h4 {
+  font-family: "Cabin Condensed", sans-serif;
+}
+
+header {
+  background: #FFC600;
+  padding: 1em;
+}
+
+header .headline {
+  max-width: 640px;
+  margin: 0 auto;
+}
+
+header .headline h1 {
+  color: #FFDD69;
+  font-size: 3em;
+  margin-bottom: 0;
+}
+
+header .headline h2 {
+  margin-top: 0.2em;
+}
+
+footer {
+  background: #0A4DB7;
+  color: #6C9CE8;
+  padding: 1em 2em 2em;
+}
+
+#container {
+  width: 640px;
+  margin: 20px auto;
+  padding: 10px;
+}
+
 #interactive.viewport {
   width: 640px;
   height: 480px;
 }
 
-/* line 6, ../sass/_viewport.scss */
+
 #interactive.viewport canvas, video {
   float: left;
   width: 640px;
   height: 480px;
 }
-/* line 10, ../sass/_viewport.scss */
+
 #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
   margin-left: -640px;
 }
 
-/* line 16, ../sass/_viewport.scss */
 .controls fieldset {
   border: none;
+  margin: 0;
+  padding: 0;
 }
-/* line 19, ../sass/_viewport.scss */
+
 .controls .input-group {
   float: left;
 }
-/* line 21, ../sass/_viewport.scss */
+
 .controls .input-group input, .controls .input-group button {
   display: block;
 }
-/* line 25, ../sass/_viewport.scss */
+
 .controls .reader-config-group {
   float: right;
 }
-/* line 28, ../sass/_viewport.scss */
+
 .controls .reader-config-group label {
   display: block;
 }
-/* line 30, ../sass/_viewport.scss */
+
 .controls .reader-config-group label span {
-  width: 11rem;
+  width: 9rem;
   display: inline-block;
   text-align: right;
 }
-/* line 37, ../sass/_viewport.scss */
+
 .controls:after {
   content: '';
   display: block;
   clear: both;
 }
 
-/* line 44, ../sass/_viewport.scss */
+
 #result_strip {
   margin: 10px 0;
   border-top: 1px solid #EEE;
   border-bottom: 1px solid #EEE;
   padding: 10px 0;
 }
-/* line 50, ../sass/_viewport.scss */
+
 #result_strip > ul {
   padding: 0;
   margin: 0;
@@ -83,41 +113,41 @@
   overflow-y: hidden;
   white-space: nowrap;
 }
-/* line 59, ../sass/_viewport.scss */
+
 #result_strip > ul > li {
   display: inline-block;
   vertical-align: middle;
   width: 160px;
 }
-/* line 63, ../sass/_viewport.scss */
+
 #result_strip > ul > li .thumbnail {
   padding: 5px;
   margin: 4px;
   border: 1px dashed #CCC;
 }
-/* line 68, ../sass/_viewport.scss */
+
 #result_strip > ul > li .thumbnail img {
   max-width: 140px;
 }
-/* line 71, ../sass/_viewport.scss */
+
 #result_strip > ul > li .thumbnail .caption {
   white-space: normal;
 }
-/* line 73, ../sass/_viewport.scss */
+
 #result_strip > ul > li .thumbnail .caption h4 {
   text-align: center;
   word-wrap: break-word;
   height: 40px;
   margin: 0px;
 }
-/* line 83, ../sass/_viewport.scss */
+
 #result_strip > ul:after {
   content: "";
   display: table;
   clear: both;
 }
 
-/* line 7, ../sass/_overlay.scss */
+
 .scanner-overlay {
   display: none;
   width: 640px;
@@ -133,21 +163,21 @@
   -webkit-box-shadow: #333333 0px 4px 10px;
   box-shadow: #333333 0px 4px 10px;
 }
-/* line 20, ../sass/_overlay.scss */
+
 .scanner-overlay > .header {
   position: relative;
   margin-bottom: 14px;
 }
-/* line 23, ../sass/_overlay.scss */
+
 .scanner-overlay > .header h4, .scanner-overlay > .header .close {
   line-height: 16px;
 }
-/* line 26, ../sass/_overlay.scss */
+
 .scanner-overlay > .header h4 {
   margin: 0px;
   padding: 0px;
 }
-/* line 30, ../sass/_overlay.scss */
+
 .scanner-overlay > .header .close {
   position: absolute;
   right: 0px;
@@ -160,7 +190,7 @@
   cursor: pointer;
 }
 
-/* line 1, ../sass/_icons.scss */
+
 i.icon-24-scan {
   width: 24px;
   height: 24px;
@@ -172,11 +202,8 @@ i.icon-24-scan {
   vertical-align: text-top;
 }
 
-@media (min-width: 604px) and (max-width: 1024px) {
-  /* tablet styles */
-}
 @media (max-width: 603px) {
-  /* line 2, ../sass/phone/_core.scss */
+
   #container {
     width: 300px;
     margin: 10px auto;
@@ -184,46 +211,58 @@ i.icon-24-scan {
     -webkit-box-shadow: none;
     box-shadow: none;
   }
-  /* line 9, ../sass/phone/_core.scss */
+
   #container form.voucher-form input.voucher-code {
     width: 180px;
   }
 }
 @media (max-width: 603px) {
-  /* line 5, ../sass/phone/_viewport.scss */
+
+  .reader-config-group {
+    width: 100%;
+  }
+
+  .reader-config-group label > span {
+      width: 50%;
+  }
+
+  .reader-config-group label > select, .reader-config-group label > input {
+      max-width: calc(50% - 2px);
+  }
+
   #interactive.viewport {
     width: 300px;
     height: 300px;
     overflow: hidden;
   }
 
-  /* line 11, ../sass/phone/_viewport.scss */
+
   #interactive.viewport canvas, video {
     margin-top: -50px;
     width: 300px;
     height: 400px;
   }
-  /* line 15, ../sass/phone/_viewport.scss */
+
   #interactive.viewport canvas.drawingBuffer, video.drawingBuffer {
     margin-left: -300px;
   }
 
-  /* line 20, ../sass/phone/_viewport.scss */
+
   #result_strip {
     margin-top: 5px;
     padding-top: 5px;
   }
-  /* line 24, ../sass/phone/_viewport.scss */
+
   #result_strip ul.thumbnails > li {
     width: 150px;
   }
-  /* line 27, ../sass/phone/_viewport.scss */
+
   #result_strip ul.thumbnails > li .thumbnail .imgWrapper {
     width: 130px;
     height: 130px;
     overflow: hidden;
   }
-  /* line 31, ../sass/phone/_viewport.scss */
+
   #result_strip ul.thumbnails > li .thumbnail .imgWrapper img {
     margin-top: -25px;
     width: 130px;
@@ -231,7 +270,7 @@ i.icon-24-scan {
   }
 }
 @media (max-width: 603px) {
-  /* line 8, ../sass/phone/_overlay.scss */
+
   .overlay.scanner {
     width: 640px;
     height: 510px;
@@ -243,66 +282,17 @@ i.icon-24-scan {
     -webkit-box-shadow: none;
     box-shadow: none;
   }
-  /* line 17, ../sass/phone/_overlay.scss */
+
   .overlay.scanner > .header {
     margin-bottom: 14px;
   }
-  /* line 19, ../sass/phone/_overlay.scss */
+
   .overlay.scanner > .header h4, .overlay.scanner > .header .close {
     line-height: 16px;
   }
-  /* line 22, ../sass/phone/_overlay.scss */
+
   .overlay.scanner > .header .close {
     height: 16px;
     width: 16px;
   }
 }
-/* line 15, ../sass/styles.scss */
-body {
-  background-color: #FFF;
-  margin: 0px;
-  font-family: Ubuntu, sans-serif;
-  color: #1e1e1e;
-  font-weight: normal;
-  padding-top: 0;
-}
-
-/* line 24, ../sass/styles.scss */
-h1, h2, h3, h4 {
-  font-family: "Cabin Condensed", sans-serif;
-}
-
-/* line 28, ../sass/styles.scss */
-header {
-  background: #FFC600;
-  padding: 1em;
-}
-/* line 31, ../sass/styles.scss */
-header .headline {
-  width: 640px;
-  margin: 0 auto;
-}
-/* line 34, ../sass/styles.scss */
-header .headline h1 {
-  color: #FFDD69;
-  font-size: 3em;
-  margin-bottom: 0;
-}
-/* line 39, ../sass/styles.scss */
-header .headline h2 {
-  margin-top: 0.2em;
-}
-
-/* line 45, ../sass/styles.scss */
-footer {
-  background: #0A4DB7;
-  color: #6C9CE8;
-  padding: 1em 2em 2em;
-}
-
-/* line 51, ../sass/styles.scss */
-#container {
-  width: 640px;
-  margin: 20px auto;
-  padding: 10px;
-}

example/file_input.html

@@ -35,7 +35,7 @@
 
     <div class="controls">
         <fieldset class="input-group">
-            <input type="file" capture/>
+            <input type="file" accept="image/*" capture="camera"/>
             <button>Rerun</button>
         </fieldset>
         <fieldset class="reader-config-group">
@@ -46,18 +46,22 @@
                     <option value="code_39">Code 39</option>
                     <option value="code_39_vin">Code 39 VIN</option>
                     <option value="ean">EAN</option>
+                    <option value="ean_extended">EAN-extended</option>
                     <option value="ean_8">EAN-8</option>
                     <option value="upc">UPC</option>
                     <option value="upc_e">UPC-E</option>
                     <option value="codabar">Codabar</option>
+                    <option value="i2of5">Interleaved 2 of 5</option>
+                    <option value="2of5">Standard 2 of 5</option>
+                    <option value="code_93">Code 93</option>
                 </select>
             </label>
             <label>
                 <span>Resolution (long side)</span>
                 <select name="input-stream_size">
                     <option value="320">320px</option>
-                    <option selected="selected" value="640">640px</option>
-                    <option value="800">800px</option>
+                    <option value="640">640px</option>
+                    <option selected="selected" value="800">800px</option>
                     <option value="1280">1280px</option>
                     <option value="1600">1600px</option>
                     <option value="1920">1920px</option>
@@ -101,7 +105,7 @@
         &copy; Copyright by Christoph Oberhofer
     </p>
 </footer>
-<script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
 <script src="../dist/quagga.js" type="text/javascript"></script>
 <script src="file_input.js" type="text/javascript"></script>
 </body>

example/file_input.js

@@ -82,22 +82,37 @@ $(function() {
             },
             decoder: {
                 readers: function(value) {
-                    return [value + "_reader"];
+                    if (value === 'ean_extended') {
+                        return [{
+                            format: "ean_reader",
+                            config: {
+                                supplements: [
+                                    'ean_5_reader', 'ean_2_reader'
+                                ]
+                            }
+                        }];
+                    }
+                    return [{
+                        format: value + "_reader",
+                        config: {}
+                    }];
                 }
             }
         },
         state: {
             inputStream: {
-                size: 640,
+                size: 800,
                 singleChannel: false
             },
             locator: {
-                patchSize: "large",
-                halfSample: false
+                patchSize: "medium",
+                halfSample: true
             },
-            numOfWorkers: 1,
             decoder: {
-                readers: ["code_128_reader"]
+                readers: [{
+                    format: "code_128_reader",
+                    config: {}
+                }]
             },
             locate: true,
             src: null

example/file_input_require.html

@@ -1,101 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-
-    <title>index</title>
-    <meta name="description" content=""/>
-    <meta name="author" content="Christoph Oberhofer"/>
-
-    <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
-    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
-</head>
-
-<body>
-<header>
-    <div class="headline">
-        <h1>QuaggaJS</h1>
-
-        <h2>An advanced barcode-scanner written in JavaScript</h2>
-    </div>
-</header>
-<section id="container" class="container">
-    <h3>Working with file-input</h3>
-
-    <p>This example let's you select an image from your local filesystem.
-        QuaggaJS then tries to decode the barcode using
-        the preferred method (<strong>Code128</strong> or <strong>EAN</strong>).
-        There is no server interaction needed as the
-        file is simply accessed through the <a
-                href="http://www.w3.org/TR/file-upload/">File API</a>.</p>
-
-    <p>This also works great on a wide range of mobile-phones where the camera
-        access through <code>getUserMedia</code> is still very limited.</p>
-
-    <div class="controls">
-        <fieldset class="input-group">
-            <input type="file" capture/>
-            <button>Rerun</button>
-        </fieldset>
-        <fieldset class="reader-config-group">
-            <label>
-                <span>Barcode-Type</span>
-                <select name="decoder_readers">
-                    <option value="code_128" selected="selected">Code 128</option>
-                    <option value="code_39">Code 39</option>
-                    <option value="code_39_vin">Code 39 VIN</option>
-                    <option value="ean">EAN</option>
-                    <option value="ean_8">EAN-8</option>
-                    <option value="upc">UPC</option>
-                    <option value="upc_e">UPC-E</option>
-                    <option value="codabar">Codabar</option>
-                </select>
-            </label>
-            <label>
-                <span>Resolution (long side)</span>
-                <select name="input-stream_size">
-                    <option value="320">320px</option>
-                    <option selected="selected" value="640">640px</option>
-                    <option value="800">800px</option>
-                    <option value="1280">1280px</option>
-                    <option value="1600">1600px</option>
-                    <option value="1920">1920px</option>
-                </select>
-            </label>
-            <label>
-                <span>Patch-Size</span>
-                <select name="locator_patch-size">
-                    <option value="x-small">x-small</option>
-                    <option value="small">small</option>
-                    <option selected="selected" value="medium">medium</option>
-                    <option value="large">large</option>
-                    <option value="x-large">x-large</option>
-                </select>
-            </label>
-            <label>
-                <span>Half-Sample</span>
-                <input type="checkbox" checked="checked"
-                       name="locator_half-sample" />
-            </label>
-            <label>
-                <span>Single Channel</span>
-                <input type="checkbox" name="input-stream_single-channel" />
-            </label>
-        </fieldset>
-    </div>
-    <div id="result_strip">
-        <ul class="thumbnails"></ul>
-    </div>
-    <div id="interactive" class="viewport"></div>
-    <div id="debug" class="detection"></div>
-</section>
-<footer>
-    <p>
-        &copy; Copyright by Christoph Oberhofer
-    </p>
-</footer>
-<script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
-<script data-main="file_input_require.js" src="../src/vendor/require.js"></script>
-</body>
-</html>

example/file_input_require.js

@@ -1,169 +0,0 @@
-requirejs.config({
-    "baseUrl" : "../src",
-    "shim" : {
-        "typedefs" : {
-            "deps" : [],
-            "exports" : "typedefs"
-        },
-        "glMatrix" : {
-            "deps" : ["typedefs"],
-            "exports" : "glMatrix"
-        },
-        "glMatrixAddon" : {
-            "deps" : ["glMatrix"],
-            "exports" : "glMatrixAddon"
-        }
-    },
-
-    "paths" : {
-        "typedefs" : "typedefs",
-        "glMatrix" : "vendor/glMatrix",
-        "glMatrixAddon" : "glMatrixAddon"
-    }
-});
-
-define(['quagga'], function(Quagga) {
-    var App = {
-        init: function() {
-            App.attachListeners();
-        },
-        attachListeners: function() {
-            var self = this;
-
-            $(".controls input[type=file]").on("change", function(e) {
-                if (e.target.files && e.target.files.length) {
-                    App.decode(URL.createObjectURL(e.target.files[0]));
-                }
-            });
-
-            $(".controls button").on("click", function(e) {
-                var input = document.querySelector(".controls input[type=file]");
-                if (input.files && input.files.length) {
-                    App.decode(URL.createObjectURL(input.files[0]));
-                }
-            });
-
-            $(".controls .reader-config-group").on("change", "input, select", function(e) {
-                e.preventDefault();
-                var $target = $(e.target),
-                    value = $target.attr("type") === "checkbox" ? $target.prop("checked") : $target.val(),
-                    name = $target.attr("name"),
-                    state = self._convertNameToState(name);
-
-                console.log("Value of "+ state + " changed to " + value);
-                self.setState(state, value);
-            });
-        },
-        _accessByPath: function(obj, path, val) {
-            var parts = path.split('.'),
-                depth = parts.length,
-                setter = (typeof val !== "undefined") ? true : false;
-
-            return parts.reduce(function(o, key, i) {
-                if (setter && (i + 1) === depth) {
-                    o[key] = val;
-                }
-                return key in o ? o[key] : {};
-            }, obj);
-        },
-        _convertNameToState: function(name) {
-            return name.replace("_", ".").split("-").reduce(function(result, value) {
-                return result + value.charAt(0).toUpperCase() + value.substring(1);
-            });
-        },
-        detachListeners: function() {
-            $(".controls input[type=file]").off("change");
-            $(".controls .reader-config-group").off("change", "input, select");
-            $(".controls button").off("click");
-        },
-        decode: function(src) {
-            var self = this,
-                config = $.extend({}, self.state, {src: src});
-
-            Quagga.decodeSingle(config, function(result) {});
-        },
-        setState: function(path, value) {
-            var self = this;
-
-            if (typeof self._accessByPath(self.inputMapper, path) === "function") {
-                value = self._accessByPath(self.inputMapper, path)(value);
-            }
-
-            self._accessByPath(self.state, path, value);
-
-            console.log(JSON.stringify(self.state));
-            App.detachListeners();
-            App.init();
-        },
-        inputMapper: {
-            inputStream: {
-                size: function(value){
-                    return parseInt(value);
-                }
-            },
-            numOfWorkers: function(value) {
-                return parseInt(value);
-            },
-            decoder: {
-                readers: function(value) {
-                    return [value + "_reader"];
-                }
-            }
-        },
-        state: {
-            inputStream: {
-                size: 640,
-                singleChannel: false
-            },
-            locator: {
-                patchSize: "medium",
-                halfSample: true
-            },
-            numOfWorkers: 0,
-            decoder: {
-                readers: ["code_128_reader"],
-                showFrequency: true,
-                showPattern: true
-            },
-            locate: true,
-            src: null
-        }
-    };
-
-    App.init();
-
-    Quagga.onProcessed(function(result) {
-        var drawingCtx = Quagga.canvas.ctx.overlay,
-            drawingCanvas = Quagga.canvas.dom.overlay;
-
-        if (result) {
-            if (result.boxes) {
-                drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
-                result.boxes.filter(function (box) {
-                    return box !== result.box;
-                }).forEach(function (box) {
-                    Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
-                });
-            }
-
-            if (result.box) {
-                Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
-            }
-
-            if (result.codeResult && result.codeResult.code) {
-                Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
-            }
-        }
-    });
-
-    Quagga.onDetected(function(result) {
-        var code = result.codeResult.code,
-            $node,
-            canvas = Quagga.canvas.dom.image;
-
-        $node = $('<li><div class="thumbnail"><div class="imgWrapper"><img /></div><div class="caption"><h4 class="code"></h4></div></div></li>');
-        $node.find("img").attr("src", canvas.toDataURL());
-        $node.find("h4.code").html(code + " (" + result.codeResult.format + ")");
-        $("#result_strip ul.thumbnails").prepend($node);
-    });
-});

example/live_w_locator.html

@@ -8,7 +8,7 @@
     <meta name="description" content="" />
     <meta name="author" content="Christoph Oberhofer" />
 
-    <meta name="viewport" content="width=device-width; initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
     <link rel="stylesheet" type="text/css" href="css/styles.css" />
   </head>
 
@@ -36,15 +36,20 @@
                     <select name="decoder_readers">
                         <option value="code_128" selected="selected">Code 128</option>
                         <option value="code_39">Code 39</option>
+                        <option value="code_39_vin">Code 39 VIN</option>
                         <option value="ean">EAN</option>
+                        <option value="ean_extended">EAN-extended</option>
                         <option value="ean_8">EAN-8</option>
                         <option value="upc">UPC</option>
                         <option value="upc_e">UPC-E</option>
                         <option value="codabar">Codabar</option>
+                        <option value="i2of5">Interleaved 2 of 5</option>
+                        <option value="2of5">Standard 2 of 5</option>
+                        <option value="code_93">Code 93</option>
                     </select>
                 </label>
                 <label>
-                    <span>Resolution (long side)</span>
+                    <span>Resolution (width)</span>
                     <select name="input-stream_constraints">
                         <option value="320x240">320px</option>
                         <option selected="selected" value="640x480">640px</option>
@@ -78,6 +83,19 @@
                         <option value="8">8</option>
                     </select>
                 </label>
+                <label>
+                    <span>Camera</span>
+                    <select name="input-stream_constraints" id="deviceSelection">
+                    </select>
+                </label>
+                <label style="display: none">
+                    <span>Zoom</span>
+                    <select name="settings_zoom"></select>
+                </label>
+                <label style="display: none">
+                    <span>Torch</span>
+                    <input type="checkbox" name="settings_torch" />
+                </label>
             </fieldset>
         </div>
       <div id="result_strip">
@@ -88,11 +106,12 @@
     </section>
           <footer>
         <p>
-          &copy; Copyright by Christoph Oberhofer
+          &copy; Made with ❤️ by Christoph Oberhofer
         </p>
       </footer>
 
-    <script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+    <script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+    <script src="//webrtc.github.io/adapter/adapter-latest.js" type="text/javascript"></script>
     <script src="../dist/quagga.js" type="text/javascript"></script>
     <script src="live_w_locator.js" type="text/javascript"></script>
   </body>

example/live_w_locator.js

@@ -2,7 +2,19 @@ $(function() {
     var resultCollector = Quagga.ResultCollector.create({
         capture: true,
         capacity: 20,
-        blacklist: [{code: "3574660239843", format: "ean_13"}],
+        blacklist: [{
+            code: "WIWV8ETQZ1", format: "code_93"
+        }, {
+            code: "EH3C-%GU23RK3", format: "code_93"
+        }, {
+            code: "O308SIHQOXN5SA/PJ", format: "code_93"
+        }, {
+            code: "DG7Q$TV8JQ/EN", format: "code_93"
+        }, {
+            code: "VOFD1DB5A.1F6QU", format: "code_93"
+        }, {
+            code: "4SO64P4X8 U4YUU1T-", format: "code_93"
+        }],
         filter: function(codeResult) {
             // only store results which match this constraint
             // e.g.: codeResult
@@ -10,24 +22,91 @@ $(function() {
         }
     });
     var App = {
-        init : function() {
+        init: function() {
             var self = this;
 
             Quagga.init(this.state, function(err) {
                 if (err) {
                     return self.handleError(err);
                 }
-                Quagga.registerResultCollector(resultCollector);
+                //Quagga.registerResultCollector(resultCollector);
                 App.attachListeners();
+                App.checkCapabilities();
                 Quagga.start();
             });
         },
         handleError: function(err) {
             console.log(err);
         },
+        checkCapabilities: function() {
+            var track = Quagga.CameraAccess.getActiveTrack();
+            var capabilities = {};
+            if (typeof track.getCapabilities === 'function') {
+                capabilities = track.getCapabilities();
+            }
+            this.applySettingsVisibility('zoom', capabilities.zoom);
+            this.applySettingsVisibility('torch', capabilities.torch);
+        },
+        updateOptionsForMediaRange: function(node, range) {
+            console.log('updateOptionsForMediaRange', node, range);
+            var NUM_STEPS = 6;
+            var stepSize = (range.max - range.min) / NUM_STEPS;
+            var option;
+            var value;
+            while (node.firstChild) {
+                node.removeChild(node.firstChild);
+            }
+            for (var i = 0; i <= NUM_STEPS; i++) {
+                value = range.min + (stepSize * i);
+                option = document.createElement('option');
+                option.value = value;
+                option.innerHTML = value;
+                node.appendChild(option);
+            }
+        },
+        applySettingsVisibility: function(setting, capability) {
+            // depending on type of capability
+            if (typeof capability === 'boolean') {
+                var node = document.querySelector('input[name="settings_' + setting + '"]');
+                if (node) {
+                    node.parentNode.style.display = capability ? 'block' : 'none';
+                }
+                return;
+            }
+            if (window.MediaSettingsRange && capability instanceof window.MediaSettingsRange) {
+                var node = document.querySelector('select[name="settings_' + setting + '"]');
+                if (node) {
+                    this.updateOptionsForMediaRange(node, capability);
+                    node.parentNode.style.display = 'block';
+                }
+                return;
+            }
+        },
+        initCameraSelection: function(){
+            var streamLabel = Quagga.CameraAccess.getActiveStreamLabel();
+
+            return Quagga.CameraAccess.enumerateVideoDevices()
+            .then(function(devices) {
+                function pruneText(text) {
+                    return text.length > 30 ? text.substr(0, 30) : text;
+                }
+                var $deviceSelection = document.getElementById("deviceSelection");
+                while ($deviceSelection.firstChild) {
+                    $deviceSelection.removeChild($deviceSelection.firstChild);
+                }
+                devices.forEach(function(device) {
+                    var $option = document.createElement("option");
+                    $option.value = device.deviceId || device.id;
+                    $option.appendChild(document.createTextNode(pruneText(device.label || device.deviceId || device.id)));
+                    $option.selected = streamLabel === device.label;
+                    $deviceSelection.appendChild($option);
+                });
+            });
+        },
         attachListeners: function() {
             var self = this;
 
+            self.initCameraSelection();
             $(".controls").on("click", "button.stop", function(e) {
                 e.preventDefault();
                 Quagga.stop();
@@ -64,7 +143,11 @@ $(function() {
 
             return parts.reduce(function(o, key, i) {
                 if (setter && (i + 1) === depth) {
-                    o[key] = val;
+                    if (typeof o[key] === "object" && typeof val === "object") {
+                        Object.assign(o[key], val);
+                    } else {
+                        o[key] = val;
+                    }
                 }
                 return key in o ? o[key] : {};
             }, obj);
@@ -78,6 +161,17 @@ $(function() {
             $(".controls").off("click", "button.stop");
             $(".controls .reader-config-group").off("change", "input, select");
         },
+        applySetting: function(setting, value) {
+            var track = Quagga.CameraAccess.getActiveTrack();
+            if (track && typeof track.getCapabilities === 'function') {
+                switch (setting) {
+                case 'zoom':
+                    return track.applyConstraints({advanced: [{zoom: parseFloat(value)}]});
+                case 'torch':
+                    return track.applyConstraints({advanced: [{torch: !!value}]});
+                }
+            }
+        },
         setState: function(path, value) {
             var self = this;
 
@@ -85,6 +179,10 @@ $(function() {
                 value = self._accessByPath(self.inputMapper, path)(value);
             }
 
+            if (path.startsWith('settings.')) {
+                var setting = path.substring(9);
+                return self.applySetting(setting, value);
+            }
             self._accessByPath(self.state, path, value);
 
             console.log(JSON.stringify(self.state));
@@ -95,12 +193,16 @@ $(function() {
         inputMapper: {
             inputStream: {
                 constraints: function(value){
-                    var values = value.split('x');
-                    return {
-                        width: parseInt(values[0]),
-                        height: parseInt(values[1]),
-                        facing: "environment"
+                    if (/^(\d+)x(\d+)$/.test(value)) {
+                        var values = value.split('x');
+                        return {
+                            width: {min: parseInt(values[0])},
+                            height: {min: parseInt(values[1])}
+                        };
                     }
+                    return {
+                        deviceId: value
+                    };
                 }
             },
             numOfWorkers: function(value) {
@@ -108,7 +210,20 @@ $(function() {
             },
             decoder: {
                 readers: function(value) {
-                    return [value + "_reader"];
+                    if (value === 'ean_extended') {
+                        return [{
+                            format: "ean_reader",
+                            config: {
+                                supplements: [
+                                    'ean_5_reader', 'ean_2_reader'
+                                ]
+                            }
+                        }];
+                    }
+                    return [{
+                        format: value + "_reader",
+                        config: {}
+                    }];
                 }
             }
         },
@@ -116,18 +231,23 @@ $(function() {
             inputStream: {
                 type : "LiveStream",
                 constraints: {
-                    width: 640,
-                    height: 480,
-                    facing: "environment" // or user
+                    width: {min: 640},
+                    height: {min: 480},
+                    facingMode: "environment",
+                    aspectRatio: {min: 1, max: 2}
                 }
             },
             locator: {
                 patchSize: "medium",
                 halfSample: true
             },
-            numOfWorkers: 4,
+            numOfWorkers: 2,
+            frequency: 10,
             decoder: {
-                readers : ["code_128_reader"]
+                readers : [{
+                    format: "code_128_reader",
+                    config: {}
+                }]
             },
             locate: true
         },

example/node-test-with-buffer.js

@@ -0,0 +1,27 @@
+var Quagga = require('../lib/quagga').default;
+
+var buffer = require('fs').readFileSync('../test/fixtures/code_128/image-001.jpg');
+
+decode(buffer);
+function decode(buff){
+    Quagga.decodeSingle({
+        src: buff,
+        numOfWorkers: 0,
+        inputStream: {
+            mime: "image/jpeg",
+            size: 800,
+            area: {
+                top: "10%",
+                right: "5%",
+                left: "5%",
+                bottom: "10%"
+            }
+        }
+    }, function(result) {
+        if (result.codeResult) {
+            console.log("result", result.codeResult.code);
+        } else {
+            console.log("not detected");
+        }
+    });
+}

example/node-test.js

@@ -0,0 +1,21 @@
+var Quagga = require('../lib/quagga').default;
+
+Quagga.decodeSingle({
+    src: "../test/fixtures/code_128/image-001.jpg",
+    numOfWorkers: 0,
+    inputStream: {
+        size: 800,
+        area: {
+            top: "10%",
+            right: "5%",
+            left: "5%",
+            bottom: "10%"
+        }
+    }
+}, function(result) {
+    if(result.codeResult) {
+        console.log("result", result.codeResult.code);
+    } else {
+        console.log("not detected");
+    }
+});

example/sass/_icons.scss

@@ -1,10 +0,0 @@
-i.icon-24-scan{
-  width: 24px;
-  height: 24px;
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzFFMjMzNTBFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzFFMjMzNTFFNjcwMTFFMkIzMERGOUMzMzEzM0E1QUMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDMUUyMzM0RUU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDMUUyMzM0RkU2NzAxMUUyQjMwREY5QzMzMTMzQTVBQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtQr90wAAAUuSURBVHjanFVLbFRVGP7ua97T9DGPthbamAYYBNSMVbBpjCliWWGIEBMWsnDJxkh8RDeEDW5MDGticMmGBWnSlRSCwgLFNkqmmrRIqzjTznTazkxn5s7c6/efzm0G0Jhwkj/nP+d/nv91tIWFBTQaDQWapkGW67p4ltUub5qmAi0UCqF/a/U2m81tpmddotwwDGSz2dzi4uKSaOucnJycGhsbe1XXdQiIIcdxEAgEtgXq9brySHCht79UXi/8QheawN27d385fPjwuEl6XyKR6LdtW7t06RLK5TKOHj2K/fv3Q87Dw8OYn5/HiRMnMDs7i5mZGQwODiqlPp8PuVwO6XRaOXb16lXl1OnTp5FMJvtosF8M+MWLarWqGJaWlpBKpRRcu3YN4+PjmJ6exsTEhDJw5coVjI6OKgPhcBiZTAbxeBx+vx+XL19Gd3c3Tp48Ka9zqDYgBlTQxYNgMIhIJKLCILkQb+TZsgvdsiyFi+feWRR7oRNZyanQtvW2V4DEUUBiK2eJpeDirSyhCe7F2QPh8fiEp72i9PbsC5G52DbiKZA771yr1dTuGfJ4PQNPFoAyQNR1aNEmsS5eyB3PgjeooMZd2AWvNmzYci/Gea7TeFOcI93jV/K67noGmi4vdRI9gPSDeMLSdKUBZZczlWm1rTtHjLZ24d+WER2tc8N1m+Y+ID74wx0zGYvhg9UNrJdtHJyZRdQfwPsrq9g99xsGlgsYmr6BNzO/IVwsYfjBQ6XYz6JI/72MV366B5/lw0elOkJWGUM3bmKtWjXSLuLaBWhnPnnp0FfoiFi4+TMfVAb2poBkDLjO845uYLEAjL4ALGWBP5YAOsP4AJYBFDaB1HOSVWD2PuV95H2RdV93Lv74/cf6p6Zxq/h6OofeOPJBC39JtONdwOAAViOs4p4OFGTf0Uc8iiyrr9YdQrUnDLsngrVOC0jQib44HlF2RafRZBz1Qy+vfhgK3NJZBlrm+LEm9qWwzFgLU7Ozg0JxZP06jQSRpQ7EerAWDSt6PuhHPmChEAog56fCLvJT5hHTm3OZkz3DyLx7XNWTGEA1GkV14gjWgwbW0ESVjYRwCOuai03L5E7OUBAV4kXSS4auoGIaKOma4m8EA5R1sMEGLh95C+XuLph0WJWpxepYYLtfT0RRgY1KgNODY6BoaChRuEhDCIZQYseuki5KN6hcQHiq7OZNv4/Zq2O6P4Lfkwn46vZjjaYZrIpvWbpzjLErrc4xUGE4avRedpYJalRcIl5hQius/SrPm9xrNOQYJhao6BvNUeWqtY8KaWuNjHOFAr7mM9f4NA4UbKysoUJ8PV9UzVOx6wxDDWUOxnK1pmCD07fOMAvtIsM3l89Dl3HRGhVma9AZMqjOnz2LQqWCxs6dqr3T7x1DTzKJaG8SekcHhg4cgI/56uKdlKnBV/WndqN3YAB/7tyBd3oT6GBIOzs7kc/nDfFdDFT5bS73cp06dQoaPa/Rw/rtO/resTHxxE2m9rCrbSR27UJCcMf1BpiA5rAAGgdfc868fUR1sMwj0cm9Iu9IctweisViB3hhKTHDcHc5jv/LspbyaZrR1OD82/fIlOkuB9LnEWRmDX2TsddUPg3D5gvuc0je0rZaD5EW6G3yjS+A3eeBEWq3XW/Abw1HhUspXADufQb86oW7tZytkYCN//3hHwBvDALPi8EnSOYK8DAOfCc2h4aGcO7cuafkzampqf9UripH12/DtOZbx8ciVGzYy5OO40o25ascGRl5Ssc/AgwAjW3JwqIUjSYAAAAASUVORK5CYII=");
-  display: inline-block;
-  background-repeat: no-repeat;
-  line-height: 24px;
-  margin-top: 1px;
-  vertical-align: text-top;
-}

example/sass/_overlay.scss

@@ -1,48 +0,0 @@
-$overlayWidth: $videoWidth;
-$overlayHeadline: 16px;
-$overlayHeadlineMargin: 14px;
-$overlayPadding: 20px;
-$overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
-
-.scanner-overlay {
-  display: none;
-  width: $overlayWidth;
-  height: $overlayHeight;
-  position: absolute;
-  padding: $overlayPadding;
-  top: 50%;
-  margin-top: -($overlayHeight)/2 - $overlayPadding;
-  left: 50%;
-  margin-left: -($overlayWidth + 2*$overlayPadding)/2;
-  background-color: $overlayBackground;
-  @include box-shadow(#333333 0px 4px 10px);
-  
-  & > .header{
-    position: relative;
-    margin-bottom: $overlayHeadlineMargin;
-    h4, .close{
-      line-height: $overlayHeadline;
-    }
-    h4{
-      margin: 0px;
-      padding: 0px;
-    }
-    .close{
-      position: absolute;
-      right: 0px;
-      top: 0px;
-      height: $overlayHeadline;
-      width: $overlayHeadline;
-      text-align: center;
-      font-weight: bold;
-      font-size: 14px;
-      cursor: pointer;
-    }
-  }
-  
-  & > .body{
-    
-    
-    
-  }
-}

example/sass/_phone.scss

@@ -1,3 +0,0 @@
-@import "phone/core";
-@import "phone/viewport";
-@import "phone/overlay";

example/sass/_tablet.scss

@@ -1,4 +0,0 @@
-@include tablet {
-    /* tablet styles */
-  
-}

example/sass/_utility.scss

@@ -1,17 +0,0 @@
-$tablet_upper: 1024px;
-$phone_upper: 603px;
- 
-@mixin phone {
-  @media (max-width: $phone_upper) {
-    @content;
-  }
- 
-} // @mixin phone
- 
-@mixin tablet {
- 
-  @media (min-width: $phone_upper+1) and (max-width: $tablet_upper) {
-    @content;
-  }
- 
-} // @mixin tablet

example/sass/_variables.scss

@@ -1,7 +0,0 @@
-$background_color: #FFF;
-$overlayBackground: #FFF;
-$videoWidth: 640px;
-$videoHeight: 480px;
-
-$text-font: Ubuntu, sans-serif;
-$header-font: 'Cabin Condensed', sans-serif;

example/sass/_viewport.scss

@@ -1,89 +0,0 @@
-#interactive.viewport{
-  width: $videoWidth;
-  height: $videoHeight;
-}
-
-#interactive.viewport canvas, video{
-  float: left;
-  width: $videoWidth;
-  height: $videoHeight;
-  &.drawingBuffer{
-    margin-left: -$videoWidth;
-  }
-}
-
-.controls {
-  fieldset {
-    border: none;
-  }
-  .input-group {
-    float: left;
-    input, button {
-      display: block;
-    }
-  }
-  .reader-config-group {
-    float: right;
-
-    label {
-      display: block;
-      span {
-        width: 11rem;
-        display: inline-block;
-        text-align: right;
-      }
-    }
-  }
-  &:after {
-    content:'';
-    display: block;
-    clear: both;
-  }
-}
-
-#result_strip{
-  margin: 10px 0;
-  border-top: 1px solid #EEE;
-  border-bottom: 1px solid #EEE;
-  padding: 10px 0;
-  
-  & > ul {
-    padding: 0;
-    margin: 0;
-    list-style-type: none;
-    width: auto;
-    overflow-x: auto;
-    overflow-y: hidden;
-    white-space: nowrap;
-    
-    & > li{
-      display: inline-block;
-      vertical-align: middle;
-      width: $videoWidth/4;
-      .thumbnail{
-        padding: 5px;
-        margin: 4px;
-        border: 1px dashed #CCC;
-        
-        img{
-          max-width: $videoWidth/4 - 20px;
-        }
-        .caption{
-          white-space: normal;
-          h4{
-            text-align: center;
-            word-wrap: break-word;
-            height: 40px;
-            margin: 0px;
-          }
-        }
-      }
-    }
-    
-    &:after{
-      content: "";
-      display: table;
-      clear: both;
-    }
-  }
-}

example/sass/colors.scss

@@ -1,55 +0,0 @@
-/* LESS - http://lesscss.org style sheet */
-/* Palette color codes */
-/* Palette URL: http://paletton.com/#uid=31g0q0kHZAviRSkrHLOGomVNzac */
-
-/* Feel free to copy&paste color codes to your application */
-
-
-/* MIXINS */
-
-/* As hex codes */
-
-$color-primary-0: #FFC600;  /* Main Primary color */
-$color-primary-1: #FFDD69;
-$color-primary-2: #FFCE22;
-$color-primary-3: #B78E00;
-$color-primary-4: #513F00;
-
-$color-secondary-1-0: #0A4DB7;  /* Main Secondary color (1) */
-$color-secondary-1-1: #6C9CE8;
-$color-secondary-1-2: #2E6FD6;
-$color-secondary-1-3: #073379;
-$color-secondary-1-4: #021636;
-
-$color-secondary-2-0: #5809BB;  /* Main Secondary color (2) */
-$color-secondary-2-1: #A36BE9;
-$color-secondary-2-2: #782DD8;
-$color-secondary-2-3: #3A077C;
-$color-secondary-2-4: #190237;
-
-
-
-/* As RGBa codes */
-
-$rgba-primary-0: rgba(255,198,  0,1); /* Main Primary color */
-$rgba-primary-1: rgba(255,221,105,1);
-$rgba-primary-2: rgba(255,206, 34,1);
-$rgba-primary-3: rgba(183,142,  0,1);
-$rgba-primary-4: rgba( 81, 63,  0,1);
-
-$rgba-secondary-1-0: rgba( 10, 77,183,1); /* Main Secondary color (1) */
-$rgba-secondary-1-1: rgba(108,156,232,1);
-$rgba-secondary-1-2: rgba( 46,111,214,1);
-$rgba-secondary-1-3: rgba(  7, 51,121,1);
-$rgba-secondary-1-4: rgba(  2, 22, 54,1);
-
-$rgba-secondary-2-0: rgba( 88,  9,187,1); /* Main Secondary color (2) */
-$rgba-secondary-2-1: rgba(163,107,233,1);
-$rgba-secondary-2-2: rgba(120, 45,216,1);
-$rgba-secondary-2-3: rgba( 58,  7,124,1);
-$rgba-secondary-2-4: rgba( 25,  2, 55,1);
-
-
-
-/* Generated by Paletton.com © 2002-2014 */
-/* http://paletton.com */

example/sass/fonts.scss

@@ -1 +0,0 @@
-@import url('http://fonts.googleapis.com/css?family=Ubuntu:400,700|Cabin+Condensed:400,600');

example/sass/phone/_core.scss

@@ -1,15 +0,0 @@
-@include phone {  
-  #container{
-    width: 300px;
-    margin: 10px auto;
-    @include box-shadow(none);
-    
-    form.voucher-form{
-      input{
-        &.voucher-code{
-          width: 180px;
-        }
-      }
-    }
-  }
-}

example/sass/phone/_overlay.scss

@@ -1,28 +0,0 @@
-@include phone {
-  $overlayWidth: $videoWidth;
-  $overlayHeadline: 16px;
-  $overlayHeadlineMargin: 14px;
-  $overlayPadding: 20px;
-  $overlayHeight: $videoHeight + $overlayHeadlineMargin + $overlayHeadline;
-  
-  .overlay.scanner {
-    width: $overlayWidth;
-    height: $overlayHeight;
-    padding: $overlayPadding;
-    margin-top: -($overlayHeight)/2 - $overlayPadding;
-    margin-left: -($overlayWidth + 2*$overlayPadding)/2;
-    background-color: $overlayBackground;
-    @include box-shadow(none);
-    
-    & > .header{
-      margin-bottom: $overlayHeadlineMargin;
-      h4, .close{
-        line-height: $overlayHeadline;
-      }
-      .close{
-        height: $overlayHeadline;
-        width: $overlayHeadline;
-      }
-    }
-  }
-}

example/sass/phone/_viewport.scss

@@ -1,42 +0,0 @@
-@include phone {
-  $videoWidth: 300px;
-  $videoHeight: 400px;
-  
-  #interactive.viewport{
-    width: $videoWidth;
-    height: $videoWidth;
-    overflow: hidden;
-  }
-  
-  #interactive.viewport canvas, video{
-    margin-top: ($videoWidth - $videoHeight)/2;
-    width: $videoWidth;
-    height: $videoHeight;
-    &.drawingBuffer{
-      margin-left: -$videoWidth;
-    }
-  }
-  
-  #result_strip{
-    margin-top: 5px;
-    padding-top: 5px;
-    ul.thumbnails{
-      & > li{
-        width: $videoWidth/2;
-        .thumbnail{
-          .imgWrapper{
-            width: $videoWidth/2 - 20px;
-            height: $videoWidth/2 - 20px;
-            overflow: hidden;
-            img{
-              margin-top: (($videoWidth/2 - 20px) - ($videoHeight/2 - 20px))/2;
-              width: $videoWidth/2 - 20px;
-              height: $videoHeight/2 - 20px;
-            }
-          }
-          
-        }
-      }
-    }
-  }
-}

example/sass/scanner.scss

@@ -1,14 +0,0 @@
-
-@import "compass/css3";
-@import "variables";
-@import "utility";
-
-/* usual styles */
-
-@import "fonts";
-@import "viewport";
-@import "overlay";
-@import "icons";
-
-@import "tablet";
-@import "phone";

example/sass/styles.scss

@@ -1,56 +0,0 @@
-@import "compass/css3";
-@import "variables";
-@import "utility";
-
-/* usual styles */
-@import "colors";
-@import "fonts";
-@import "viewport";
-@import "overlay";
-@import "icons";
-
-@import "tablet";
-@import "phone";
-
-body{
-  background-color: #FFF;
-  margin: 0px;
-  font-family: $text-font;
-  color: #1e1e1e;
-  font-weight: normal;
-  padding-top: 0;
-}
-
-h1,h2,h3,h4 {
-  font-family: $header-font;
-}
-
-header {
-  background: $color-primary-0;
-  padding: 1em;
-  .headline {
-    width: 640px;
-    margin: 0 auto;
-    h1 {
-      color: $color-primary-1;
-      font-size: 3em;
-      margin-bottom: 0;
-    }
-    h2 {
-      margin-top: 0.2em;
-    }
-  }
-}
-
-footer {
-  background: $color-secondary-1-0;
-  color: $color-secondary-1-1;
-  padding: 1em 2em 2em;
-}
-
-#container{
-  width: 640px;
-  margin: 20px auto;
-  padding: 10px;
-}
-

example/static_images.html

@@ -39,10 +39,15 @@
                   <option value="code_39">Code 39</option>
                   <option value="code_39_vin">Code 39 VIN</option>
                   <option value="ean">EAN</option>
+                  <option value="ean_extended">EAN-extended</option>
                   <option value="ean_8">EAN-8</option>
                   <option value="upc">UPC</option>
                   <option value="upc_e">UPC-E</option>
                   <option value="codabar">Codabar</option>
+                  <option value="i2of5">I2of5</option>
+                  <option value="i2of5">Interleaved 2 of 5</option>
+                  <option value="2of5">Standard 2 of 5</option>
+                  <option value="code_93">Code 93</option>
               </select>
           </fieldset>
       </div>
@@ -57,7 +62,7 @@
           &copy; Copyright by Christoph Oberhofer
         </p>
       </footer>
-    <script src="../src/vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
+    <script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
     <script src="../dist/quagga.js" type="text/javascript"></script>
     <script src="static_images.js" type="text/javascript"></script>
   </body>

example/static_images.js

@@ -1,14 +1,36 @@
 $(function() {
     var App = {
         init: function() {
-            Quagga.init(this.state, function() {
+            var config = this.config[this.state.decoder.readers[0].format] || this.config.default;
+            config = $.extend(true, {}, config, this.state);
+            Quagga.init(config, function() {
                 App.attachListeners();
                 Quagga.start();
             });
         },
         config: {
-            reader: "code_128",
-            length: 10
+            "default": {
+                inputStream: { name: "Test",
+                    type: "ImageStream",
+                    length: 10,
+                    size: 800
+                },
+                locator: {
+                    patchSize: "medium",
+                    halfSample: true
+                }
+            },
+            "i2of5_reader": {
+                inputStream: {
+                    size: 800,
+                    type: "ImageStream",
+                    length: 5
+                },
+                locator: {
+                    patchSize: "small",
+                    halfSample: false
+                }
+            }
         },
         attachListeners: function() {
             var self = this;
@@ -58,6 +80,7 @@ $(function() {
 
             paths.forEach(function(path) {
                 var mappedValue;
+
                 if (typeof self._accessByPath(self.inputMapper, path) === "function") {
                     mappedValue = self._accessByPath(self.inputMapper, path)(value);
                 }
@@ -72,7 +95,20 @@ $(function() {
         inputMapper: {
             decoder: {
                 readers: function(value) {
-                    return [value + "_reader"];
+                    if (value === 'ean_extended') {
+                        return [{
+                            format: "ean_reader",
+                            config: {
+                                supplements: [
+                                    'ean_5_reader', 'ean_2_reader'
+                                ]
+                            }
+                        }];
+                    }
+                    return [{
+                        format: value + "_reader",
+                        config: {}
+                    }];
                 }
             },
             inputStream: {
@@ -82,13 +118,14 @@ $(function() {
             }
         },
         state: {
-            inputStream: { name: "Test",
-                type: "ImageStream",
-                src: "../test/fixtures/code_128/",
-                length: 10
+            inputStream: {
+                src: "../test/fixtures/code_128/"
             },
             decoder : {
-                readers : ["code_128_reader"]
+                readers : [{
+                    format: "code_128_reader",
+                    config: {}
+                }]
             }
         }
     };

karma-integration.conf.js

@@ -1,32 +1,56 @@
+var path = require('path');
+var webpack = require('webpack');
+
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['mocha', 'requirejs', 'chai', 'sinon', 'sinon-chai'],
-    files: [
-      'test-main.js',
-      'src/vendor/glMatrix.js',
-      'src/typedefs.js',
-      {pattern: 'node_modules/async/lib/async.js', included: false},
-      {pattern: 'src/*.js', included: false},
-      {pattern: 'spec/**/*integration.spec.js', included: false},
-      {pattern: 'test/**/*.*', included: false}
-    ],
-    exclude: [
-    ],
-    plugins: [
-        'karma-chrome-launcher',
-        'karma-mocha',
-        'karma-requirejs',
-        'karma-chai',
-        'karma-sinon',
-        'karma-sinon-chai'
-    ],
-    reporters: ['progress'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['mocha', 'chai', 'sinon', 'sinon-chai'],
+        files: [
+            'test/test-main-integration.js',
+            {pattern: 'test/integration/**/*.js', included: false},
+            {pattern: 'test/fixtures/**/*.*', included: false}
+        ],
+        preprocessors: {
+            'test/test-main-integration.js': ['webpack']
+        },
+        webpack: {
+            entry: [
+                './src/quagga.js'
+            ],
+            module: {
+                loaders: [{
+                    test: /\.jsx?$/,
+                    exclude: /node_modules/,
+                    loader: 'babel-loader'
+                }]
+            },
+            resolve: {
+                modules: [
+                    path.resolve('./src/input/'),
+                    path.resolve('./src/common/'),
+                    'node_modules'
+                ]
+            },
+            plugins: [
+                new webpack.DefinePlugin({
+                    ENV: require(path.join(__dirname, './env/production'))
+                })
+            ]
+        },
+        plugins: [
+            'karma-chrome-launcher',
+            'karma-mocha',
+            'karma-chai',
+            'karma-sinon',
+            'karma-sinon-chai',
+            require('karma-webpack')
+        ],
+        reporters: ['progress'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO, // LOG_DEBUG
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false
+    });
 };

karma.conf.js

@@ -1,42 +1,68 @@
+var path = require('path');
+var webpack = require('webpack');
+
 module.exports = function(config) {
-  config.set({
-    basePath: '',
-    frameworks: ['mocha', 'requirejs', 'chai', 'sinon', 'sinon-chai'],
-    files: [
-      'test-main.js',
-      'src/vendor/glMatrix.js',
-      'src/typedefs.js',
-      {pattern: 'node_modules/async/lib/async.js', included: false},
-      {pattern: 'src/*.js', included: false},
-      {pattern: 'spec/**/*.js', included: false},
-      {pattern: 'test/**/*.*', included: false}
-    ],
-    exclude: [
-        'spec/**/*integration.spec.js'
-    ],
-    preprocessors: {
-        'src/*.js': ['coverage']
-    },
-    plugins: [
-        'karma-chrome-launcher',
-        'karma-coverage',
-        'karma-mocha',
-        'karma-requirejs',
-        'karma-chai',
-        'karma-sinon',
-        'karma-sinon-chai',
-        'karma-phantomjs-launcher'
-    ],
-    reporters: ['progress', 'coverage'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    coverageReporter: {
-        type : 'html',
-        dir : 'coverage/'
-    }
-  });
+    config.set({
+        basePath: '',
+        frameworks: ['source-map-support', 'mocha', 'chai', 'sinon', 'sinon-chai'],
+        files: [
+            'test/test-main.js',
+            {pattern: 'test/spec/**/*.js', included: false}
+        ],
+        preprocessors: {
+            'test/test-main.js': ['webpack']
+        },
+        webpack: {
+            entry: [
+                './src/quagga.js'
+            ],
+            module: {
+                loaders: [{
+                    test: /\.jsx?$/,
+                    exclude: [
+                        path.resolve('node_modules/')
+                    ],
+                    loader: 'babel-loader'
+                }, {
+                    test: /\.js$/,
+                    include: path.resolve('src'),
+                    loader: 'babel-istanbul-loader'
+                }]
+            },
+            resolve: {
+                modules: [
+                    path.resolve('./src/input/'),
+                    path.resolve('./test/mocks/'),
+                    'node_modules'
+                ]
+            },
+            plugins: [
+                new webpack.DefinePlugin({
+                    ENV: require(path.join(__dirname, './env/production'))
+                })
+            ]
+        },
+        plugins: [
+            'karma-chrome-launcher',
+            'karma-firefox-launcher',
+            'karma-coverage',
+            'karma-mocha',
+            'karma-chai',
+            'karma-sinon',
+            'karma-sinon-chai',
+            'karma-source-map-support',
+            require('karma-webpack')
+        ],
+        reporters: ['progress', 'coverage'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        coverageReporter: {
+            type: 'html',
+            dir: 'coverage/'
+        }
+    });
 };

lib/frame_grabber.js

@@ -0,0 +1,95 @@
+const CVUtils = require('../src/common/cv_utils'),
+      Ndarray = require("ndarray"),
+      Interp2D = require("ndarray-linear-interpolate").d2;
+
+var FrameGrabber = {};
+
+FrameGrabber.create = function(inputStream) {
+    var _that = {},
+        _streamConfig = inputStream.getConfig(),
+        _video_size = CVUtils.imageRef(inputStream.getRealWidth(), inputStream.getRealHeight()),
+        _canvasSize = inputStream.getCanvasSize(),
+        _size = CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()),
+        _topRight = inputStream.getTopRight(),
+        _data = new Uint8Array(_size.x * _size.y),
+        _grayData = new Uint8Array(_video_size.x * _video_size.y),
+        _canvasData = new Uint8Array(_canvasSize.x * _canvasSize.y),
+        _grayImageArray = Ndarray(_grayData, [_video_size.y, _video_size.x]).transpose(1, 0),
+        _canvasImageArray = Ndarray(_canvasData, [_canvasSize.y, _canvasSize.x]).transpose(1, 0),
+        _targetImageArray = _canvasImageArray.hi(_topRight.x + _size.x, _topRight.y + _size.y).lo(_topRight.x, _topRight.y),
+        _stepSizeX = _video_size.x/_canvasSize.x,
+        _stepSizeY = _video_size.y/_canvasSize.y;
+
+    console.log("FrameGrabber", JSON.stringify({
+        videoSize: _grayImageArray.shape,
+        canvasSize: _canvasImageArray.shape,
+        stepSize: [_stepSizeX, _stepSizeY],
+        size: _targetImageArray.shape,
+        topRight: _topRight
+    }));
+
+    /**
+     * Uses the given array as frame-buffer
+     */
+    _that.attachData = function(data) {
+        _data = data;
+    };
+
+    /**
+     * Returns the used frame-buffer
+     */
+    _that.getData = function() {
+        return _data;
+    };
+
+    /**
+     * Fetches a frame from the input-stream and puts into the frame-buffer.
+     * The image-data is converted to gray-scale and then half-sampled if configured.
+     */
+    _that.grab = function() {
+        var frame = inputStream.getFrame();
+
+        if (frame) {
+            this.scaleAndCrop(frame);
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    _that.scaleAndCrop = function(frame) {
+        var x,
+            y;
+
+        // 1. compute full-sized gray image
+        CVUtils.computeGray(frame.data, _grayData);
+
+        // 2. interpolate
+        for (y = 0; y < _canvasSize.y; y++) {
+            for (x = 0; x < _canvasSize.x; x++) {
+                _canvasImageArray.set(x, y, (Interp2D(_grayImageArray, x * _stepSizeX, y * _stepSizeY)) | 0);
+            }
+        }
+
+        // targetImageArray must be equal to targetSize
+        if (_targetImageArray.shape[0] !== _size.x ||
+            _targetImageArray.shape[1] !== _size.y) {
+            throw new Error("Shapes do not match!");
+        }
+
+        // 3. crop
+        for (y = 0; y < _size.y; y++) {
+            for (x = 0; x < _size.x; x++) {
+                _data[y * _size.x + x] = _targetImageArray.get(x, y);
+            }
+        }
+    },
+
+    _that.getSize = function() {
+        return _size;
+    };
+
+    return _that;
+};
+
+module.exports = FrameGrabber;

lib/input_stream.js

@@ -0,0 +1,153 @@
+const GetPixels = require("get-pixels");
+
+var InputStream = {};
+
+InputStream.createImageStream = function() {
+    var that = {};
+    var _config = null;
+
+    var width = 0,
+        height = 0,
+        frameIdx = 0,
+        paused = true,
+        loaded = false,
+        frame = null,
+        baseUrl,
+        ended = false,
+        size,
+        calculatedWidth,
+        calculatedHeight,
+        _eventNames = ['canrecord', 'ended'],
+        _eventHandlers = {},
+        _topRight = {x: 0, y: 0},
+        _canvasSize = {x: 0, y: 0};
+
+    function loadImages() {
+        loaded = false;
+        GetPixels(baseUrl, _config.mime, function(err, pixels) {
+            if (err) {
+                console.log(err);
+                exit(1);
+            }
+            loaded = true;
+            console.log(pixels.shape);
+            frame = pixels;
+            width = pixels.shape[0];
+            height = pixels.shape[1];
+            calculatedWidth = _config.size ? width/height > 1 ? _config.size : Math.floor((width/height) * _config.size) : width;
+            calculatedHeight = _config.size ? width/height > 1 ? Math.floor((height/width) * _config.size) : _config.size : height;
+
+            _canvasSize.x = calculatedWidth;
+            _canvasSize.y = calculatedHeight;
+
+            setTimeout(function() {
+                publishEvent("canrecord", []);
+            }, 0);
+        });
+    }
+
+    function publishEvent(eventName, args) {
+        var j,
+            handlers = _eventHandlers[eventName];
+
+        if (handlers && handlers.length > 0) {
+            for ( j = 0; j < handlers.length; j++) {
+                handlers[j].apply(that, args);
+            }
+        }
+    }
+
+
+    that.trigger = publishEvent;
+
+    that.getWidth = function() {
+        return calculatedWidth;
+    };
+
+    that.getHeight = function() {
+        return calculatedHeight;
+    };
+
+    that.setWidth = function(width) {
+        calculatedWidth = width;
+    };
+
+    that.setHeight = function(height) {
+        calculatedHeight = height;
+    };
+
+    that.getRealWidth = function() {
+        return width;
+    };
+
+    that.getRealHeight = function() {
+        return height;
+    };
+
+    that.setInputStream = function(stream) {
+        _config = stream;
+        baseUrl = _config.src;
+        size = 1;
+        loadImages();
+    };
+
+    that.ended = function() {
+        return ended;
+    };
+
+    that.setAttribute = function() {};
+
+    that.getConfig = function() {
+        return _config;
+    };
+
+    that.pause = function() {
+        paused = true;
+    };
+
+    that.play = function() {
+        paused = false;
+    };
+
+    that.setCurrentTime = function(time) {
+        frameIdx = time;
+    };
+
+    that.addEventListener = function(event, f) {
+        if (_eventNames.indexOf(event) !== -1) {
+            if (!_eventHandlers[event]) {
+                _eventHandlers[event] = [];
+            }
+            _eventHandlers[event].push(f);
+        }
+    };
+
+    that.setTopRight = function(topRight) {
+        _topRight.x = topRight.x;
+        _topRight.y = topRight.y;
+    };
+
+    that.getTopRight = function() {
+        return _topRight;
+    };
+
+    that.setCanvasSize = function(size) {
+        _canvasSize.x = size.x;
+        _canvasSize.y = size.y;
+    };
+
+    that.getCanvasSize = function() {
+        return _canvasSize;
+    };
+
+    that.getFrame = function() {
+        if (!loaded){
+            return null;
+        }
+        return frame;
+    };
+
+    return that;
+};
+
+module.exports = InputStream;

package.json

@@ -1,32 +1,82 @@
 {
   "name": "quagga",
-  "version": "0.6.13",
+  "version": "0.12.1",
   "description": "An advanced barcode-scanner written in JavaScript",
-  "main": "dist/quagga.js",
+  "main": "lib/quagga.js",
+  "typings": "type-definitions/quagga.d.ts",
+  "browser": "dist/quagga.min.js",
+  "typings": "type-definitions/quagga.d.ts",
   "devDependencies": {
-    "async": "^0.9.0",
-    "grunt": "~0.4.5",
-    "grunt-contrib-jshint": "~0.10.0",
-    "grunt-contrib-nodeunit": "~0.4.1",
-    "grunt-contrib-uglify": "~0.5.0",
-    "grunt-karma": "^0.9.0",
-    "grunt-requirejs": "^0.4.2",
-    "karma": "latest",
-    "karma-chai": "latest",
-    "karma-chrome-launcher": "^0.1.12",
-    "karma-coverage": "^0.3.1",
-    "karma-mocha": "latest",
-    "karma-phantomjs-launcher": "^0.1.4",
-    "karma-requirejs": "^0.2.2",
+    "async": "^1.4.2",
+    "babel-cli": "^6.5.1",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-istanbul": "^0.8.0",
+    "babel-istanbul-loader": "^0.1.0",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-check-es2015-constants": "^6.3.13",
+    "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-transform-es2015-arrow-functions": "^6.3.13",
+    "babel-plugin-transform-es2015-block-scoped-functions": "^6.3.13",
+    "babel-plugin-transform-es2015-block-scoping": "^6.21.0",
+    "babel-plugin-transform-es2015-classes": "^6.3.13",
+    "babel-plugin-transform-es2015-computed-properties": "^6.3.13",
+    "babel-plugin-transform-es2015-destructuring": "^6.3.13",
+    "babel-plugin-transform-es2015-for-of": "^6.3.13",
+    "babel-plugin-transform-es2015-function-name": "^6.3.13",
+    "babel-plugin-transform-es2015-literals": "^6.3.13",
+    "babel-plugin-transform-es2015-modules-commonjs": "^6.3.13",
+    "babel-plugin-transform-es2015-object-super": "^6.3.13",
+    "babel-plugin-transform-es2015-parameters": "^6.21.0",
+    "babel-plugin-transform-es2015-shorthand-properties": "^6.3.13",
+    "babel-plugin-transform-es2015-spread": "^6.3.13",
+    "babel-plugin-transform-es2015-sticky-regex": "^6.3.13",
+    "babel-plugin-transform-es2015-template-literals": "^6.3.13",
+    "babel-plugin-transform-es2015-typeof-symbol": "^6.3.13",
+    "babel-plugin-transform-es2015-unicode-regex": "^6.3.13",
+    "babel-plugin-transform-object-rest-spread": "^6.5.0",
+    "babel-plugin-transform-regenerator": "^6.21.0",
+    "chai": "^3.4.1",
+    "core-js": "^2.4.1",
+    "cross-env": "^3.1.4",
+    "eslint": "^1.10.3",
+    "grunt": "^0.4.5",
+    "grunt-cli": "^0.1.13",
+    "grunt-contrib-nodeunit": "^0.4.1",
+    "grunt-karma": "^2.0.0",
+    "isparta-loader": "^2.0.0",
+    "karma": "^1.3.0",
+    "karma-chai": "0.1.0",
+    "karma-chrome-launcher": "^2.0.0",
+    "karma-coverage": "^1.1.1",
+    "karma-firefox-launcher": "^0.1.7",
+    "karma-mocha": "~0.2.0",
+    "karma-phantomjs-launcher": "^0.2.1",
     "karma-sinon": "^1.0.4",
-    "karma-sinon-chai": "^0.2.0",
-    "sinon": "^1.12.1"
+    "karma-sinon-chai": "^1.1.0",
+    "karma-source-map-support": "^1.1.0",
+    "karma-webpack": "^1.8.1",
+    "lolex": "^1.4.0",
+    "mocha": "^2.3.2",
+    "phantomjs": "^1.9.18",
+    "sinon": "^1.17.7",
+    "sinon-chai": "^2.8.0",
+    "webpack": "^2.2.1",
+    "webpack-sources": "^0.1.4"
   },
   "directories": {
     "doc": "doc"
   },
   "scripts": {
-    "test": "karma start"
+    "test": "cross-env BABEL_ENV=commonjs grunt test",
+    "integrationtest": "grunt integrationtest",
+    "build:dev": "cross-env BUILD_ENV=development webpack",
+    "build:prod": "cross-env BUILD_ENV=production webpack --config webpack.config.min.js && grunt uglyasm",
+    "build:node": "cross-env BABEL_ENV=commonjs BUILD_ENV=node webpack --config webpack.node.config.js",
+    "build": "npm run build:dev && npm run build:prod && npm run build:node",
+    "watch": "cross-env BUILD_ENV=development webpack --watch",
+    "lint": "eslint src"
   },
   "repository": {
     "type": "git",
@@ -43,10 +93,23 @@
     "code128",
     "code39",
     "codabar",
+    "i2of5",
     "upc",
     "getusermedia",
     "imageprocessing"
   ],
   "author": "Christoph Oberhofer <ch.oberhofer@gmail.com>",
-  "license": "MIT"
+  "license": "MIT",
+  "engines": {
+    "node": ">= 4.0"
+  },
+  "dependencies": {
+    "get-pixels": "^3.2.3",
+    "gl-mat2": "^1.0.0",
+    "gl-vec2": "^1.0.0",
+    "gl-vec3": "^1.0.3",
+    "lodash": "^4.17.4",
+    "ndarray": "^1.0.18",
+    "ndarray-linear-interpolate": "^1.0.0"
+  }
 }

plugins/umd.js

@@ -0,0 +1,32 @@
+var ConcatSource = require("webpack-sources").ConcatSource;
+var OriginalSource = require("webpack-sources").OriginalSource;
+
+function MyUmdPlugin(options) {
+	this.name = options.library;
+}
+module.exports = MyUmdPlugin;
+MyUmdPlugin.prototype.apply = function(compiler) {
+    compiler.plugin("this-compilation", function(compilation) {
+    	var mainTemplate = compilation.mainTemplate;
+    	compilation.templatesPlugin("render-with-entry", function(source, chunk, hash) {
+
+    		return new ConcatSource(new OriginalSource(
+    			"(function webpackUniversalModuleDefinition(root, factory) {\n" +
+    			"	if(typeof exports === 'object' && typeof module === 'object')\n" +
+    			"		module.exports = factory(factory.toString()).default;\n" +
+    			"	else if(typeof exports === 'object')\n" +
+    			"		exports[\"" + this.name + "\"] = factory(factory.toString()).default;\n" +
+    			"	else\n" +
+    			"		root[\"" + this.name + "\"] = factory(factory.toString()).default;\n" +
+    			"})(this, function(__factorySource__) {\nreturn ", "webpack/myModuleDefinition"), source, "\n});\n");
+    	}.bind(this));
+    	mainTemplate.plugin("global-hash-paths", function(paths) {
+    		if(this.name) paths = paths.concat(this.name);
+    		return paths;
+    	}.bind(this));
+    	mainTemplate.plugin("hash", function(hash) {
+    		hash.update("umd");
+    		hash.update(this.name + "");
+    	}.bind(this));
+    }.bind(this));
+};

server.pem

@@ -0,0 +1,33 @@
+-----BEGIN RSA PRIVATE KEY-----
+MIICXAIBAAKBgQC9ORap3LvRegtrhRc8dLdH9Bp2QokcKEsWbtvyhtjisRRm2slK
+A6Q11McB/YTb7oImFfNaCX+7vdM1oVXVLJ0ekQaNljXG5Dy7DXEcT1V6gpN4xmZJ
+8f/KZ45VBINN0Ha74L7nS4kgImh5yvNolNr4IdlSjGf09kciFy8S3kPlGQIDAQAB
+AoGAYDlaxBCC1liY3Bl3IoA7//QrTL4zGUWIQaUoZmGag1UHifJycBf/9nv4o5N3
+b5wPRSzebofsE93JPTmI+3nPf62k5rS2xOo8swwOZc+f5/v0EnUNixD7P0jBiLVR
+B8kbMvNdNn33HuynW1/MSBFE0cfeDH2i8SVl+Z+fHYIUW10CQQD0yWB8xeM8AxYB
+/ZZWClem6gf1lQAYLzid3x51pkLqRFpX+rG251cSBUouE+kVO14j2xrBqCyyOwNu
+17eazy3DAkEAxeQdWP9b11ihKOf/kjXiczltLnBsotn6K9EEAe0QuH/6iXLm86mL
+ZiQe+TrY1GWbK3ns0sfXgNJ2aeaRkeZn8wJAWF5WedTKisCmckOEwTzslbJI+0w2
+A4UQkFWa3mgOIhpY7wfunhP35+aG+AlyDJspChKwHxdCQ3lwbNRtUPLYFwJBAK8G
+9QIbUbLlPB1/HOfH6xM4rp3NZ/idzQxmISJG+GwHHaPmUekfgyEDP7X2W4N4nsbU
+XyeLA8t32q4N9aDS5gsCQDHqhsXqnY6e4IEZrvf90l2V1PpnTKfEl/F5wye3g69G
+JN57scVUBHP/KKoyfge0fytWiQN/56KvWH+G5+N/JyA=
+-----END RSA PRIVATE KEY-----
+-----BEGIN CERTIFICATE-----
+MIIC2zCCAkSgAwIBAgIJALUDN95Or7XlMA0GCSqGSIb3DQEBBQUAMFMxCzAJBgNV
+BAYTAkFUMQ8wDQYDVQQIEwZTdHlyaWExDTALBgNVBAcTBEdyYXoxETAPBgNVBAoT
+CFF1YWdnYUpTMREwDwYDVQQDEwhxdWFnZ2FqczAeFw0xNzAxMDgxNjI5MjhaFw0x
+ODAxMDgxNjI5MjhaMFMxCzAJBgNVBAYTAkFUMQ8wDQYDVQQIEwZTdHlyaWExDTAL
+BgNVBAcTBEdyYXoxETAPBgNVBAoTCFF1YWdnYUpTMREwDwYDVQQDEwhxdWFnZ2Fq
+czCBnzANBgkqhkiG9w0BAQEFAAOBjQAwgYkCgYEAvTkWqdy70XoLa4UXPHS3R/Qa
+dkKJHChLFm7b8obY4rEUZtrJSgOkNdTHAf2E2+6CJhXzWgl/u73TNaFV1SydHpEG
+jZY1xuQ8uw1xHE9VeoKTeMZmSfH/ymeOVQSDTdB2u+C+50uJICJoecrzaJTa+CHZ
+Uoxn9PZHIhcvEt5D5RkCAwEAAaOBtjCBszAdBgNVHQ4EFgQUYm5+uJVOOGiYa+Vx
+2o++VHyWkwIwgYMGA1UdIwR8MHqAFGJufriVTjhomGvlcdqPvlR8lpMCoVekVTBT
+MQswCQYDVQQGEwJBVDEPMA0GA1UECBMGU3R5cmlhMQ0wCwYDVQQHEwRHcmF6MREw
+DwYDVQQKEwhRdWFnZ2FKUzERMA8GA1UEAxMIcXVhZ2dhanOCCQC1AzfeTq+15TAM
+BgNVHRMEBTADAQH/MA0GCSqGSIb3DQEBBQUAA4GBACyzC/CKL1mgTuNgFDuUf6u+
+YMnqlc9wcnEaFuvXnkSh6fT+qMZm188C/tlZwcWTrGmoCM0K6mX1TpHOjm8vbeXZ
+diezAVGIVN3VoHqm6yJldI2rgFI9r5BfwAWYC8XNjqnT3U6cm4k8iC7jmLC+dT9r
+Ysx2ucAF6lNHayekRmNq
+-----END CERTIFICATE-----

simple-https-server.py

@@ -0,0 +1,30 @@
+# taken from http://www.piware.de/2011/01/creating-an-https-server-in-python/
+# generate server.xml with the following command:
+#    openssl req -new -x509 -keyout server.pem -out server.pem -days 365 -nodes
+# run as follows:
+#    python simple-https-server.py
+# then in your browser, visit:
+#    https://localhost:4443
+
+import BaseHTTPServer, SimpleHTTPServer
+import ssl
+import sys, getopt
+
+host = 'localhost'
+port = 4443
+try:
+  opts, args = getopt.getopt(sys.argv[1:],"",["host=", "port="])
+except getopt.GetoptError:
+  print 'simple-https-server.py --host <host> --port <port>'
+  sys.exit(2)
+for opt, arg in opts:
+  if opt in ("--host"):
+     host = arg
+  elif opt in ("--port"):
+     port = int(arg)
+print 'host is ', host
+print 'port is ', port
+
+httpd = BaseHTTPServer.HTTPServer((host, port), SimpleHTTPServer.SimpleHTTPRequestHandler)
+httpd.socket = ssl.wrap_socket (httpd.socket, certfile='./server.pem', server_side=True)
+httpd.serve_forever()

spec/array_helper.spec.js

@@ -1,53 +0,0 @@
-define(['array_helper'], function(ArrayHelper){
-    describe('init', function() {
-        it('initializes an array with the given value', function() {
-            var input = [0, 0, 0];
-            ArrayHelper.init(input, 5);
-            expect(input).to.deep.equal([5, 5, 5]);
-        });
-    });
-
-    describe('shuffle', function() {
-        before(function() {
-            sinon.stub(Math, 'random').returns(0.5);
-        });
-
-        after(function() {
-            sinon.restore(Math);
-        });
-        it('shuffles the content of an array', function() {
-            var input = [1, 2, 3];
-            expect(ArrayHelper.shuffle(input)).to.deep.equal([3, 1, 2]);
-        });
-    });
-
-    describe('toPointList', function() {
-        it('converts an Array to a List of poitns', function() {
-            var input = [[1, 2], [2, 2], [3, 2]];
-            expect(ArrayHelper.toPointList(input)).to.equal("[[1,2],\r\n[2,2],\r\n[3,2]]");
-        });
-    });
-
-    describe('threshold', function() {
-        it('returns all elements above the given threshold', function() {
-            var input = [1, 2, 3];
-            expect(ArrayHelper.threshold(input, 2, function(score) { 
-                return score * 1.5;
-            })).to.deep.equal([2, 3]);
-        });
-    });
-
-    describe('maxIndex', function() {
-        it('gets the index of the biggest element in the array', function() {
-            var input = [1, 2, 3];
-            expect(ArrayHelper.maxIndex(input)).to.equal(2);
-        });
-    });
-
-    describe('max', function() {
-        it('gets the biggest element in the array', function() {
-            var input = [1, 3, 2];
-            expect(ArrayHelper.max(input)).to.equal(3);
-        });
-    });
-});

spec/barcode_locator.spec.js

@@ -1,131 +0,0 @@
-
-define(['barcode_locator', 'config', 'html_utils'],
-    function(BarcodeLocator, Config, HtmlUtils){
-
-    describe('checkImageConstraints', function() {
-        var config,
-            inputStream,
-            imageSize,
-            streamConfig = {};
-
-        beforeEach(function() {
-            imageSize = {
-                x: 640, y: 480
-            };
-            config = HtmlUtils.mergeObjects({}, Config);
-            inputStream = {
-                getWidth: function() {
-                    return imageSize.x;
-                },
-                getHeight: function() {
-                    return imageSize.y;
-                },
-                setWidth: function() {},
-                setHeight: function() {},
-                setTopRight: function() {},
-                setCanvasSize: function() {},
-                getConfig: function() {
-                    return streamConfig;
-                }
-            };
-            sinon.stub(inputStream, "setWidth", function(width) {
-                imageSize.x = width;
-            });
-            sinon.stub(inputStream, "setHeight", function(height) {
-                imageSize.y = height;
-            });
-            sinon.stub(inputStream, "setTopRight");
-            sinon.stub(inputStream, "setCanvasSize");
-        });
-
-        afterEach(function() {
-            inputStream.setWidth.restore();
-            inputStream.setHeight.restore();
-        });
-
-        it('should not adjust the image-size if not needed', function() {
-            var expected = {x: imageSize.x, y: imageSize.y};
-            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
-            expect(inputStream.getWidth()).to.be.equal(expected.x);
-            expect(inputStream.getHeight()).to.be.equal(expected.y);
-        });
-
-        it('should adjust the image-size', function() {
-            var expected = {x: imageSize.x, y: imageSize.y};
-
-            config.locator.halfSample = true;
-            imageSize.y += 1;
-            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
-            expect(inputStream.getWidth()).to.be.equal(expected.x);
-            expect(inputStream.getHeight()).to.be.equal(expected.y);
-        });
-
-        it('should adjust the image-size', function() {
-            var expected = {x: imageSize.x, y: imageSize.y};
-
-            imageSize.y += 1;
-            config.locator.halfSample = false;
-            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
-            expect(inputStream.getHeight()).to.be.equal(expected.y);
-            expect(inputStream.getWidth()).to.be.equal(expected.x);
-        });
-
-        it("should take the defined area into account", function() {
-            var expectedSize = {
-                    x: 420,
-                    y: 315
-                },
-                expectedTopRight = {
-                    x: 115,
-                    y: 52
-                },
-                expectedCanvasSize = {
-                    x: 640,
-                    y: 480
-                };
-
-            streamConfig.area = {
-                top: "11%",
-                right: "15%",
-                bottom: "20%",
-                left: "18%"
-            };
-
-            config.locator.halfSample = false;
-            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
-            expect(inputStream.getHeight()).to.be.equal(expectedSize.y);
-            expect(inputStream.getWidth()).to.be.equal(expectedSize.x);
-            expect(inputStream.setTopRight.getCall(0).args[0]).to.deep.equal(expectedTopRight);
-            expect(inputStream.setCanvasSize.getCall(0).args[0]).to.deep.equal(expectedCanvasSize);
-        });
-
-        it("should return the original size if set to full image", function() {
-            var expectedSize = {
-                    x: 640,
-                    y: 480
-                },
-                expectedTopRight = {
-                    x: 0,
-                    y: 0
-                },
-                expectedCanvasSize = {
-                    x: 640,
-                    y: 480
-                };
-
-            streamConfig.area = {
-                top: "0%",
-                right: "0%",
-                bottom: "0%",
-                left: "0%"
-            };
-
-            config.locator.halfSample = false;
-            BarcodeLocator.checkImageConstraints(inputStream, config.locator);
-            expect(inputStream.getHeight()).to.be.equal(expectedSize.y);
-            expect(inputStream.getWidth()).to.be.equal(expectedSize.x);
-            expect(inputStream.setTopRight.getCall(0).args[0]).to.deep.equal(expectedTopRight);
-            expect(inputStream.setCanvasSize.getCall(0).args[0]).to.deep.equal(expectedCanvasSize);
-        });
-    });
-});

spec/camera_access.spec.js

@@ -1,123 +0,0 @@
-define(['camera_access'], function(CameraAccess){
-    var originalURL,
-        originalMediaStreamTrack,
-        video,
-        stream;
-
-    beforeEach(function() {
-        var tracks = [{
-            stop: function() {}
-        }];
-        
-        originalURL = window.URL;
-        originalMediaStreamTrack = window.MediaStreamTrack;
-        window.MediaStreamTrack = {};
-        window.URL = null;
-        
-        
-        stream = {
-            getVideoTracks: function() {
-                return tracks;
-            }
-        };
-        sinon.spy(tracks[0], "stop");
-
-        video = {
-            src: null,
-            addEventListener: function() {
-                
-            },
-            removeEventListener: function() {
-
-            },
-            play: function() {
-                
-            },
-            videoWidth: 320,
-            videoHeight: 480
-        };
-        sinon.stub(video, "addEventListener", function(event, cb) {
-            cb();
-        });
-        sinon.stub(video, "play");
-    });
-    
-    afterEach(function() {
-        window.URL = originalURL;
-        window.MediaStreamTrack = originalMediaStreamTrack;
-    });
-    
-    describe('success', function() {
-        beforeEach(function() {
-            sinon.stub(navigator, "getUserMedia", function(constraints, success) {
-                success(stream);
-            });
-        });
-
-        afterEach(function() {
-            navigator.getUserMedia.restore();
-        });
-        describe('request', function () {
-            it('should request the camera', function (done) {
-                CameraAccess.request(video, {}, function () {
-                    expect(navigator.getUserMedia.calledOnce).to.equal(true);
-                    expect(video.src).to.deep.equal(stream);
-                    done();
-                });
-            });
-        });
-
-        describe('release', function () {
-            it('should release the camera', function (done) {
-                CameraAccess.request(video, {}, function () {
-                    expect(video.src).to.deep.equal(stream);
-                    CameraAccess.release();
-                    expect(video.src.getVideoTracks()).to.have.length(1);
-                    expect(video.src.getVideoTracks()[0].stop.calledOnce).to.equal(true);
-                    done();
-                });
-            });
-        });
-    });
-
-    describe('failure', function() {
-        describe("permission denied", function(){
-            before(function() {
-                sinon.stub(navigator, "getUserMedia", function(constraints, success, failure) {
-                    failure(new Error());
-                });
-            });
-
-            after(function() {
-                navigator.getUserMedia.restore();
-            });
-
-            it('should throw if getUserMedia not available', function(done) {
-                CameraAccess.request(video, {}, function(err) {
-                    expect(err).to.be.defined;
-                    done();
-                });
-            });
-        });
-
-        describe("not available", function(){
-            var originalGetUserMedia;
-
-            before(function() {
-                originalGetUserMedia = navigator.getUserMedia;
-                navigator.getUserMedia = undefined;
-            });
-
-            after(function() {
-                navigator.getUserMedia = originalGetUserMedia;
-            });
-
-            it('should throw if getUserMedia not available', function(done) {
-                CameraAccess.request(video, {}, function(err) {
-                    expect(err).to.be.defined;
-                    done();
-                });
-            });
-        });
-    });
-});

spec/cv_utils.spec.js

@@ -1,145 +0,0 @@
-
-define(['cv_utils'], function(CVUtils){
-    describe('imageRef', function() {
-        it('gets the image Reference for a coordinate', function() {
-            var res = CVUtils.imageRef(1, 2);
-            expect(res.x).to.equal(1);
-            expect(res.y).to.equal(2);
-            expect(res.toVec2()[0]).to.equal(1);
-        });
-    });
-
-    describe('calculatePatchSize', function() {
-        it('should not throw an error in case of valid image size', function() {
-            var expected = {x: 32, y: 32},
-                patchSize = CVUtils.calculatePatchSize("medium", {x: 640, y: 480});
-
-            expect(patchSize).to.be.deep.equal(expected);
-        });
-
-        it('should thow an error if image size it not valid', function() {
-            var expected = {x: 32, y: 32},
-                patchSize = CVUtils.calculatePatchSize("medium", {x: 640, y: 480});
-
-            expect(patchSize).to.be.deep.equal(expected);
-        });
-    });
-
-    describe('_parseCSSDimensionValues', function() {
-        it("should convert a percentual value correctly", function() {
-            var expected = {
-                    value: 10,
-                    unit: "%"
-                },
-                result = CVUtils._parseCSSDimensionValues("10%");
-
-            expect(result).to.be.deep.equal(expected);
-        });
-
-        it("should convert a 0% value correctly", function() {
-            var expected = {
-                    value: 100,
-                    unit: "%"
-                },
-                result = CVUtils._parseCSSDimensionValues("100%");
-
-            expect(result).to.be.deep.equal(expected);
-        });
-
-        it("should convert a 100% value correctly", function() {
-            var expected = {
-                    value: 0,
-                    unit: "%"
-                },
-                result = CVUtils._parseCSSDimensionValues("0%");
-
-            expect(result).to.be.deep.equal(expected);
-        });
-
-        it("should convert a pixel value to percentage", function() {
-            var expected = {
-                    value: 26.3,
-                    unit: "%"
-                },
-                result = CVUtils._parseCSSDimensionValues("26.3px");
-
-            console.log(result);
-            expect(result).to.be.deep.equal(expected);
-        });
-    });
-
-    describe("_dimensionsConverters", function(){
-        var context;
-
-        beforeEach(function() {
-            context = {
-                width: 640,
-                height: 480
-            };
-        });
-
-        it("should convert a top-value correclty", function() {
-            var expected = 48,
-                result = CVUtils._dimensionsConverters.top({value: 10, unit: "%"}, context);
-
-            expect(result).to.be.equal(expected);
-        });
-
-        it("should convert a right-value correclty", function() {
-            var expected = 640 - 128,
-                result = CVUtils._dimensionsConverters.right({value: 20, unit: "%"}, context);
-
-            expect(result).to.be.equal(expected);
-        });
-
-        it("should convert a bottom-value correclty", function() {
-            var expected = 480 - 77,
-                result = CVUtils._dimensionsConverters.bottom({value: 16, unit: "%"}, context);
-
-            expect(result).to.be.equal(expected);
-        });
-
-        it("should convert a left-value correclty", function() {
-            var expected = 57,
-                result = CVUtils._dimensionsConverters.left({value: 9, unit: "%"}, context);
-
-            expect(result).to.be.equal(expected);
-        });
-    });
-
-    describe("computeImageArea", function() {
-        it("should calculate an image-area", function() {
-            var expected = {
-                    sx: 115,
-                    sy: 48,
-                    sw: 429,
-                    sh: 336
-                },
-                result = CVUtils.computeImageArea(640, 480, {
-                    top: "10%",
-                    right: "15%",
-                    bottom: "20%",
-                    left: "18%"
-                });
-
-            expect(result).to.be.deep.equal(expected);
-        });
-
-        it("should calculate full image-area", function() {
-            var expected = {
-                    sx: 0,
-                    sy: 0,
-                    sw: 640,
-                    sh: 480
-                },
-                result = CVUtils.computeImageArea(640, 480, {
-                    top: "0%",
-                    right: "0%",
-                    bottom: "0%",
-                    left: "0%"
-                });
-
-            expect(result).to.be.deep.equal(expected);
-        });
-    });
-});

spec/events.spec.js

@@ -1,114 +0,0 @@
-define(['events'], function(Events){
-    beforeEach(function() {
-        Events.unsubscribe();
-    });
-    describe("subscribe", function() {
-        
-        
-        it("should call one callback for a single event", function() {
-            var callbackA = sinon.stub(),
-                callbackB = sinon.stub();
-                
-            Events.subscribe("test", callbackA);
-            Events.subscribe("test", callbackB);
-            Events.publish("test");
-            
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-        });
-        
-        it("should call one callback twice if published twice", function() {
-            var callback = sinon.stub();
-            
-            Events.subscribe("test", callback);
-            
-            Events.publish("test");
-            Events.publish("test");
-            
-            expect(callback.calledTwice).to.be.equal(true);
-        });
-        
-        it("should call the callback asynchronuously", function(done) {
-            var test = {
-                    callback: function() {
-                        
-                    }
-                };
-            
-            sinon.stub(test, "callback", function() {
-                expect(test.callback.calledOnce).to.be.true;
-                done();
-            });
-            Events.subscribe("test", test.callback, true);
-            Events.publish("test");
-            expect(test.callback.called).to.be.false;
-        });
-    });
-    
-    describe("once", function() {
-        it("should call the callback once, even when published twice", function() {
-            var callbackA = sinon.stub(),
-                callbackB = sinon.stub();
-                
-            Events.once("test", callbackA);
-            Events.subscribe("test", callbackB);
-            
-            Events.publish("test");
-            Events.publish("test");
-            
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledTwice).to.be.equal(true);
-        });
-    });
-    
-    describe("unsubscribe", function() {
-        it("should unsubscribe all callbacks from a single event", function() {
-            var callbackA = sinon.stub(),
-                callbackB = sinon.stub(),
-                callbackC = sinon.stub();
-                
-            Events.subscribe("test", callbackA);
-            Events.subscribe("test", callbackB);
-            Events.subscribe("testC", callbackC);
-            
-            Events.publish("test");
-            
-            expect(callbackC.called).to.be.equal(false);
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-            
-            Events.publish("testC");
-            
-            expect(callbackC.calledOnce).to.be.equal(true);
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-            
-            Events.unsubscribe("test");
-            Events.publish("test");
-            
-            expect(callbackC.calledOnce).to.be.equal(true);
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-        });
-        
-        it("should unsubscribe a single callback from a single event", function() {
-            var callbackA = sinon.stub(),
-                callbackB = sinon.stub();
-                
-            Events.subscribe("test", callbackA);
-            Events.subscribe("test", callbackB);
-            
-            Events.publish("test");
-            
-            expect(callbackA.calledOnce).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-            
-            
-            Events.unsubscribe("test", callbackB);
-            Events.publish("test");
-            
-            expect(callbackA.calledTwice).to.be.equal(true);
-            expect(callbackB.calledOnce).to.be.equal(true);
-        });
-    });
-});

spec/integration.spec.js

@@ -1,207 +0,0 @@
-
-
-define(['quagga', 'async'], function(Quagga, async) {
-    describe('decodeSingle', function () {
-        var baseFolder = "base/test/fixtures/";
-
-        function generateConfig() {
-            return {
-                inputStream: {
-                    size: 640
-                },
-                locator: {
-                    patchSize: "medium",
-                    halfSample: true
-                },
-                numOfWorkers: 0,
-                decoder: {
-                    readers: ["ean_reader"]
-                },
-                locate: true,
-                src: null
-            };
-        }
-
-        this.timeout(10000);
-
-        function _runTestSet(testSet, config) {
-            var readers = config.decoder.readers.slice(),
-                folder = baseFolder + readers[0].split('_').slice(0, -1).join('_') + "/";
-
-            it('should decode ' + folder + " correctly", function(done) {
-                async.eachSeries(testSet, function (sample, callback) {
-                    config.src = folder + sample.name;
-                    config.readers = readers;
-                    Quagga.decodeSingle(config, function(result) {
-                        console.log(sample.name);
-                        expect(result.codeResult.code).to.equal(sample.result);
-                        expect(result.codeResult.format).to.equal(sample.format);
-                        callback();
-                    });
-                }, function() {
-                    done();
-                });
-            });
-        }
-
-        describe("EAN", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "3574660239843"},
-                    {"name": "image-002.jpg", "result": "8032754490297"},
-                    {"name": "image-003.jpg", "result": "4006209700068"},
-                    /* {"name": "image-004.jpg", "result": "9002233139084"}, */
-                    /* {"name": "image-005.jpg", "result": "8004030044005"}, */
-                    {"name": "image-006.jpg", "result": "4003626011159"},
-                    {"name": "image-007.jpg", "result": "2111220009686"},
-                    {"name": "image-008.jpg", "result": "9000275609022"},
-                    {"name": "image-009.jpg", "result": "9004593978587"},
-                    {"name": "image-010.jpg", "result": "9002244845578"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "ean_13";
-            });
-
-            config.decoder.readers = ['ean_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("Code128", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "0001285112001000040801"},
-                    {"name": "image-002.jpg", "result": "FANAVF1461710"},
-                    // {"name": "image-003.jpg", "result": "673023"},
-                    {"name": "image-004.jpg", "result": "010210150301625334"},
-                    {"name": "image-005.jpg", "result": "419055603900009001012999"},
-                    {"name": "image-006.jpg", "result": "419055603900009001012999"},
-                    {"name": "image-007.jpg", "result": "T 000003552345"},
-                    {"name": "image-008.jpg", "result": "FANAVF1461710"},
-                    {"name": "image-009.jpg", "result": "0001285112001000040801"},
-                    {"name": "image-010.jpg", "result": "673023"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "code_128";
-            });
-
-            config.decoder.readers = ['code_128_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("Code39", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "B3% $DAD$"},
-                    {"name": "image-003.jpg", "result": "CODE39"},
-                    {"name": "image-004.jpg", "result": "QUAGGAJS"},
-                    {"name": "image-005.jpg", "result": "CODE39"},
-                    {"name": "image-006.jpg", "result": "2/4-8/16-32"},
-                    {"name": "image-007.jpg", "result": "2/4-8/16-32"},
-                    {"name": "image-008.jpg", "result": "CODE39"},
-                    {"name": "image-009.jpg", "result": "2/4-8/16-32"},
-                    {"name": "image-010.jpg", "result": "CODE39"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "code_39";
-            });
-
-            config.decoder.readers = ['code_39_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("EAN-8", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "42191605"},
-                    {"name": "image-002.jpg", "result": "42191605"},
-                    {"name": "image-003.jpg", "result": "90311208"},
-                    {"name": "image-004.jpg", "result": "24057257"},
-                    {"name": "image-005.jpg", "result": "90162602"},
-                    {"name": "image-006.jpg", "result": "24036153"},
-                    {"name": "image-007.jpg", "result": "42176817"},
-                    {"name": "image-008.jpg", "result": "42191605"},
-                    {"name": "image-009.jpg", "result": "42242215"},
-                    {"name": "image-010.jpg", "result": "42184799"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "ean_8";
-            });
-
-            config.decoder.readers = ['ean_8_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("UPC", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "882428015268"},
-                    {"name": "image-002.jpg", "result": "882428015268"},
-                    {"name": "image-003.jpg", "result": "882428015084"},
-                    {"name": "image-004.jpg", "result": "882428015343"},
-                    {"name": "image-005.jpg", "result": "882428015343"},
-                    /* {"name": "image-006.jpg", "result": "882428015046"}, */
-                    {"name": "image-007.jpg", "result": "882428015084"},
-                    {"name": "image-008.jpg", "result": "882428015046"},
-                    {"name": "image-009.jpg", "result": "039047013551"},
-                    {"name": "image-010.jpg", "result": "039047013551"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "upc_a";
-            });
-
-            config.decoder.readers = ['upc_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("UPC-E", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "04965802"},
-                    {"name": "image-002.jpg", "result": "04965802"},
-                    {"name": "image-003.jpg", "result": "03897425"},
-                    {"name": "image-004.jpg", "result": "05096893"},
-                    {"name": "image-005.jpg", "result": "05096893"},
-                    {"name": "image-006.jpg", "result": "05096893"},
-                    {"name": "image-007.jpg", "result": "03897425"},
-                    {"name": "image-008.jpg", "result": "01264904"},
-                    /*{"name": "image-009.jpg", "result": "01264904"},*/
-                    {"name": "image-010.jpg", "result": "01264904"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "upc_e";
-            });
-
-            config.decoder.readers = ['upc_e_reader'];
-            _runTestSet(testSet, config);
-        });
-
-        describe("Codabar", function() {
-            var config = generateConfig(),
-                testSet = [
-                    {"name": "image-001.jpg", "result": "A10/53+17-70D"},
-                    {"name": "image-002.jpg", "result": "B546745735B"},
-                    {"name": "image-003.jpg", "result": "C$399.95A"},
-                    {"name": "image-004.jpg", "result": "B546745735B"},
-                    {"name": "image-005.jpg", "result": "C$399.95A"},
-                    {"name": "image-006.jpg", "result": "B546745735B"},
-                    {"name": "image-007.jpg", "result": "C$399.95A"},
-                    {"name": "image-008.jpg", "result": "A16:9/4:3/3:2D"},
-                    {"name": "image-009.jpg", "result": "C$399.95A"},
-                    {"name": "image-010.jpg", "result": "C$399.95A"}
-                ];
-
-            testSet.forEach(function(sample) {
-                sample.format = "codabar";
-            });
-
-            config.decoder.readers = ['codabar_reader'];
-            _runTestSet(testSet, config);
-        });
-    });
-});

src/analytics/result_collector.js

@@ -0,0 +1,57 @@
+import ImageDebug from '../common/image_debug';
+
+function contains(codeResult, list) {
+    if (list) {
+        return list.some(function (item) {
+            return Object.keys(item).every(function (key) {
+                return item[key] === codeResult[key];
+            });
+        });
+    }
+    return false;
+}
+
+function passesFilter(codeResult, filter) {
+    if (typeof filter === 'function') {
+        return filter(codeResult);
+    }
+    return true;
+}
+
+export default {
+    create: function(config) {
+        var canvas = document.createElement("canvas"),
+            ctx = canvas.getContext("2d"),
+            results = [],
+            capacity = config.capacity || 20,
+            capture = config.capture === true;
+
+        function matchesConstraints(codeResult) {
+            return capacity
+                && codeResult
+                && !contains(codeResult, config.blacklist)
+                && passesFilter(codeResult, config.filter);
+        }
+
+        return {
+            addResult: function(data, imageSize, codeResult) {
+                var result = {};
+
+                if (matchesConstraints(codeResult)) {
+                    capacity--;
+                    result.codeResult = codeResult;
+                    if (capture) {
+                        canvas.width = imageSize.x;
+                        canvas.height = imageSize.y;
+                        ImageDebug.drawImage(data, imageSize, ctx);
+                        result.frame = canvas.toDataURL();
+                    }
+                    results.push(result);
+                }
+            },
+            getResults: function() {
+                return results;
+            }
+        };
+    }
+};

src/array_helper.js

@@ -1,86 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(function() {
-    "use strict";
-
-    return {
-        init : function(arr, val) {
-            var l = arr.length;
-            while (l--) {
-                arr[l] = val;
-            }
-        },
-
-        /**
-         * Shuffles the content of an array
-         * @return {Array} the array itself shuffled
-         */
-        shuffle : function(arr) {
-            var i = arr.length - 1, j, x;
-            for (i; i >= 0; i--) {
-                j = Math.floor(Math.random() * i);
-                x = arr[i];
-                arr[i] = arr[j];
-                arr[j] = x;
-            }
-            return arr;
-        },
-
-        toPointList : function(arr) {
-            var i, j, row = [], rows = [];
-            for ( i = 0; i < arr.length; i++) {
-                row = [];
-                for ( j = 0; j < arr[i].length; j++) {
-                    row[j] = arr[i][j];
-                }
-                rows[i] = "[" + row.join(",") + "]";
-            }
-            return "[" + rows.join(",\r\n") + "]";
-        },
-
-        /**
-         * returns the elements which's score is bigger than the threshold
-         * @return {Array} the reduced array
-         */
-        threshold : function(arr, threshold, scoreFunc) {
-            var i, queue = [];
-            for ( i = 0; i < arr.length; i++) {
-                if (scoreFunc.apply(arr, [arr[i]]) >= threshold) {
-                    queue.push(arr[i]);
-                }
-            }
-            return queue;
-        },
-
-        maxIndex : function(arr) {
-            var i, max = 0;
-            for ( i = 0; i < arr.length; i++) {
-                if (arr[i] > arr[max]) {
-                    max = i;
-                }
-            }
-            return max;
-        },
-
-        max : function(arr) {
-            var i, max = 0;
-            for ( i = 0; i < arr.length; i++) {
-                if (arr[i] > max) {
-                    max = arr[i];
-                }
-            }
-            return max;
-        },
-
-        sum: function(arr) {
-            var length = arr.length,
-                sum = 0;
-
-            while(length--) {
-                sum += arr[length];
-            }
-            return sum;
-        }
-    };
-}); 

src/barcode_decoder.js

@@ -1,292 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define([
-    "bresenham",
-    "image_debug",
-    'code_128_reader',
-    'ean_reader',
-    'code_39_reader',
-    'code_39_vin_reader',
-    'codabar_reader',
-    'upc_reader',
-    'ean_8_reader',
-    'upc_e_reader'
-], function(
-    Bresenham,
-    ImageDebug,
-    Code128Reader,
-    EANReader,
-    Code39Reader,
-    Code39VINReader,
-    CodabarReader,
-    UPCReader,
-    EAN8Reader,
-    UPCEReader) {
-    "use strict";
-
-    var readers = {
-        code_128_reader: Code128Reader,
-        ean_reader: EANReader,
-        ean_8_reader: EAN8Reader,
-        code_39_reader: Code39Reader,
-        code_39_vin_reader: Code39VINReader,
-        codabar_reader: CodabarReader,
-        upc_reader: UPCReader,
-        upc_e_reader: UPCEReader
-    };
-    var BarcodeDecoder = {
-        create : function(config, inputImageWrapper) {
-            var _canvas = {
-                ctx : {
-                        frequency : null,
-                        pattern : null,
-                        overlay : null
-                    },
-                    dom : {
-                        frequency : null,
-                        pattern : null,
-                        overlay : null
-                    }
-                },
-                _barcodeReaders = [];
-
-            initCanvas();
-            initReaders();
-            initConfig();
-
-            function initCanvas() {
-                if (typeof document !== 'undefined') {
-                    var $debug = document.querySelector("#debug.detection");
-                    _canvas.dom.frequency = document.querySelector("canvas.frequency");
-                    if (!_canvas.dom.frequency) {
-                        _canvas.dom.frequency = document.createElement("canvas");
-                        _canvas.dom.frequency.className = "frequency";
-                        if($debug) {
-                            $debug.appendChild(_canvas.dom.frequency);
-                        }
-                    }
-                    _canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
-
-                    _canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
-                    if (!_canvas.dom.pattern) {
-                        _canvas.dom.pattern = document.createElement("canvas");
-                        _canvas.dom.pattern.className = "patternBuffer";
-                        if($debug) {
-                            $debug.appendChild(_canvas.dom.pattern);
-                        }
-                    }
-                    _canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
-
-                    _canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
-                    if (_canvas.dom.overlay) {
-                        _canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
-                    }
-                }
-            }
-
-            function initReaders() {
-                var i;
-                for ( i = 0; i < config.readers.length; i++) {
-                    console.log(config.readers[i]);
-                    _barcodeReaders.push(new readers[config.readers[i]]());
-                }
-            }
-
-            function initConfig() {
-                if (typeof document !== 'undefined') {
-                    var i,
-                        vis = [{
-                            node : _canvas.dom.frequency,
-                            prop : config.showFrequency
-                        }, {
-                            node : _canvas.dom.pattern,
-                            prop : config.showPattern
-                        }];
-
-                    for (i = 0; i < vis.length; i++) {
-                        if (vis[i].prop === true) {
-                            vis[i].node.style.display = "block";
-                        } else {
-                            vis[i].node.style.display = "none";
-                        }
-                    }
-                }
-            }
-
-            /**
-             * extend the line on both ends
-             * @param {Array} line
-             * @param {Number} angle
-             */
-            function getExtendedLine(line, angle, ext) {
-                function extendLine(amount) {
-                    var extension = {
-                        y : amount * Math.sin(angle),
-                        x : amount * Math.cos(angle)
-                    };
-
-                    line[0].y -= extension.y;
-                    line[0].x -= extension.x;
-                    line[1].y += extension.y;
-                    line[1].x += extension.x;
-                }
-
-                // check if inside image
-                extendLine(ext);
-                while (ext > 1 && (!inputImageWrapper.inImageWithBorder(line[0], 0) || !inputImageWrapper.inImageWithBorder(line[1], 0))) {
-                    ext -= Math.ceil(ext/2);
-                    extendLine(-ext);
-                }
-                return line;
-            }
-
-            function getLine(box) {
-                return [{
-                    x : (box[1][0] - box[0][0]) / 2 + box[0][0],
-                    y : (box[1][1] - box[0][1]) / 2 + box[0][1]
-                }, {
-                    x : (box[3][0] - box[2][0]) / 2 + box[2][0],
-                    y : (box[3][1] - box[2][1]) / 2 + box[2][1]
-                }];
-            }
-
-            function tryDecode(line) {
-                var result = null,
-                    i,
-                    barcodeLine = Bresenham.getBarcodeLine(inputImageWrapper, line[0], line[1]);
-
-                if (config.showFrequency) {
-                    ImageDebug.drawPath(line, {x: 'x', y: 'y'}, _canvas.ctx.overlay, {color: 'red', lineWidth: 3});
-                    Bresenham.debug.printFrequency(barcodeLine.line, _canvas.dom.frequency);
-                }
-                Bresenham.toBinaryLine(barcodeLine);
-                if (config.showPattern) {
-                    Bresenham.debug.printPattern(barcodeLine.line, _canvas.dom.pattern);
-                }
-
-                for ( i = 0; i < _barcodeReaders.length && result === null; i++) {
-                    result = _barcodeReaders[i].decodePattern(barcodeLine.line);
-                }
-                if(result === null){
-                    return null;
-                }
-                return {
-                    codeResult: result,
-                    barcodeLine: barcodeLine
-                };
-
-            }
-
-            /**
-             * This method slices the given area apart and tries to detect a barcode-pattern
-             * for each slice. It returns the decoded barcode, or null if nothing was found
-             * @param {Array} box
-             * @param {Array} line
-             * @param {Number} lineAngle
-             */
-            function tryDecodeBruteForce(box, line, lineAngle) {
-                var sideLength = Math.sqrt(Math.pow(box[1][0] - box[0][0], 2) + Math.pow((box[1][1] - box[0][1]), 2)),
-                    i,
-                    slices = 16,
-                    result = null,
-                    dir,
-                    extension,
-                    xdir = Math.sin(lineAngle),
-                    ydir = Math.cos(lineAngle);
-
-                for ( i = 1; i < slices && result === null; i++) {
-                    // move line perpendicular to angle
-                    dir = sideLength / slices * i * (i % 2 === 0 ? -1 : 1);
-                    extension = {
-                        y : dir * xdir,
-                        x : dir * ydir
-                    };
-                    line[0].y += extension.x;
-                    line[0].x -= extension.y;
-                    line[1].y += extension.x;
-                    line[1].x -= extension.y;
-
-                    result = tryDecode(line);
-                }
-                return result;
-            }
-
-            function getLineLength(line) {
-                return Math.sqrt(
-                    Math.pow(Math.abs(line[1].y - line[0].y), 2) +
-                    Math.pow(Math.abs(line[1].x - line[0].x), 2));
-            }
-
-            /**
-             * With the help of the configured readers (Code128 or EAN) this function tries to detect a
-             * valid barcode pattern within the given area.
-             * @param {Object} box The area to search in
-             * @returns {Object} the result {codeResult, line, angle, pattern, threshold}
-             */
-            function decodeFromBoundingBox(box) {
-                var line,
-                    lineAngle,
-                    ctx = _canvas.ctx.overlay,
-                    result,
-                    lineLength;
-
-                if (config.drawBoundingBox && ctx) {
-                    ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "blue", lineWidth: 2});
-                }
-
-                line = getLine(box);
-                lineLength = getLineLength(line);
-                lineAngle = Math.atan2(line[1].y - line[0].y, line[1].x - line[0].x);
-                line = getExtendedLine(line, lineAngle, Math.floor(lineLength*0.1));
-                if(line === null){
-                    return null;
-                }
-
-                result = tryDecode(line);
-                if(result === null) {
-                    result = tryDecodeBruteForce(box, line, lineAngle);
-                }
-
-                if(result === null) {
-                    return null;
-                }
-
-                if (result && config.drawScanline && ctx) {
-                    ImageDebug.drawPath(line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
-                }
-
-                return {
-                    codeResult : result.codeResult,
-                    line : line,
-                    angle : lineAngle,
-                    pattern : result.barcodeLine.line,
-                    threshold : result.barcodeLine.threshold
-                };
-            }
-
-            return {
-                decodeFromBoundingBox : function(box) {
-                    return decodeFromBoundingBox(box);
-                },
-                decodeFromBoundingBoxes : function(boxes) {
-                    var i, result;
-                    for ( i = 0; i < boxes.length; i++) {
-                        result = decodeFromBoundingBox(boxes[i]);
-                        if (result && result.codeResult) {
-                            result.box = boxes[i];
-                            return result;
-                        }
-                    }
-                },
-                setReaders: function(readers) {
-                    config.readers = readers;
-                    _barcodeReaders.length = 0;
-                    initReaders();
-                }
-            };
-        }
-    };
-
-    return (BarcodeDecoder);
-});

src/barcode_locator.js

@@ -1,560 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define, mat2, vec2 */
-
-define("barcode_locator", ["image_wrapper", "cv_utils", "rasterizer", "tracer", "skeletonizer", "array_helper", "image_debug"],
-function(ImageWrapper, CVUtils, Rasterizer, Tracer, skeletonizer, ArrayHelper, ImageDebug) {
-
-    var _config,
-        _currentImageWrapper,
-        _skelImageWrapper,
-        _subImageWrapper,
-        _labelImageWrapper,
-        _patchGrid,
-        _patchLabelGrid,
-        _imageToPatchGrid,
-        _binaryImageWrapper,
-        _patchSize,
-        _canvasContainer = {
-            ctx : {
-                binary : null
-            },
-            dom : {
-                binary : null
-            }
-        },
-        _numPatches = {x: 0, y: 0},
-        _inputImageWrapper,
-        _skeletonizer,
-        self = this;
-
-    function initBuffers() {
-        var skeletonImageData;
-        
-        if (_config.halfSample) {
-            _currentImageWrapper = new ImageWrapper({
-                x : _inputImageWrapper.size.x / 2 | 0,
-                y : _inputImageWrapper.size.y / 2 | 0
-            });
-        } else {
-            _currentImageWrapper = _inputImageWrapper;
-        }
-
-        _patchSize = CVUtils.calculatePatchSize(_config.patchSize, _currentImageWrapper.size);
-
-        _numPatches.x = _currentImageWrapper.size.x / _patchSize.x | 0;
-        _numPatches.y = _currentImageWrapper.size.y / _patchSize.y | 0;
-
-        _binaryImageWrapper = new ImageWrapper(_currentImageWrapper.size, undefined, Uint8Array, false);
-
-        _labelImageWrapper = new ImageWrapper(_patchSize, undefined, Array, true);
-
-        skeletonImageData = new ArrayBuffer(64*1024);
-        _subImageWrapper = new ImageWrapper(_patchSize, new Uint8Array(skeletonImageData, 0, _patchSize.x * _patchSize.y));
-        _skelImageWrapper = new ImageWrapper(_patchSize, new Uint8Array(skeletonImageData, _patchSize.x * _patchSize.y * 3, _patchSize.x * _patchSize.y), undefined, true);
-        _skeletonizer = skeletonizer(self, {
-            size : _patchSize.x
-        }, skeletonImageData);
-
-        _imageToPatchGrid = new ImageWrapper({
-            x : (_currentImageWrapper.size.x / _subImageWrapper.size.x) | 0,
-            y : (_currentImageWrapper.size.y / _subImageWrapper.size.y) | 0
-        }, undefined, Array, true);
-        _patchGrid = new ImageWrapper(_imageToPatchGrid.size, undefined, undefined, true);
-        _patchLabelGrid = new ImageWrapper(_imageToPatchGrid.size, undefined, Int32Array, true);
-    }
-
-    function initCanvas() {
-        if (_config.useWorker || typeof document === 'undefined') {
-            return;
-        }
-        _canvasContainer.dom.binary = document.createElement("canvas");
-        _canvasContainer.dom.binary.className = "binaryBuffer";
-        if (_config.showCanvas === true) {
-            document.querySelector("#debug").appendChild(_canvasContainer.dom.binary);
-        }
-        _canvasContainer.ctx.binary = _canvasContainer.dom.binary.getContext("2d");
-        _canvasContainer.dom.binary.width = _binaryImageWrapper.size.x;
-        _canvasContainer.dom.binary.height = _binaryImageWrapper.size.y;
-    }
-
-    /**
-     * Creates a bounding box which encloses all the given patches
-     * @returns {Array} The minimal bounding box 
-     */
-    function boxFromPatches(patches) {
-        var overAvg, i, j, patch, transMat, minx = _binaryImageWrapper.size.x, miny = _binaryImageWrapper.size.y, maxx = -_binaryImageWrapper.size.x, maxy = -_binaryImageWrapper.size.y, box, scale;
-
-        // draw all patches which are to be taken into consideration
-        overAvg = 0;
-        for ( i = 0; i < patches.length; i++) {
-            patch = patches[i];
-            overAvg += patch.rad;
-            if (_config.showPatches) {
-                ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary, {color: "red"});
-            }
-        }
-
-        overAvg /= patches.length;
-        overAvg = (overAvg * 180 / Math.PI + 90) % 180 - 90;
-        if (overAvg < 0) {
-            overAvg += 180;
-        }
-
-        //console.log(overAvg);
-        overAvg = (180 - overAvg) * Math.PI / 180;
-        transMat = mat2.create([Math.cos(overAvg), -Math.sin(overAvg), Math.sin(overAvg), Math.cos(overAvg)]);
-
-        // iterate over patches and rotate by angle
-        for ( i = 0; i < patches.length; i++) {
-            patch = patches[i];
-            for ( j = 0; j < 4; j++) {
-                mat2.xVec2(transMat, patch.box[j]);
-            }
-
-            if (_config.boxFromPatches.showTransformed) {
-                ImageDebug.drawPath(patch.box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#99ff00', lineWidth: 2});
-            }
-        }
-
-        // find bounding box
-        for ( i = 0; i < patches.length; i++) {
-            patch = patches[i];
-            for ( j = 0; j < 4; j++) {
-                if (patch.box[j][0] < minx) {
-                    minx = patch.box[j][0];
-                }
-                if (patch.box[j][0] > maxx) {
-                    maxx = patch.box[j][0];
-                }
-                if (patch.box[j][1] < miny) {
-                    miny = patch.box[j][1];
-                }
-                if (patch.box[j][1] > maxy) {
-                    maxy = patch.box[j][1];
-                }
-            }
-        }
-
-        box = [[minx, miny], [maxx, miny], [maxx, maxy], [minx, maxy]];
-
-        if (_config.boxFromPatches.showTransformedBox) {
-            ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
-        }
-
-        scale = _config.halfSample ? 2 : 1;
-        // reverse rotation;
-        transMat = mat2.inverse(transMat);
-        for ( j = 0; j < 4; j++) {
-            mat2.xVec2(transMat, box[j]);
-        }
-
-        if (_config.boxFromPatches.showBB) {
-            ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
-        }
-        
-        for ( j = 0; j < 4; j++) {
-            vec2.scale(box[j], scale);
-        }
-
-        return box;
-    }
-
-    /**
-     * Creates a binary image of the current image
-     */
-    function binarizeImage() {
-        CVUtils.otsuThreshold(_currentImageWrapper, _binaryImageWrapper);
-        _binaryImageWrapper.zeroBorder();
-        if (_config.showCanvas) {
-            _binaryImageWrapper.show(_canvasContainer.dom.binary, 255);
-        }
-    }
-    
-    /**
-     * Iterate over the entire image
-     * extract patches
-     */
-    function findPatches() {
-        var i,
-            j,
-            x,
-            y,
-            moments,
-            patchesFound = [],
-            rasterizer,
-            rasterResult,
-            patch;
-        for ( i = 0; i < _numPatches.x; i++) {
-            for ( j = 0; j < _numPatches.y; j++) {
-
-                x = _subImageWrapper.size.x * i;
-                y = _subImageWrapper.size.y * j;
-
-                // seperate parts
-                skeletonize(x, y);
-
-                // Rasterize, find individual bars
-                _skelImageWrapper.zeroBorder();
-                ArrayHelper.init(_labelImageWrapper.data, 0);
-                rasterizer = Rasterizer.create(_skelImageWrapper, _labelImageWrapper);
-                rasterResult = rasterizer.rasterize(0);
-
-                if (_config.showLabels) {
-                    _labelImageWrapper.overlay(_canvasContainer.dom.binary, Math.floor(360 / rasterResult.count), {x : x, y : y});
-                }
-
-                // calculate moments from the skeletonized patch
-                moments = _labelImageWrapper.moments(rasterResult.count);
-
-                // extract eligible patches
-                patchesFound = patchesFound.concat(describePatch(moments, [i, j], x, y));
-            }
-        }
-        
-        if (_config.showFoundPatches) {
-            for ( i = 0; i < patchesFound.length; i++) {
-                patch = patchesFound[i];
-                ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary, {color: "#99ff00", lineWidth: 2});
-            }
-        }
-        
-        return patchesFound;
-    }
-    
-    /**
-     * Finds those connected areas which contain at least 6 patches
-     * and returns them ordered DESC by the number of contained patches
-     * @param {Number} maxLabel 
-     */
-    function findBiggestConnectedAreas(maxLabel){
-        var i,
-            sum,
-            labelHist = [],
-            topLabels = [];
-            
-        for ( i = 0; i < maxLabel; i++) {
-            labelHist.push(0);
-        }
-        sum = _patchLabelGrid.data.length;
-        while (sum--) {
-            if (_patchLabelGrid.data[sum] > 0) {
-                labelHist[_patchLabelGrid.data[sum] - 1]++;
-            }
-        }
-
-        labelHist = labelHist.map(function(val, idx) {
-            return {
-                val : val,
-                label : idx + 1
-            };
-        });
-
-        labelHist.sort(function(a, b) {
-            return b.val - a.val;
-        });
-
-        // extract top areas with at least 6 patches present
-        topLabels = labelHist.filter(function(el) {
-            return el.val >= 5;
-        });
-        
-        return topLabels;
-    }
-    
-    /**
-     * 
-     */
-    function findBoxes(topLabels, maxLabel) {
-        var i,
-            j,
-            sum,
-            patches = [],
-            patch,
-            box,
-            boxes = [],
-            hsv = [0, 1, 1],
-            rgb = [0, 0, 0];
-            
-        for ( i = 0; i < topLabels.length; i++) {
-            sum = _patchLabelGrid.data.length;
-            patches.length = 0;
-            while (sum--) {
-                if (_patchLabelGrid.data[sum] === topLabels[i].label) {
-                    patch = _imageToPatchGrid.data[sum];
-                    patches.push(patch);
-                }
-            }
-            box = boxFromPatches(patches);
-            if (box) {
-                boxes.push(box);
-
-                // draw patch-labels if requested
-                if (_config.showRemainingPatchLabels) {
-                    for ( j = 0; j < patches.length; j++) {
-                        patch = patches[j];
-                        hsv[0] = (topLabels[i].label / (maxLabel + 1)) * 360;
-                        CVUtils.hsv2rgb(hsv, rgb);
-                        ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary, {color: "rgb(" + rgb.join(",") + ")", lineWidth: 2});
-                    }
-                }
-            }
-        }
-        return boxes;
-    }
-
-    /**
-     * Find similar moments (via cluster)
-     * @param {Object} moments
-     */
-    function similarMoments(moments) {
-        var clusters = CVUtils.cluster(moments, 0.90);
-        var topCluster = CVUtils.topGeneric(clusters, 1, function(e) {
-            return e.getPoints().length;
-        });
-        var points = [], result = [];
-        if (topCluster.length === 1) {
-            points = topCluster[0].item.getPoints();
-            for (var i = 0; i < points.length; i++) {
-                result.push(points[i].point);
-            }
-        }
-        return result;
-    }
-
-    function skeletonize(x, y) {
-        _binaryImageWrapper.subImageAsCopy(_subImageWrapper, CVUtils.imageRef(x, y));
-        _skeletonizer.skeletonize();
-        
-        // Show skeleton if requested
-        if (_config.showSkeleton) {
-            _skelImageWrapper.overlay(_canvasContainer.dom.binary, 360, CVUtils.imageRef(x, y));
-        }
-    }
-
-    /**
-     * Extracts and describes those patches which seem to contain a barcode pattern
-     * @param {Array} moments
-     * @param {Object} patchPos,
-     * @param {Number} x
-     * @param {Number} y
-     * @returns {Array} list of patches
-     */
-    function describePatch(moments, patchPos, x, y) {
-        var k,
-            avg,
-            sum = 0,
-            eligibleMoments = [],
-            matchingMoments,
-            patch,
-            patchesFound = [],
-            minComponentWeight = Math.ceil(_patchSize.x/3);
-
-        if (moments.length >= 2) {
-            // only collect moments which's area covers at least minComponentWeight pixels.
-            for ( k = 0; k < moments.length; k++) {
-                if (moments[k].m00 > minComponentWeight) {
-                    eligibleMoments.push(moments[k]);
-                }
-            }
-
-            // if at least 2 moments are found which have at least minComponentWeights covered
-            if (eligibleMoments.length >= 2) {
-                sum = eligibleMoments.length;
-                matchingMoments = similarMoments(eligibleMoments);
-                avg = 0;
-                // determine the similarity of the moments
-                for ( k = 0; k < matchingMoments.length; k++) {
-                    avg += matchingMoments[k].rad;
-                }
-
-                // Only two of the moments are allowed not to fit into the equation
-                // add the patch to the set
-                if (matchingMoments.length > 1 && matchingMoments.length >= (eligibleMoments.length / 4) * 3 && matchingMoments.length > moments.length / 4) {
-                    avg /= matchingMoments.length;
-                    patch = {
-                        index : patchPos[1] * _numPatches.x + patchPos[0],
-                        pos : {
-                            x : x,
-                            y : y
-                        },
-                        box : [vec2.create([x, y]), vec2.create([x + _subImageWrapper.size.x, y]), vec2.create([x + _subImageWrapper.size.x, y + _subImageWrapper.size.y]), vec2.create([x, y + _subImageWrapper.size.y])],
-                        moments : matchingMoments,
-                        rad : avg,
-                        vec : vec2.create([Math.cos(avg), Math.sin(avg)])
-                    };
-                    patchesFound.push(patch);
-                }
-            }
-        }
-        return patchesFound;
-    }
-
-    /**
-     * finds patches which are connected and share the same orientation
-     * @param {Object} patchesFound
-     */
-    function rasterizeAngularSimilarity(patchesFound) {
-        var label = 0,
-            threshold = 0.95,
-            currIdx = 0,
-            j,
-            patch,
-            hsv = [0, 1, 1],
-            rgb = [0, 0, 0];
-
-        function notYetProcessed() {
-            var i;
-            for ( i = 0; i < _patchLabelGrid.data.length; i++) {
-                if (_patchLabelGrid.data[i] === 0 && _patchGrid.data[i] === 1) {
-                    return i;
-                }
-            }
-            return _patchLabelGrid.length;
-        }
-
-        function trace(currentIdx) {
-            var x, y, currentPatch, patch, idx, dir, current = {
-                x : currentIdx % _patchLabelGrid.size.x,
-                y : (currentIdx / _patchLabelGrid.size.x) | 0
-            }, similarity;
-
-            if (currentIdx < _patchLabelGrid.data.length) {
-                currentPatch = _imageToPatchGrid.data[currentIdx];
-                // assign label
-                _patchLabelGrid.data[currentIdx] = label;
-                for ( dir = 0; dir < Tracer.searchDirections.length; dir++) {
-                    y = current.y + Tracer.searchDirections[dir][0];
-                    x = current.x + Tracer.searchDirections[dir][1];
-                    idx = y * _patchLabelGrid.size.x + x;
-
-                    // continue if patch empty
-                    if (_patchGrid.data[idx] === 0) {
-                        _patchLabelGrid.data[idx] = Number.MAX_VALUE;
-                        continue;
-                    }
-
-                    patch = _imageToPatchGrid.data[idx];
-                    if (_patchLabelGrid.data[idx] === 0) {
-                        similarity = Math.abs(vec2.dot(patch.vec, currentPatch.vec));
-                        if (similarity > threshold) {
-                            trace(idx);
-                        }
-                    }
-                }
-            }
-        }
-        
-        // prepare for finding the right patches
-        ArrayHelper.init(_patchGrid.data, 0);
-        ArrayHelper.init(_patchLabelGrid.data, 0);
-        ArrayHelper.init(_imageToPatchGrid.data, null);
-
-        for ( j = 0; j < patchesFound.length; j++) {
-            patch = patchesFound[j];
-            _imageToPatchGrid.data[patch.index] = patch;
-            _patchGrid.data[patch.index] = 1;
-        }
-
-        // rasterize the patches found to determine area
-        _patchGrid.zeroBorder();
-
-        while (( currIdx = notYetProcessed()) < _patchLabelGrid.data.length) {
-            label++;
-            trace(currIdx);
-        }
-        
-        // draw patch-labels if requested
-        if (_config.showPatchLabels) {
-            for ( j = 0; j < _patchLabelGrid.data.length; j++) {
-                if (_patchLabelGrid.data[j] > 0 && _patchLabelGrid.data[j] <= label) {
-                    patch = _imageToPatchGrid.data[j];
-                    hsv[0] = (_patchLabelGrid.data[j] / (label + 1)) * 360;
-                    CVUtils.hsv2rgb(hsv, rgb);
-                    ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary, {color: "rgb(" + rgb.join(",") + ")", lineWidth: 2});
-                }
-            }
-        }
-        
-        return label;
-    }
-
-    return {
-        init : function(inputImageWrapper, config) {
-            _config = config;
-            _inputImageWrapper = inputImageWrapper;
-
-            initBuffers();
-            initCanvas();
-        },
-
-        locate : function() {
-            var patchesFound,
-            topLabels,
-            boxes;
-
-            if (_config.halfSample) {
-                CVUtils.halfSample(_inputImageWrapper, _currentImageWrapper);
-            }
-
-            binarizeImage();
-            patchesFound = findPatches();
-            // return unless 5% or more patches are found
-            if (patchesFound.length < _numPatches.x * _numPatches.y * 0.05) {
-                return null;
-            }
-
-            // rasterrize area by comparing angular similarity;
-            var maxLabel = rasterizeAngularSimilarity(patchesFound);
-            if (maxLabel < 1) {
-                return null;
-            }
-
-            // search for area with the most patches (biggest connected area)
-            topLabels = findBiggestConnectedAreas(maxLabel);
-            if (topLabels.length === 0) {
-                return null;
-            }
-
-            boxes = findBoxes(topLabels, maxLabel);
-            return boxes;
-        },
-
-        checkImageConstraints: function(inputStream, config) {
-            var patchSize,
-                width = inputStream.getWidth(),
-                height = inputStream.getHeight(),
-                halfSample = config.halfSample ? 0.5 : 1,
-                size,
-                area;
-
-            // calculate width and height based on area
-            if (inputStream.getConfig().area) {
-                area = CVUtils.computeImageArea(width, height, inputStream.getConfig().area);
-                inputStream.setTopRight({x: area.sx, y: area.sy});
-                inputStream.setCanvasSize({x: width, y: height});
-                width = area.sw;
-                height = area.sh;
-            }
-
-            size = {
-                x: Math.floor(width * halfSample),
-                y: Math.floor(height * halfSample)
-            };
-
-            patchSize = CVUtils.calculatePatchSize(config.patchSize, size);
-            console.log("Patch-Size: " + JSON.stringify(patchSize));
-
-            inputStream.setWidth(Math.floor(Math.floor(size.x/patchSize.x)*(1/halfSample)*patchSize.x));
-            inputStream.setHeight(Math.floor(Math.floor(size.y/patchSize.y)*(1/halfSample)*patchSize.y));
-
-            if ((inputStream.getWidth() % patchSize.x) === 0 && (inputStream.getHeight() % patchSize.y) === 0) {
-                return true;
-            }
-
-            throw new Error("Image dimensions do not comply with the current settings: Width (" +
-                width + " )and height (" + height +
-                ") must a multiple of " + patchSize.x);
-        }
-    };
-});
-

src/barcode_reader.js

@@ -1,205 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-    function() {
-        "use strict";
-        
-        function BarcodeReader() {
-            this._row = [];
-            return this;
-        }
-        
-        BarcodeReader.prototype._nextUnset = function(line, start) {
-            var i;
-            
-            if (start === undefined) {
-                start = 0;
-            }
-            for (i = start; i < line.length; i++) {
-                if (!line[i]) {
-                    return i;
-                }
-            }
-            return line.length;
-        };
-        
-        BarcodeReader.prototype._matchPattern = function(counter, code) {
-            var i,
-                error = 0,
-                singleError = 0,
-                modulo = this.MODULO,
-                maxSingleError = this.SINGLE_CODE_ERROR || 1;
-                
-            for (i = 0; i < counter.length; i++) {
-                singleError = Math.abs(code[i] - counter[i]);
-                if (singleError > maxSingleError) {
-                    return Number.MAX_VALUE;
-                }
-                error += singleError;
-            }
-            return error/modulo;
-        };
-
-        BarcodeReader.prototype._nextSet = function(line, offset) {
-            var i;
-
-            offset = offset || 0;
-            for (i = offset; i < line.length; i++) {
-                if (line[i]) {
-                    return i;
-                }
-            }
-            return line.length;
-        };
-
-        BarcodeReader.prototype._normalize = function(counter, modulo) {
-            var i,
-                self = this,
-                sum = 0,
-                ratio,
-                numOnes = 0,
-                normalized = [],
-                norm = 0;
-                
-            if (!modulo) {
-                modulo = self.MODULO;
-            }
-            for (i = 0; i < counter.length; i++) {
-                if (counter[i] === 1) {
-                    numOnes++;
-                } else {
-                    sum += counter[i];
-                }
-            }
-            ratio = sum / (modulo - numOnes);
-            if (ratio > 1.0) {
-                for (i = 0; i < counter.length; i++) {
-                    norm = counter[i] === 1 ? counter[i] : counter[i] / ratio;
-                    normalized.push(norm);
-                }
-            } else {
-                ratio = (sum + numOnes)/modulo;
-                for (i = 0; i < counter.length; i++) {
-                    norm = counter[i] / ratio;
-                    normalized.push(norm);
-                }
-            }
-            return normalized;
-        };
-
-        BarcodeReader.prototype._matchTrace = function(cmpCounter, epsilon) {
-            var counter = [],
-                i,
-                self = this,
-                offset = self._nextSet(self._row),
-                isWhite = !self._row[offset],
-                counterPos = 0,
-                bestMatch = {
-                    error : Number.MAX_VALUE,
-                    code : -1,
-                    start : 0
-                },
-                error;
-
-            if (cmpCounter) {
-                for ( i = 0; i < cmpCounter.length; i++) {
-                    counter.push(0);
-                }
-                for ( i = offset; i < self._row.length; i++) {
-                    if (self._row[i] ^ isWhite) {
-                        counter[counterPos]++;
-                    } else {
-                        if (counterPos === counter.length - 1) {
-                            error = self._matchPattern(counter, cmpCounter);
-
-                            if (error < epsilon) {
-                                bestMatch.start = i - offset;
-                                bestMatch.end = i;
-                                bestMatch.counter = counter;
-                                return bestMatch;
-                            } else {
-                                return null;
-                            }
-                        } else {
-                            counterPos++;
-                        }
-                        counter[counterPos] = 1;
-                        isWhite = !isWhite;
-                    }
-                }
-            } else {
-                counter.push(0);
-                for ( i = offset; i < self._row.length; i++) {
-                    if (self._row[i] ^ isWhite) {
-                        counter[counterPos]++;
-                    } else {
-                        counterPos++;
-                        counter.push(0);
-                        counter[counterPos] = 1;
-                        isWhite = !isWhite;
-                    }
-                }
-            }
-
-            // if cmpCounter was not given
-            bestMatch.start = offset;
-            bestMatch.end = self._row.length - 1;
-            bestMatch.counter = counter;
-            return bestMatch;
-        };
-        
-        BarcodeReader.prototype.decodePattern = function(pattern) {
-            var self = this,
-                result;
-            
-            self._row = pattern;
-            result = self._decode();
-            if (result === null) {
-                self._row.reverse();
-                result = self._decode();
-                if (result) {
-                    result.direction = BarcodeReader.DIRECTION.REVERSE;
-                    result.start = self._row.length - result.start;
-                    result.end = self._row.length - result.end;
-                }
-            } else {
-                result.direction = BarcodeReader.DIRECTION.FORWARD;
-            }
-            if (result) {
-                result.format = self.FORMAT;
-            }
-            return result;
-        };
-
-        BarcodeReader.prototype._matchRange = function(start, end, value) {
-            var i;
-
-            start = start < 0 ? 0 : start;
-            for (i = start; i < end; i++) {
-                if (this._row[i] !== value) {
-                    return false;
-                }
-            }
-            return true;
-        };
-
-        Object.defineProperty(BarcodeReader.prototype, "FORMAT", {
-            value: 'unknown',
-            writeable: false
-        });
-        
-        BarcodeReader.DIRECTION = {
-            FORWARD : 1,
-            REVERSE : -1
-        };
-        
-        BarcodeReader.Exception = {
-            StartNotFoundException : "Start-Info was not found!",
-            CodeNotFoundException : "Code could not be found!",
-            PatternNotFoundException : "Pattern could not be found!"
-        };
-        
-        return (BarcodeReader);
-    }
-);

src/bresenham.js

@@ -1,217 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(["cv_utils", "image_wrapper"], function(CVUtils, ImageWrapper) {
-    "use strict";
-    var Bresenham = {};
-
-    var Slope = {
-        DIR : {
-            UP : 1,
-            DOWN : -1
-        }
-    };
-    /**
-     * Scans a line of the given image from point p1 to p2 and returns a result object containing 
-     * gray-scale values (0-255) of the underlying pixels in addition to the min
-     * and max values.
-     * @param {Object} imageWrapper
-     * @param {Object} p1 The start point {x,y}
-     * @param {Object} p2 The end point {x,y}
-     * @returns {line, min, max}
-     */
-    Bresenham.getBarcodeLine = function(imageWrapper, p1, p2) {
-        var x0 = p1.x | 0,
-            y0 = p1.y | 0,
-            x1 = p2.x | 0,
-            y1 = p2.y | 0,
-            steep = Math.abs(y1 - y0) > Math.abs(x1 - x0),
-            deltax,
-            deltay,
-            error,
-            ystep,
-            y,
-            tmp,
-            x,
-            line = [],
-            imageData = imageWrapper.data,
-            width = imageWrapper.size.x,
-            sum = 0,
-            val,
-            min = 255,
-            max = 0;
-
-        function read(a, b) {
-            val = imageData[b * width + a];
-            sum += val;
-            min = val < min ? val : min;
-            max = val > max ? val : max;
-            line.push(val);
-        }
-
-        if (steep) {
-            tmp = x0;
-            x0 = y0;
-            y0 = tmp;
-
-            tmp = x1;
-            x1 = y1;
-            y1 = tmp;
-        }
-        if (x0 > x1) {
-            tmp = x0;
-            x0 = x1;
-            x1 = tmp;
-
-            tmp = y0;
-            y0 = y1;
-            y1 = tmp;
-        }
-        deltax = x1 - x0;
-        deltay = Math.abs(y1 - y0);
-        error = (deltax / 2) | 0;
-        y = y0;
-        ystep = y0 < y1 ? 1 : -1;
-        for ( x = x0; x < x1; x++) {
-            if(steep){
-                read(y, x);
-            } else {
-                read(x, y);
-            }
-            error = error - deltay;
-            if (error < 0) {
-                y = y + ystep;
-                error = error + deltax;
-            }
-        }
-
-        return {
-            line : line,
-            min : min,
-            max : max
-        };
-    };
-
-    Bresenham.toOtsuBinaryLine = function(result) {
-        var line = result.line,
-            image = new ImageWrapper({x: line.length - 1, y: 1}, line),
-            threshold = CVUtils.determineOtsuThreshold(image, 5);
-
-        line = CVUtils.sharpenLine(line);
-        CVUtils.thresholdImage(image, threshold);
-
-        return {
-            line: line,
-            threshold: threshold
-        };
-    };
-    
-    /**
-     * Converts the result from getBarcodeLine into a binary representation 
-     * also considering the frequency and slope of the signal for more robust results
-     * @param {Object} result {line, min, max}
-     */
-    Bresenham.toBinaryLine = function(result) {
-
-        var min = result.min,
-            max = result.max,
-            line = result.line,
-            slope,
-            slope2,
-            center = min + (max - min) / 2,
-            extrema = [],
-            currentDir,
-            dir,
-            threshold = (max - min) / 12,
-            rThreshold = -threshold,
-            i,
-            j;
-
-        // 1. find extrema
-        currentDir = line[0] > center ? Slope.DIR.UP : Slope.DIR.DOWN;
-        extrema.push({
-            pos : 0,
-            val : line[0]
-        });
-        for ( i = 0; i < line.length - 2; i++) {
-            slope = (line[i + 1] - line[i]);
-            slope2 = (line[i + 2] - line[i + 1]);
-            if ((slope + slope2) < rThreshold && line[i + 1] < (center*1.5)) {
-                dir = Slope.DIR.DOWN;
-            } else if ((slope + slope2) > threshold && line[i + 1] > (center*0.5)) {
-                dir = Slope.DIR.UP;
-            } else {
-                dir = currentDir;
-            }
-
-            if (currentDir !== dir) {
-                extrema.push({
-                    pos : i,
-                    val : line[i]
-                });
-                currentDir = dir;
-            }
-        }
-        extrema.push({
-            pos : line.length,
-            val : line[line.length - 1]
-        });
-
-        for ( j = extrema[0].pos; j < extrema[1].pos; j++) {
-            line[j] = line[j] > center ? 0 : 1;
-        }
-
-        // iterate over extrema and convert to binary based on avg between minmax
-        for ( i = 1; i < extrema.length - 1; i++) {
-            if (extrema[i + 1].val > extrema[i].val) {
-                threshold = (extrema[i].val + ((extrema[i + 1].val - extrema[i].val) / 3) * 2) | 0;
-            } else {
-                threshold = (extrema[i + 1].val + ((extrema[i].val - extrema[i + 1].val) / 3)) | 0;
-            }
-
-            for ( j = extrema[i].pos; j < extrema[i + 1].pos; j++) {
-                line[j] = line[j] > threshold ? 0 : 1;
-            }
-        }
-
-        return {
-            line : line,
-            threshold : threshold
-        };
-    };
-    
-    /**
-     * Used for development only 
-     */
-    Bresenham.debug = {
-        printFrequency: function(line, canvas) {
-            var i,
-                ctx = canvas.getContext("2d");
-            canvas.width = line.length;
-            canvas.height = 256;
-    
-            ctx.beginPath();
-            ctx.strokeStyle = "blue";
-            for ( i = 0; i < line.length; i++) {
-                ctx.moveTo(i, 255);
-                ctx.lineTo(i, 255 - line[i]);
-            }
-            ctx.stroke();
-            ctx.closePath();
-        },
-        
-        printPattern: function(line, canvas) {
-            var ctx = canvas.getContext("2d"), i;
-    
-            canvas.width = line.length;
-            ctx.fillColor = "black";
-            for ( i = 0; i < line.length; i++) {
-                if (line[i] === 1) {
-                    ctx.fillRect(i, 0, 1, 100);
-                }
-            }
-        }
-    };
-
-    return (Bresenham);
-}); 

src/camera_access.js

@@ -1,143 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define, MediaStreamTrack */
-
-define(["html_utils"], function(HtmlUtils) {
-    "use strict";
-    var streamRef,
-        loadedDataHandler;
-
-    /**
-     * Wraps browser-specific getUserMedia
-     * @param {Object} constraints
-     * @param {Object} success Callback
-     * @param {Object} failure Callback
-     */
-    function getUserMedia(constraints, success, failure) {
-        if (typeof navigator.getUserMedia !== 'undefined') {
-            navigator.getUserMedia(constraints, function (stream) {
-                streamRef = stream;
-                var videoSrc = (window.URL && window.URL.createObjectURL(stream)) || stream;
-                success.apply(null, [videoSrc]);
-            }, failure);
-        } else {
-            failure(new TypeError("getUserMedia not available"));
-        }
-    }
-
-    function loadedData(video, callback) {
-        var attempts = 10;
-
-        function checkVideo() {
-            if (attempts > 0) {
-                if (video.videoWidth > 0 && video.videoHeight > 0) {
-                    console.log(video.videoWidth + "px x " + video.videoHeight + "px");
-                    callback();
-                } else {
-                    window.setTimeout(checkVideo, 500);
-                }
-            } else {
-                callback('Unable to play video stream. Is webcam working?');
-            }
-            attempts--;
-        }
-        checkVideo();
-    }
-
-    /**
-     * Tries to attach the camera-stream to a given video-element
-     * and calls the callback function when the content is ready
-     * @param {Object} constraints
-     * @param {Object} video
-     * @param {Object} callback
-     */
-    function initCamera(constraints, video, callback) {
-        getUserMedia(constraints, function(src) {
-            video.src = src;
-            if (loadedDataHandler) {
-                video.removeEventListener("loadeddata", loadedDataHandler, false);
-            }
-            loadedDataHandler = loadedData.bind(null, video, callback);
-            video.addEventListener('loadeddata', loadedDataHandler, false);
-            video.play();
-        }, function(e) {
-            callback(e);
-        });
-    }
-
-    /**
-     * Normalizes the incoming constraints to satisfy the current browser
-     * @param config
-     * @param cb Callback which is called whenever constraints are created
-     * @returns {*}
-     */
-    function normalizeConstraints(config, cb) {
-        var constraints = {
-                audio: false,
-                video: true
-            },
-            videoConstraints = HtmlUtils.mergeObjects({
-                width: 640,
-                height: 480,
-                minAspectRatio: 0,
-                maxAspectRatio: 100,
-                facing: "environment"
-            }, config);
-
-        if ( typeof MediaStreamTrack !== 'undefined' && typeof MediaStreamTrack.getSources !== 'undefined') {
-            MediaStreamTrack.getSources(function(sourceInfos) {
-                var videoSourceId;
-                for (var i = 0; i != sourceInfos.length; ++i) {
-                    var sourceInfo = sourceInfos[i];
-                    if (sourceInfo.kind == "video" && sourceInfo.facing == videoConstraints.facing) {
-                        videoSourceId = sourceInfo.id;
-                    }
-                }
-                constraints.video = {
-                    mandatory: {
-                        minWidth: videoConstraints.width,
-                        minHeight: videoConstraints.height,
-                        minAspectRatio: videoConstraints.minAspectRatio,
-                        maxAspectRatio: videoConstraints.maxAspectRatio
-                    },
-                    optional: [{
-                        sourceId: videoSourceId
-                    }]
-                };
-                return cb(constraints);
-            });
-        } else {
-            constraints.video = {
-                mediaSource: "camera",
-                width: { min: videoConstraints.width, max: videoConstraints.width },
-                height: { min: videoConstraints.height, max: videoConstraints.height },
-                require: ["width", "height"]
-            };
-            return cb(constraints);
-        }
-    }
-
-    /**
-     * Requests the back-facing camera of the user. The callback is called
-     * whenever the stream is ready to be consumed, or if an error occures.
-     * @param {Object} video
-     * @param {Object} callback
-     */
-    function request(video, videoConstraints, callback) {
-        normalizeConstraints(videoConstraints, function(constraints) {
-            initCamera(constraints, video, callback);
-        });
-    }
-
-    return {
-        request : function(video, constraints, callback) {
-            request(video, constraints, callback);
-        },
-        release : function() {
-            var tracks = streamRef && streamRef.getVideoTracks();
-            if (tracks.length) {
-                tracks[0].stop();
-            }
-            streamRef = null;
-        }
-    };
-});

src/cluster.js

@@ -1,71 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define, vec2 */
-
-define(function() {
-    "use strict";
-    
-    /**
-     * Creates a cluster for grouping similar orientations of datapoints 
-     */
-    var Cluster = {
-        create : function(point, threshold) {
-            var points = [], center = {
-                rad : 0,
-                vec : vec2.create([0, 0])
-            }, pointMap = {};
-
-            function init() {
-                add(point);
-                updateCenter();
-            }
-
-            function add(point) {
-                pointMap[point.id] = point;
-                points.push(point);
-            }
-
-            function updateCenter() {
-                var i, sum = 0;
-                for ( i = 0; i < points.length; i++) {
-                    sum += points[i].rad;
-                }
-                center.rad = sum / points.length;
-                center.vec = vec2.create([Math.cos(center.rad), Math.sin(center.rad)]);
-            }
-
-            init();
-
-            return {
-                add : function(point) {
-                    if (!pointMap[point.id]) {
-                        add(point);
-                        updateCenter();
-                    }
-                },
-                fits : function(point) {
-                    // check cosine similarity to center-angle
-                    var similarity = Math.abs(vec2.dot(point.point.vec, center.vec));
-                    if (similarity > threshold) {
-                        return true;
-                    }
-                    return false;
-                },
-                getPoints : function() {
-                    return points;
-                },
-                getCenter : function() {
-                    return center;
-                }
-            };
-        },
-        createPoint : function(point, id, property) {
-            return {
-                rad : point[property],
-                point : point,
-                id : id
-            };
-        }
-    };
-
-    return (Cluster);
-});

src/codabar_reader.js

@@ -1,314 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-    [
-        "./barcode_reader"
-    ],
-    function(BarcodeReader) {
-        "use strict";
-
-        function CodabarReader() {
-            BarcodeReader.call(this);
-            this._counters = [];
-        }
-
-        var properties = {
-            ALPHABETH_STRING: {value: "0123456789-$:/.+ABCD"},
-            ALPHABET: {value: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 45, 36, 58, 47, 46, 43, 65, 66, 67, 68]},
-            CHARACTER_ENCODINGS: {value: [0x003, 0x006, 0x009, 0x060, 0x012, 0x042, 0x021, 0x024, 0x030, 0x048, 0x00c, 0x018, 0x045, 0x051, 0x054, 0x015, 0x01A, 0x029, 0x00B, 0x00E]},
-            START_END: {value: [0x01A, 0x029, 0x00B, 0x00E]},
-            MIN_ENCODED_CHARS: {value: 4},
-            MAX_ACCEPTABLE: {value: 2.0},
-            PADDING: {value: 1.5},
-            FORMAT: {value: "codabar", writeable: false}
-        };
-
-        CodabarReader.prototype = Object.create(BarcodeReader.prototype, properties);
-        CodabarReader.prototype.constructor = CodabarReader;
-
-        CodabarReader.prototype._decode = function() {
-            var self = this,
-                result = [],
-                start,
-                decodedChar,
-                pattern,
-                nextStart,
-                end;
-
-            self._fillCounters();
-            start = self._findStart();
-            if (!start) {
-                return null;
-            }
-            nextStart = start.startCounter;
-
-            do {
-                pattern = self._toPattern(nextStart);
-                if (pattern < 0) {
-                    return null;
-                }
-                decodedChar = self._patternToChar(pattern);
-                if (decodedChar < 0){
-                    return null;
-                }
-                result.push(decodedChar);
-                nextStart += 8;
-                if (result.length > 1 && self._isStartEnd(pattern)) {
-                    break;
-                }
-            } while(nextStart < self._counters.length);
-
-            // verify end
-            if ((result.length - 2) < self.MIN_ENCODED_CHARS || !self._isStartEnd(pattern)) {
-                return null;
-            }
-
-            // verify end white space
-            if (!self._verifyWhitespace(start.startCounter, nextStart - 8)){
-                return null;
-            }
-
-            if (!self._validateResult(result, start.startCounter)){
-                return null;
-            }
-
-            nextStart = nextStart > self._counters.length ? self._counters.length : nextStart;
-            end = start.start + self._sumCounters(start.startCounter, nextStart - 8);
-
-            return {
-                code : result.join(""),
-                start : start.start,
-                end : end,
-                startInfo : start,
-                decodedCodes : result
-            };
-        };
-
-        CodabarReader.prototype._verifyWhitespace = function(startCounter, endCounter) {
-            if ((startCounter - 1 <= 0) || this._counters[startCounter-1] >= (this._calculatePatternLength(startCounter) / 2.0)) {
-                if ((endCounter + 8 >= this._counters.length) || this._counters[endCounter+7] >= (this._calculatePatternLength(endCounter) / 2.0)) {
-                    return true;
-                }
-            }
-            return false;
-        };
-
-        CodabarReader.prototype._calculatePatternLength = function(offset) {
-            var i,
-                sum = 0;
-
-            for (i = offset; i < offset + 7; i++) {
-                sum += this._counters[i];
-            }
-
-            return sum;
-        };
-
-        CodabarReader.prototype._thresholdResultPattern = function(result, startCounter){
-            var self = this,
-                categorization = {
-                    space: {
-                        narrow: { size: 0, counts: 0, min: 0, max: Number.MAX_VALUE},
-                        wide: {size: 0, counts: 0, min: 0, max: Number.MAX_VALUE}
-                    },
-                    bar: {
-                        narrow: { size: 0, counts: 0, min: 0, max: Number.MAX_VALUE},
-                        wide: { size: 0, counts: 0, min: 0, max: Number.MAX_VALUE}
-                    }
-                },
-                kind,
-                cat,
-                i,
-                j,
-                pos = startCounter,
-                pattern;
-
-            for (i = 0; i < result.length; i++){
-                pattern = self._charToPattern(result[i]);
-                for (j = 6; j >= 0; j--) {
-                    kind = (j & 1) === 2 ? categorization.bar : categorization.space;
-                    cat = (pattern & 1)  === 1 ? kind.wide : kind.narrow;
-                    cat.size += self._counters[pos + j];
-                    cat.counts++;
-                    pattern >>= 1;
-                }
-                pos += 8;
-            }
-
-            ["space", "bar"].forEach(function(key) {
-                var kind = categorization[key];
-                kind.wide.min = Math.floor((kind.narrow.size/kind.narrow.counts + kind.wide.size / kind.wide.counts) / 2);
-                kind.narrow.max = Math.ceil(kind.wide.min);
-                kind.wide.max = Math.ceil((kind.wide.size * self.MAX_ACCEPTABLE + self.PADDING) / kind.wide.counts);
-            });
-
-            return categorization;
-        };
-
-        CodabarReader.prototype._charToPattern = function(char) {
-            var self = this,
-                charCode = char.charCodeAt(0),
-                i;
-
-            for (i = 0; i < self.ALPHABET.length; i++) {
-                if (self.ALPHABET[i] === charCode){
-                    return self.CHARACTER_ENCODINGS[i];
-                }
-            }
-            return 0x0;
-        };
-
-        CodabarReader.prototype._validateResult = function(result, startCounter) {
-            var self = this,
-                thresholds = self._thresholdResultPattern(result, startCounter),
-                i,
-                j,
-                kind,
-                cat,
-                size,
-                pos = startCounter,
-                pattern;
-
-            for (i = 0; i < result.length; i++) {
-                pattern = self._charToPattern(result[i]);
-                for (j = 6; j >= 0; j--) {
-                    kind = (j & 1) === 0 ? thresholds.bar : thresholds.space;
-                    cat = (pattern & 1)  === 1 ? kind.wide : kind.narrow;
-                    size = self._counters[pos + j];
-                    if (size < cat.min || size > cat.max) {
-                        return false;
-                    }
-                    pattern >>= 1;
-                }
-                pos += 8;
-            }
-            return true;
-        };
-
-        CodabarReader.prototype._fillCounters = function() {
-            var self = this,
-                counterPos = 0,
-                isWhite = true,
-                offset = self._nextUnset(self._row),
-                i;
-
-            self._counters.length = 0;
-            self._counters[counterPos] = 0;
-            for (i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    this._counters[counterPos]++;
-                } else {
-                    counterPos++;
-                    this._counters[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-        };
-
-        CodabarReader.prototype._patternToChar = function(pattern) {
-            var i,
-                self = this;
-
-            for (i = 0; i < self.CHARACTER_ENCODINGS.length; i++) {
-                if (self.CHARACTER_ENCODINGS[i] === pattern) {
-                    return String.fromCharCode(self.ALPHABET[i]);
-                }
-            }
-            return -1;
-        };
-
-        CodabarReader.prototype._computeAlternatingThreshold = function(offset, end) {
-            var i,
-                min = Number.MAX_VALUE,
-                max = 0,
-                counter;
-
-            for (i = offset; i < end; i += 2){
-                counter = this._counters[i];
-                if (counter > max) {
-                    max = counter;
-                }
-                if (counter < min) {
-                    min = counter;
-                }
-            }
-
-            return ((min + max) / 2.0) | 0;
-        };
-
-        CodabarReader.prototype._toPattern = function(offset) {
-            var numCounters = 7,
-                end = offset + numCounters,
-                barThreshold,
-                spaceThreshold,
-                bitmask = 1 << (numCounters - 1),
-                pattern = 0,
-                i,
-                threshold;
-
-            if (end > this._counters.length) {
-                return -1;
-            }
-
-            barThreshold = this._computeAlternatingThreshold(offset, end);
-            spaceThreshold = this._computeAlternatingThreshold(offset + 1, end);
-
-            for (i = 0; i < numCounters; i++){
-                threshold = (i & 1) === 0 ? barThreshold : spaceThreshold;
-                if (this._counters[offset + i] > threshold) {
-                    pattern |= bitmask;
-                }
-                bitmask >>= 1;
-            }
-
-            return pattern;
-        };
-
-        CodabarReader.prototype._isStartEnd = function(pattern) {
-            var i;
-
-            for (i = 0; i < this.START_END.length; i++) {
-                if (this.START_END[i] === pattern) {
-                    return true;
-                }
-            }
-            return false;
-        };
-
-        CodabarReader.prototype._sumCounters = function(start, end) {
-            var i,
-                sum = 0;
-
-            for (i = start; i < end; i++) {
-                sum += this._counters[i];
-            }
-            return sum;
-        };
-
-        CodabarReader.prototype._findStart = function() {
-            var self = this,
-                i,
-                pattern,
-                start = self._nextUnset(self._row),
-                end;
-
-            for (i = 1; i < this._counters.length; i++) {
-                pattern = self._toPattern(i);
-                if (pattern !== -1 && self._isStartEnd(pattern)) {
-                    // TODO: Look for whitespace ahead
-                    start += self._sumCounters(0, i);
-                    end = start + self._sumCounters(i, i + 8);
-                    return {
-                        start: start,
-                        end: end,
-                        startCounter: i,
-                        endCounter: i + 8
-                    };
-                }
-            }
-        };
-
-        return (CodabarReader);
-    }
-);

src/code_128_reader.js

@@ -1,423 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-     [
-        "./barcode_reader"
-    ],
-    function(BarcodeReader) {
-        "use strict";
-        
-        function Code128Reader() {
-            BarcodeReader.call(this);
-        }
-        
-        var properties = {
-            CODE_SHIFT : {value: 98},
-            CODE_C : {value: 99},
-            CODE_B : {value: 100},
-            CODE_A : {value: 101},
-            START_CODE_A : {value: 103},
-            START_CODE_B : {value: 104},
-            START_CODE_C : {value: 105},
-            STOP_CODE : {value: 106},
-            MODULO : {value: 11},
-            CODE_PATTERN : {value: [
-                [2, 1, 2, 2, 2, 2],
-                [2, 2, 2, 1, 2, 2],
-                [2, 2, 2, 2, 2, 1],
-                [1, 2, 1, 2, 2, 3],
-                [1, 2, 1, 3, 2, 2],
-                [1, 3, 1, 2, 2, 2],
-                [1, 2, 2, 2, 1, 3],
-                [1, 2, 2, 3, 1, 2],
-                [1, 3, 2, 2, 1, 2],
-                [2, 2, 1, 2, 1, 3],
-                [2, 2, 1, 3, 1, 2],
-                [2, 3, 1, 2, 1, 2],
-                [1, 1, 2, 2, 3, 2],
-                [1, 2, 2, 1, 3, 2],
-                [1, 2, 2, 2, 3, 1],
-                [1, 1, 3, 2, 2, 2],
-                [1, 2, 3, 1, 2, 2],
-                [1, 2, 3, 2, 2, 1],
-                [2, 2, 3, 2, 1, 1],
-                [2, 2, 1, 1, 3, 2],
-                [2, 2, 1, 2, 3, 1],
-                [2, 1, 3, 2, 1, 2],
-                [2, 2, 3, 1, 1, 2],
-                [3, 1, 2, 1, 3, 1],
-                [3, 1, 1, 2, 2, 2],
-                [3, 2, 1, 1, 2, 2],
-                [3, 2, 1, 2, 2, 1],
-                [3, 1, 2, 2, 1, 2],
-                [3, 2, 2, 1, 1, 2],
-                [3, 2, 2, 2, 1, 1],
-                [2, 1, 2, 1, 2, 3],
-                [2, 1, 2, 3, 2, 1],
-                [2, 3, 2, 1, 2, 1],
-                [1, 1, 1, 3, 2, 3],
-                [1, 3, 1, 1, 2, 3],
-                [1, 3, 1, 3, 2, 1],
-                [1, 1, 2, 3, 1, 3],
-                [1, 3, 2, 1, 1, 3],
-                [1, 3, 2, 3, 1, 1],
-                [2, 1, 1, 3, 1, 3],
-                [2, 3, 1, 1, 1, 3],
-                [2, 3, 1, 3, 1, 1],
-                [1, 1, 2, 1, 3, 3],
-                [1, 1, 2, 3, 3, 1],
-                [1, 3, 2, 1, 3, 1],
-                [1, 1, 3, 1, 2, 3],
-                [1, 1, 3, 3, 2, 1],
-                [1, 3, 3, 1, 2, 1],
-                [3, 1, 3, 1, 2, 1],
-                [2, 1, 1, 3, 3, 1],
-                [2, 3, 1, 1, 3, 1],
-                [2, 1, 3, 1, 1, 3],
-                [2, 1, 3, 3, 1, 1],
-                [2, 1, 3, 1, 3, 1],
-                [3, 1, 1, 1, 2, 3],
-                [3, 1, 1, 3, 2, 1],
-                [3, 3, 1, 1, 2, 1],
-                [3, 1, 2, 1, 1, 3],
-                [3, 1, 2, 3, 1, 1],
-                [3, 3, 2, 1, 1, 1],
-                [3, 1, 4, 1, 1, 1],
-                [2, 2, 1, 4, 1, 1],
-                [4, 3, 1, 1, 1, 1],
-                [1, 1, 1, 2, 2, 4],
-                [1, 1, 1, 4, 2, 2],
-                [1, 2, 1, 1, 2, 4],
-                [1, 2, 1, 4, 2, 1],
-                [1, 4, 1, 1, 2, 2],
-                [1, 4, 1, 2, 2, 1],
-                [1, 1, 2, 2, 1, 4],
-                [1, 1, 2, 4, 1, 2],
-                [1, 2, 2, 1, 1, 4],
-                [1, 2, 2, 4, 1, 1],
-                [1, 4, 2, 1, 1, 2],
-                [1, 4, 2, 2, 1, 1],
-                [2, 4, 1, 2, 1, 1],
-                [2, 2, 1, 1, 1, 4],
-                [4, 1, 3, 1, 1, 1],
-                [2, 4, 1, 1, 1, 2],
-                [1, 3, 4, 1, 1, 1],
-                [1, 1, 1, 2, 4, 2],
-                [1, 2, 1, 1, 4, 2],
-                [1, 2, 1, 2, 4, 1],
-                [1, 1, 4, 2, 1, 2],
-                [1, 2, 4, 1, 1, 2],
-                [1, 2, 4, 2, 1, 1],
-                [4, 1, 1, 2, 1, 2],
-                [4, 2, 1, 1, 1, 2],
-                [4, 2, 1, 2, 1, 1],
-                [2, 1, 2, 1, 4, 1],
-                [2, 1, 4, 1, 2, 1],
-                [4, 1, 2, 1, 2, 1],
-                [1, 1, 1, 1, 4, 3],
-                [1, 1, 1, 3, 4, 1],
-                [1, 3, 1, 1, 4, 1],
-                [1, 1, 4, 1, 1, 3],
-                [1, 1, 4, 3, 1, 1],
-                [4, 1, 1, 1, 1, 3],
-                [4, 1, 1, 3, 1, 1],
-                [1, 1, 3, 1, 4, 1],
-                [1, 1, 4, 1, 3, 1],
-                [3, 1, 1, 1, 4, 1],
-                [4, 1, 1, 1, 3, 1],
-                [2, 1, 1, 4, 1, 2],
-                [2, 1, 1, 2, 1, 4],
-                [2, 1, 1, 2, 3, 2],
-                [2, 3, 3, 1, 1, 1, 2]
-            ]},
-            SINGLE_CODE_ERROR: {value: 1},
-            AVG_CODE_ERROR: {value: 0.5},
-            FORMAT: {value: "code_128", writeable: false}
-        };
-        
-        Code128Reader.prototype = Object.create(BarcodeReader.prototype, properties);
-        Code128Reader.prototype.constructor = Code128Reader;
-        
-        Code128Reader.prototype._decodeCode = function(start) {
-            var counter = [0, 0, 0, 0, 0, 0],
-                i,
-                self = this,
-                offset = start,
-                isWhite = !self._row[offset],
-                counterPos = 0,
-                bestMatch = {
-                    error : Number.MAX_VALUE,
-                    code : -1,
-                    start : start,
-                    end : start
-                },
-                code,
-                error,
-                normalized;
-
-            for ( i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    if (counterPos === counter.length - 1) {
-                        normalized = self._normalize(counter);
-                        if (normalized) {
-                            for (code = 0; code < self.CODE_PATTERN.length; code++) {
-                                error = self._matchPattern(normalized, self.CODE_PATTERN[code]);
-                                if (error < bestMatch.error) {
-                                    bestMatch.code = code;
-                                    bestMatch.error = error;
-                                }
-                            }
-                            bestMatch.end = i;
-                            return bestMatch;
-                        }
-                    } else {
-                        counterPos++;
-                    }
-                    counter[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-            return null;
-        };
-
-        Code128Reader.prototype._findStart = function() {
-            var counter = [0, 0, 0, 0, 0, 0],
-                i,
-                self = this,
-                offset = self._nextSet(self._row),
-                isWhite = false,
-                counterPos = 0,
-                bestMatch = {
-                    error : Number.MAX_VALUE,
-                    code : -1,
-                    start : 0,
-                    end : 0
-                },
-                code,
-                error,
-                j,
-                sum,
-                normalized;
-                
-            for ( i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    if (counterPos === counter.length - 1) {
-                        sum = 0;
-                        for ( j = 0; j < counter.length; j++) {
-                            sum += counter[j];
-                        }
-                        normalized = self._normalize(counter);
-                        if (normalized) {
-                            for (code = self.START_CODE_A; code <= self.START_CODE_C; code++) {
-                                error = self._matchPattern(normalized, self.CODE_PATTERN[code]);
-                                if (error < bestMatch.error) {
-                                    bestMatch.code = code;
-                                    bestMatch.error = error;
-                                }
-                            }
-                            if (bestMatch.error < self.AVG_CODE_ERROR) {
-                                bestMatch.start = i - sum;
-                                bestMatch.end = i;
-                                return bestMatch;
-                            }
-                        }
-
-                        for ( j = 0; j < 4; j++) {
-                            counter[j] = counter[j + 2];
-                        }
-                        counter[4] = 0;
-                        counter[5] = 0;
-                        counterPos--;
-                    } else {
-                        counterPos++;
-                    }
-                    counter[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-            return null;
-        };
-
-        Code128Reader.prototype._decode = function() {
-            var self = this,
-                startInfo = self._findStart(),
-                code = null,
-                done = false,
-                result = [],
-                multiplier = 0,
-                checksum = 0,
-                codeset,
-                rawResult = [],
-                decodedCodes = [],
-                shiftNext = false,
-                unshift,
-                lastCharacterWasPrintable;
-
-            if (startInfo === null) {
-                return null;
-            }
-            code = {
-                code : startInfo.code,
-                start : startInfo.start,
-                end : startInfo.end
-            };
-            decodedCodes.push(code);
-            checksum = code.code;
-            switch(code.code) {
-            case self.START_CODE_A:
-                codeset = self.CODE_A;
-                break;
-            case self.START_CODE_B:
-                codeset = self.CODE_B;
-                break;
-            case self.START_CODE_C:
-                codeset = self.CODE_C;
-                break;
-            default:
-                return null;
-            }
-
-            while (!done) {
-                unshift = shiftNext;
-                shiftNext = false;
-                code = self._decodeCode(code.end);
-                if (code !== null) {
-                    if (code.code !== self.STOP_CODE) {
-                        rawResult.push(code.code);
-                        multiplier++;
-                        checksum += multiplier * code.code;
-                    }
-                    decodedCodes.push(code);
-
-                    switch(codeset) {
-                    case self.CODE_A:
-                        if (code.code < 64) {
-                            result.push(String.fromCharCode(32 + code.code));
-                        } else if (code.code < 96) {
-                            result.push(String.fromCharCode(code.code - 64));
-                        } else {
-                            switch (code.code) {
-                            case self.CODE_SHIFT:
-                                shiftNext = true;
-                                codeset = self.CODE_B;
-                                break;
-                            case self.CODE_B:
-                                codeset = self.CODE_B;
-                                break;
-                            case self.CODE_C:
-                                codeset = self.CODE_C;
-                                break;
-                            case self.STOP_CODE:
-                                done = true;
-                                break;
-                            }
-                        }
-                        break;
-                    case self.CODE_B:
-                        if (code.code < 96) {
-                            result.push(String.fromCharCode(32 + code.code));
-                        } else {
-                            if (code.code != self.STOP_CODE) {
-                                lastCharacterWasPrintable = false;
-                            }
-                            switch (code.code) {
-                            case self.CODE_SHIFT:
-                                shiftNext = true;
-                                codeset = self.CODE_A;
-                                break;
-                            case self.CODE_A:
-                                codeset = self.CODE_A;
-                                break;
-                            case self.CODE_C:
-                                codeset = self.CODE_C;
-                                break;
-                            case self.STOP_CODE:
-                                done = true;
-                                break;
-                            }
-                        }
-                        break;
-                    case self.CODE_C:
-                        if (code.code < 100) {
-                            result.push(code.code < 10 ? "0" + code.code : code.code);
-                        }
-                        switch (code.code) {
-                        case self.CODE_A:
-                            codeset = self.CODE_A;
-                            break;
-                        case self.CODE_B:
-                            codeset = self.CODE_B;
-                            break;
-                        case self.STOP_CODE:
-                            done = true;
-                            break;
-                        }
-                        break;
-                    }
-                } else {
-                    done = true;
-                }
-                if (unshift) {
-                    codeset = codeset == self.CODE_A ? self.CODE_B : self.CODE_A;
-                }
-            }
-
-            if (code === null) {
-                return null;
-            }
-
-            // find end bar
-            code.end = self._nextUnset(self._row, code.end);
-            if(!self._verifyTrailingWhitespace(code)){
-                return null;
-            }
-
-            // checksum
-            // Does not work correctly yet!!! startcode - endcode?
-            checksum -= multiplier * rawResult[rawResult.length - 1];
-            if (checksum % 103 != rawResult[rawResult.length - 1]) {
-                return null;
-            }
-
-            if (!result.length) {
-                return null;
-            }
-
-            // remove last code from result (checksum)
-            result.splice(result.length - 1, 1);
-
-
-
-            return {
-                code : result.join(""),
-                start : startInfo.start,
-                end : code.end,
-                codeset : codeset,
-                startInfo : startInfo,
-                decodedCodes : decodedCodes,
-                endInfo : code
-            };
-        };
-
-
-        BarcodeReader.prototype._verifyTrailingWhitespace = function(endInfo) {
-            var self = this,
-                trailingWhitespaceEnd;
-
-            trailingWhitespaceEnd = endInfo.end + ((endInfo.end - endInfo.start) / 2);
-            if (trailingWhitespaceEnd < self._row.length) {
-                if (self._matchRange(endInfo.end, trailingWhitespaceEnd, 0)) {
-                    return endInfo;
-                }
-            }
-            return null;
-        };
-        
-        return (Code128Reader);
-    }
-);

src/code_39_reader.js

@@ -1,221 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-    [
-        "./barcode_reader",
-        "./array_helper"
-    ],
-    function(BarcodeReader, ArrayHelper) {
-        "use strict";
-
-        function Code39Reader() {
-            BarcodeReader.call(this);
-        }
-
-        var properties = {
-            ALPHABETH_STRING: {value: "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ-. *$/+%"},
-            ALPHABET: {value: [48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 45, 46, 32, 42, 36, 47, 43, 37]},
-            CHARACTER_ENCODINGS: {value: [0x034, 0x121, 0x061, 0x160, 0x031, 0x130, 0x070, 0x025, 0x124, 0x064, 0x109, 0x049, 0x148, 0x019, 0x118, 0x058, 0x00D, 0x10C, 0x04C, 0x01C, 0x103, 0x043, 0x142, 0x013, 0x112, 0x052, 0x007, 0x106, 0x046, 0x016, 0x181, 0x0C1, 0x1C0, 0x091, 0x190, 0x0D0, 0x085, 0x184, 0x0C4, 0x094, 0x0A8, 0x0A2, 0x08A, 0x02A]},
-            ASTERISK: {value: 0x094},
-            FORMAT: {value: "code_39", writeable: false}
-        };
-
-        Code39Reader.prototype = Object.create(BarcodeReader.prototype, properties);
-        Code39Reader.prototype.constructor = Code39Reader;
-
-        Code39Reader.prototype._toCounters = function(start, counter) {
-            var self = this,
-                numCounters = counter.length,
-                end = self._row.length,
-                isWhite = !self._row[start],
-                i,
-                counterPos = 0;
-
-            ArrayHelper.init(counter, 0);
-
-            for ( i = start; i < end; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    counterPos++;
-                    if (counterPos === numCounters) {
-                        break;
-                    } else {
-                        counter[counterPos] = 1;
-                        isWhite = !isWhite;
-                    }
-                }
-            }
-
-            return counter;
-        };
-
-        Code39Reader.prototype._decode = function() {
-            var self = this,
-                counters = [0,0,0,0,0,0,0,0,0],
-                result = [],
-                start = self._findStart(),
-                decodedChar,
-                lastStart,
-                pattern,
-                nextStart;
-
-            if (!start) {
-                return null;
-            }
-            nextStart = self._nextSet(self._row, start.end);
-
-            do {
-                counters = self._toCounters(nextStart, counters);
-                pattern = self._toPattern(counters);
-                if (pattern < 0) {
-                    return null;
-                }
-                decodedChar = self._patternToChar(pattern);
-                if (decodedChar < 0){
-                    return null;
-                }
-                result.push(decodedChar);
-                lastStart = nextStart;
-                nextStart += ArrayHelper.sum(counters);
-                nextStart = self._nextSet(self._row, nextStart);
-            } while(decodedChar !== '*');
-            result.pop();
-
-            if (!result.length) {
-                return null;
-            }
-
-            if(!self._verifyTrailingWhitespace(lastStart, nextStart, counters)) {
-                return null;
-            }
-
-            return {
-                code : result.join(""),
-                start : start.start,
-                end : nextStart,
-                startInfo : start,
-                decodedCodes : result
-            };
-        };
-
-        Code39Reader.prototype._verifyTrailingWhitespace = function(lastStart, nextStart, counters) {
-            var trailingWhitespaceEnd,
-                patternSize = ArrayHelper.sum(counters);
-
-            trailingWhitespaceEnd = nextStart - lastStart - patternSize;
-            if ((trailingWhitespaceEnd * 3) >= patternSize) {
-                return true;
-            }
-            return false;
-        };
-
-        Code39Reader.prototype._patternToChar = function(pattern) {
-            var i,
-                self = this;
-
-            for (i = 0; i < self.CHARACTER_ENCODINGS.length; i++) {
-                if (self.CHARACTER_ENCODINGS[i] === pattern) {
-                    return String.fromCharCode(self.ALPHABET[i]);
-                }
-            }
-        };
-
-        Code39Reader.prototype._findNextWidth = function(counters, current) {
-            var i,
-                minWidth = Number.MAX_VALUE;
-
-            for (i = 0; i < counters.length; i++) {
-                if (counters[i] < minWidth && counters[i] > current) {
-                    minWidth = counters[i];
-                }
-            }
-
-            return minWidth;
-        };
-
-        Code39Reader.prototype._toPattern = function(counters) {
-            var numCounters = counters.length,
-                maxNarrowWidth = 0,
-                numWideBars = numCounters,
-                wideBarWidth = 0,
-                self = this,
-                pattern,
-                i;
-
-            while(numWideBars > 3) {
-                maxNarrowWidth = self._findNextWidth(counters, maxNarrowWidth);
-                numWideBars = 0;
-                pattern = 0;
-                for (i = 0; i < numCounters; i++) {
-                    if (counters[i] > maxNarrowWidth) {
-                        pattern |= 1 << (numCounters - 1 - i);
-                        numWideBars++;
-                        wideBarWidth += counters[i];
-                    }
-                }
-
-                if (numWideBars === 3) {
-                    for (i = 0; i < numCounters && numWideBars > 0; i++) {
-                        if (counters[i] > maxNarrowWidth) {
-                            numWideBars--;
-                            if ((counters[i] * 2) >= wideBarWidth) {
-                                return -1;
-                            }
-                        }
-                    }
-                    return pattern;
-                }
-            }
-            return -1;
-        };
-
-        Code39Reader.prototype._findStart = function() {
-            var self = this,
-                offset = self._nextSet(self._row),
-                patternStart = offset,
-                counter = [0,0,0,0,0,0,0,0,0],
-                counterPos = 0,
-                isWhite = false,
-                i,
-                j,
-                whiteSpaceMustStart;
-
-            for ( i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    if (counterPos === counter.length - 1) {
-
-                        // find start pattern
-                        if (self._toPattern(counter) === self.ASTERISK) {
-                            whiteSpaceMustStart = Math.floor(Math.max(0, patternStart - ((i - patternStart) / 4)));
-                            if (self._matchRange(whiteSpaceMustStart, patternStart, 0)) {
-                                return {
-                                    start: patternStart,
-                                    end: i
-                                };
-                            }
-                        }
-
-                        patternStart += counter[0] + counter[1];
-                        for ( j = 0; j < 7; j++) {
-                            counter[j] = counter[j + 2];
-                        }
-                        counter[7] = 0;
-                        counter[8] = 0;
-                        counterPos--;
-                    } else {
-                        counterPos++;
-                    }
-                    counter[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-            return null;
-        };
-
-        return (Code39Reader);
-    }
-);

src/code_39_vin_reader.js

@@ -1,59 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-    [
-        "./code_39_reader"
-    ],
-    function(Code39Reader) {
-        "use strict";
-
-        function Code39VINReader() {
-            Code39Reader.call(this);
-        }
-
-        var patterns = {
-            IOQ: /[IOQ]/g,
-            AZ09: /[A-Z0-9]{17}/
-        };
-
-        Code39VINReader.prototype = Object.create(Code39Reader.prototype);
-        Code39VINReader.prototype.constructor = Code39VINReader;
-
-        // Cribbed from:
-        // https://github.com/zxing/zxing/blob/master/core/src/main/java/com/google/zxing/client/result/VINResultParser.java
-        Code39VINReader.prototype._decode = function() {
-            var result = Code39Reader.prototype._decode.apply(this);
-            if (!result) {
-                return null;
-            }
-
-            var code = result.code;
-
-            if (!code) {
-                return;
-            }
-
-            code = code.replace(patterns.IOQ, '');
-
-            if (!code.match(patterns.AZ09)) {
-                console.log('Failed AZ09 pattern code:', code);
-                return null;
-            }
-
-            if (!this._checkChecksum(code)) {
-                return null;
-            }
-
-            result.code = code;
-            return result;
-        };
-
-        Code39VINReader.prototype._checkChecksum = function(code) {
-            // TODO
-            return !!code;
-        };
-
-        return (Code39VINReader);
-    }
-);

src/common/array_helper.js

@@ -0,0 +1,79 @@
+export default {
+    init: function(arr, val) {
+        var l = arr.length;
+        while (l--) {
+            arr[l] = val;
+        }
+    },
+
+    /**
+     * Shuffles the content of an array
+     * @return {Array} the array itself shuffled
+     */
+    shuffle: function(arr) {
+        var i = arr.length - 1, j, x;
+        for (i; i >= 0; i--) {
+            j = Math.floor(Math.random() * i);
+            x = arr[i];
+            arr[i] = arr[j];
+            arr[j] = x;
+        }
+        return arr;
+    },
+
+    toPointList: function(arr) {
+        var i, j, row = [], rows = [];
+        for ( i = 0; i < arr.length; i++) {
+            row = [];
+            for ( j = 0; j < arr[i].length; j++) {
+                row[j] = arr[i][j];
+            }
+            rows[i] = "[" + row.join(",") + "]";
+        }
+        return "[" + rows.join(",\r\n") + "]";
+    },
+
+    /**
+     * returns the elements which's score is bigger than the threshold
+     * @return {Array} the reduced array
+     */
+    threshold: function(arr, threshold, scoreFunc) {
+        var i, queue = [];
+        for ( i = 0; i < arr.length; i++) {
+            if (scoreFunc.apply(arr, [arr[i]]) >= threshold) {
+                queue.push(arr[i]);
+            }
+        }
+        return queue;
+    },
+
+    maxIndex: function(arr) {
+        var i, max = 0;
+        for ( i = 0; i < arr.length; i++) {
+            if (arr[i] > arr[max]) {
+                max = i;
+            }
+        }
+        return max;
+    },
+
+    max: function(arr) {
+        var i, max = 0;
+        for ( i = 0; i < arr.length; i++) {
+            if (arr[i] > max) {
+                max = arr[i];
+            }
+        }
+        return max;
+    },
+
+    sum: function(arr) {
+        var length = arr.length,
+            sum = 0;
+
+        while (length--) {
+            sum += arr[length];
+        }
+        return sum;
+    }
+};

src/common/cluster.js

@@ -0,0 +1,68 @@
+const vec2 = {
+    clone: require('gl-vec2/clone'),
+    dot: require('gl-vec2/dot')
+}
+    /**
+     * Creates a cluster for grouping similar orientations of datapoints
+     */
+export default {
+    create: function(point, threshold) {
+        var points = [],
+            center = {
+                rad: 0,
+                vec: vec2.clone([0, 0])
+            },
+            pointMap = {};
+
+        function init() {
+            add(point);
+            updateCenter();
+        }
+
+        function add(pointToAdd) {
+            pointMap[pointToAdd.id] = pointToAdd;
+            points.push(pointToAdd);
+        }
+
+        function updateCenter() {
+            var i, sum = 0;
+            for ( i = 0; i < points.length; i++) {
+                sum += points[i].rad;
+            }
+            center.rad = sum / points.length;
+            center.vec = vec2.clone([Math.cos(center.rad), Math.sin(center.rad)]);
+        }
+
+        init();
+
+        return {
+            add: function(pointToAdd) {
+                if (!pointMap[pointToAdd.id]) {
+                    add(pointToAdd);
+                    updateCenter();
+                }
+            },
+            fits: function(otherPoint) {
+                // check cosine similarity to center-angle
+                var similarity = Math.abs(vec2.dot(otherPoint.point.vec, center.vec));
+                if (similarity > threshold) {
+                    return true;
+                }
+                return false;
+            },
+            getPoints: function() {
+                return points;
+            },
+            getCenter: function() {
+                return center;
+            }
+        };
+    },
+    createPoint: function(newPoint, id, property) {
+        return {
+            rad: newPoint[property],
+            point: newPoint,
+            id: id
+        };
+    }
+};

src/common/cv_utils.js

@@ -0,0 +1,751 @@
+import Cluster2 from './cluster';
+import ArrayHelper from './array_helper';
+const vec2 = {
+    clone: require('gl-vec2/clone'),
+};
+const vec3 = {
+    clone: require('gl-vec3/clone'),
+};
+
+/**
+ * @param x x-coordinate
+ * @param y y-coordinate
+ * @return ImageReference {x,y} Coordinate
+ */
+export function imageRef(x, y) {
+    var that = {
+        x: x,
+        y: y,
+        toVec2: function() {
+            return vec2.clone([this.x, this.y]);
+        },
+        toVec3: function() {
+            return vec3.clone([this.x, this.y, 1]);
+        },
+        round: function() {
+            this.x = this.x > 0.0 ? Math.floor(this.x + 0.5) : Math.floor(this.x - 0.5);
+            this.y = this.y > 0.0 ? Math.floor(this.y + 0.5) : Math.floor(this.y - 0.5);
+            return this;
+        }
+    };
+    return that;
+};
+
+/**
+ * Computes an integral image of a given grayscale image.
+ * @param imageDataContainer {ImageDataContainer} the image to be integrated
+ */
+export function computeIntegralImage2(imageWrapper, integralWrapper) {
+    var imageData = imageWrapper.data;
+    var width = imageWrapper.size.x;
+    var height = imageWrapper.size.y;
+    var integralImageData = integralWrapper.data;
+    var sum = 0, posA = 0, posB = 0, posC = 0, posD = 0, x, y;
+
+    // sum up first column
+    posB = width;
+    sum = 0;
+    for ( y = 1; y < height; y++) {
+        sum += imageData[posA];
+        integralImageData[posB] += sum;
+        posA += width;
+        posB += width;
+    }
+
+    posA = 0;
+    posB = 1;
+    sum = 0;
+    for ( x = 1; x < width; x++) {
+        sum += imageData[posA];
+        integralImageData[posB] += sum;
+        posA++;
+        posB++;
+    }
+
+    for ( y = 1; y < height; y++) {
+        posA = y * width + 1;
+        posB = (y - 1) * width + 1;
+        posC = y * width;
+        posD = (y - 1) * width;
+        for ( x = 1; x < width; x++) {
+            integralImageData[posA] +=
+                imageData[posA] + integralImageData[posB] + integralImageData[posC] - integralImageData[posD];
+            posA++;
+            posB++;
+            posC++;
+            posD++;
+        }
+    }
+};
+
+export function computeIntegralImage(imageWrapper, integralWrapper) {
+    var imageData = imageWrapper.data;
+    var width = imageWrapper.size.x;
+    var height = imageWrapper.size.y;
+    var integralImageData = integralWrapper.data;
+    var sum = 0;
+
+    // sum up first row
+    for (var i = 0; i < width; i++) {
+        sum += imageData[i];
+        integralImageData[i] = sum;
+    }
+
+    for (var v = 1; v < height; v++) {
+        sum = 0;
+        for (var u = 0; u < width; u++) {
+            sum += imageData[v * width + u];
+            integralImageData[((v) * width) + u] = sum + integralImageData[(v - 1) * width + u];
+        }
+    }
+};
+
+export function thresholdImage(imageWrapper, threshold, targetWrapper) {
+    if (!targetWrapper) {
+        targetWrapper = imageWrapper;
+    }
+    var imageData = imageWrapper.data, length = imageData.length, targetData = targetWrapper.data;
+
+    while (length--) {
+        targetData[length] = imageData[length] < threshold ? 1 : 0;
+    }
+};
+
+export function computeHistogram(imageWrapper, bitsPerPixel) {
+    if (!bitsPerPixel) {
+        bitsPerPixel = 8;
+    }
+    var imageData = imageWrapper.data,
+        length = imageData.length,
+        bitShift = 8 - bitsPerPixel,
+        bucketCnt = 1 << bitsPerPixel,
+        hist = new Int32Array(bucketCnt);
+
+    while (length--) {
+        hist[imageData[length] >> bitShift]++;
+    }
+    return hist;
+};
+
+export function sharpenLine(line) {
+    var i,
+        length = line.length,
+        left = line[0],
+        center = line[1],
+        right;
+
+    for (i = 1; i < length - 1; i++) {
+        right = line[i + 1];
+        //  -1 4 -1 kernel
+        line[i - 1] = (((center * 2) - left - right)) & 255;
+        left = center;
+        center = right;
+    }
+    return line;
+};
+
+export function determineOtsuThreshold(imageWrapper, bitsPerPixel) {
+    if (!bitsPerPixel) {
+        bitsPerPixel = 8;
+    }
+    var hist,
+        threshold,
+        bitShift = 8 - bitsPerPixel;
+
+    function px(init, end) {
+        var sum = 0, i;
+        for ( i = init; i <= end; i++) {
+            sum += hist[i];
+        }
+        return sum;
+    }
+
+    function mx(init, end) {
+        var i, sum = 0;
+
+        for ( i = init; i <= end; i++) {
+            sum += i * hist[i];
+        }
+
+        return sum;
+    }
+
+    function determineThreshold() {
+        var vet = [0], p1, p2, p12, k, m1, m2, m12,
+            max = (1 << bitsPerPixel) - 1;
+
+        hist = computeHistogram(imageWrapper, bitsPerPixel);
+        for ( k = 1; k < max; k++) {
+            p1 = px(0, k);
+            p2 = px(k + 1, max);
+            p12 = p1 * p2;
+            if (p12 === 0) {
+                p12 = 1;
+            }
+            m1 = mx(0, k) * p2;
+            m2 = mx(k + 1, max) * p1;
+            m12 = m1 - m2;
+            vet[k] = m12 * m12 / p12;
+        }
+        return ArrayHelper.maxIndex(vet);
+    }
+
+    threshold = determineThreshold();
+    return threshold << bitShift;
+};
+
+export function otsuThreshold(imageWrapper, targetWrapper) {
+    var threshold = determineOtsuThreshold(imageWrapper);
+
+    thresholdImage(imageWrapper, threshold, targetWrapper);
+    return threshold;
+};
+
+// local thresholding
+export function computeBinaryImage(imageWrapper, integralWrapper, targetWrapper) {
+    computeIntegralImage(imageWrapper, integralWrapper);
+
+    if (!targetWrapper) {
+        targetWrapper = imageWrapper;
+    }
+    var imageData = imageWrapper.data;
+    var targetData = targetWrapper.data;
+    var width = imageWrapper.size.x;
+    var height = imageWrapper.size.y;
+    var integralImageData = integralWrapper.data;
+    var sum = 0, v, u, kernel = 3, A, B, C, D, avg, size = (kernel * 2 + 1) * (kernel * 2 + 1);
+
+    // clear out top & bottom-border
+    for ( v = 0; v <= kernel; v++) {
+        for ( u = 0; u < width; u++) {
+            targetData[((v) * width) + u] = 0;
+            targetData[(((height - 1) - v) * width) + u] = 0;
+        }
+    }
+
+    // clear out left & right border
+    for ( v = kernel; v < height - kernel; v++) {
+        for ( u = 0; u <= kernel; u++) {
+            targetData[((v) * width) + u] = 0;
+            targetData[((v) * width) + (width - 1 - u)] = 0;
+        }
+    }
+
+    for ( v = kernel + 1; v < height - kernel - 1; v++) {
+        for ( u = kernel + 1; u < width - kernel; u++) {
+            A = integralImageData[(v - kernel - 1) * width + (u - kernel - 1)];
+            B = integralImageData[(v - kernel - 1) * width + (u + kernel)];
+            C = integralImageData[(v + kernel) * width + (u - kernel - 1)];
+            D = integralImageData[(v + kernel) * width + (u + kernel)];
+            sum = D - C - B + A;
+            avg = sum / (size);
+            targetData[v * width + u] = imageData[v * width + u] > (avg + 5) ? 0 : 1;
+        }
+    }
+};
+
+export function cluster(points, threshold, property) {
+    var i, k, cluster, point, clusters = [];
+
+    if (!property) {
+        property = "rad";
+    }
+
+    function addToCluster(newPoint) {
+        var found = false;
+        for ( k = 0; k < clusters.length; k++) {
+            cluster = clusters[k];
+            if (cluster.fits(newPoint)) {
+                cluster.add(newPoint);
+                found = true;
+            }
+        }
+        return found;
+    }
+
+    // iterate over each cloud
+    for ( i = 0; i < points.length; i++) {
+        point = Cluster2.createPoint(points[i], i, property);
+        if (!addToCluster(point)) {
+            clusters.push(Cluster2.create(point, threshold));
+        }
+    }
+    return clusters;
+};
+
+export const Tracer = {
+    trace: function(points, vec) {
+        var iteration, maxIterations = 10, top = [], result = [], centerPos = 0, currentPos = 0;
+
+        function trace(idx, forward) {
+            var from, to, toIdx, predictedPos, thresholdX = 1, thresholdY = Math.abs(vec[1] / 10), found = false;
+
+            function match(pos, predicted) {
+                if (pos.x > (predicted.x - thresholdX)
+                        && pos.x < (predicted.x + thresholdX)
+                        && pos.y > (predicted.y - thresholdY)
+                        && pos.y < (predicted.y + thresholdY)) {
+                    return true;
+                } else {
+                    return false;
+                }
+            }
+
+            // check if the next index is within the vec specifications
+            // if not, check as long as the threshold is met
+
+            from = points[idx];
+            if (forward) {
+                predictedPos = {
+                    x: from.x + vec[0],
+                    y: from.y + vec[1]
+                };
+            } else {
+                predictedPos = {
+                    x: from.x - vec[0],
+                    y: from.y - vec[1]
+                };
+            }
+
+            toIdx = forward ? idx + 1 : idx - 1;
+            to = points[toIdx];
+            while (to && ( found = match(to, predictedPos)) !== true && (Math.abs(to.y - from.y) < vec[1])) {
+                toIdx = forward ? toIdx + 1 : toIdx - 1;
+                to = points[toIdx];
+            }
+
+            return found ? toIdx : null;
+        }
+
+        for ( iteration = 0; iteration < maxIterations; iteration++) {
+            // randomly select point to start with
+            centerPos = Math.floor(Math.random() * points.length);
+
+            // trace forward
+            top = [];
+            currentPos = centerPos;
+            top.push(points[currentPos]);
+            while (( currentPos = trace(currentPos, true)) !== null) {
+                top.push(points[currentPos]);
+            }
+            if (centerPos > 0) {
+                currentPos = centerPos;
+                while (( currentPos = trace(currentPos, false)) !== null) {
+                    top.push(points[currentPos]);
+                }
+            }
+
+            if (top.length > result.length) {
+                result = top;
+            }
+        }
+        return result;
+    }
+};
+
+export const DILATE = 1;
+export const ERODE = 2;
+
+export function dilate(inImageWrapper, outImageWrapper) {
+    var v,
+        u,
+        inImageData = inImageWrapper.data,
+        outImageData = outImageWrapper.data,
+        height = inImageWrapper.size.y,
+        width = inImageWrapper.size.x,
+        sum,
+        yStart1,
+        yStart2,
+        xStart1,
+        xStart2;
+
+    for ( v = 1; v < height - 1; v++) {
+        for ( u = 1; u < width - 1; u++) {
+            yStart1 = v - 1;
+            yStart2 = v + 1;
+            xStart1 = u - 1;
+            xStart2 = u + 1;
+            sum = inImageData[yStart1 * width + xStart1] + inImageData[yStart1 * width + xStart2] +
+            inImageData[v * width + u] +
+            inImageData[yStart2 * width + xStart1] + inImageData[yStart2 * width + xStart2];
+            outImageData[v * width + u] = sum > 0 ? 1 : 0;
+        }
+    }
+};
+
+export function erode(inImageWrapper, outImageWrapper) {
+    var v,
+        u,
+        inImageData = inImageWrapper.data,
+        outImageData = outImageWrapper.data,
+        height = inImageWrapper.size.y,
+        width = inImageWrapper.size.x,
+        sum,
+        yStart1,
+        yStart2,
+        xStart1,
+        xStart2;
+
+    for ( v = 1; v < height - 1; v++) {
+        for ( u = 1; u < width - 1; u++) {
+            yStart1 = v - 1;
+            yStart2 = v + 1;
+            xStart1 = u - 1;
+            xStart2 = u + 1;
+            sum = inImageData[yStart1 * width + xStart1] + inImageData[yStart1 * width + xStart2] +
+            inImageData[v * width + u] +
+            inImageData[yStart2 * width + xStart1] + inImageData[yStart2 * width + xStart2];
+            outImageData[v * width + u] = sum === 5 ? 1 : 0;
+        }
+    }
+};
+
+export function subtract(aImageWrapper, bImageWrapper, resultImageWrapper) {
+    if (!resultImageWrapper) {
+        resultImageWrapper = aImageWrapper;
+    }
+    var length = aImageWrapper.data.length,
+        aImageData = aImageWrapper.data,
+        bImageData = bImageWrapper.data,
+        cImageData = resultImageWrapper.data;
+
+    while (length--) {
+        cImageData[length] = aImageData[length] - bImageData[length];
+    }
+};
+
+export function bitwiseOr(aImageWrapper, bImageWrapper, resultImageWrapper) {
+    if (!resultImageWrapper) {
+        resultImageWrapper = aImageWrapper;
+    }
+    var length = aImageWrapper.data.length,
+        aImageData = aImageWrapper.data,
+        bImageData = bImageWrapper.data,
+        cImageData = resultImageWrapper.data;
+
+    while (length--) {
+        cImageData[length] = aImageData[length] || bImageData[length];
+    }
+};
+
+export function countNonZero(imageWrapper) {
+    var length = imageWrapper.data.length, data = imageWrapper.data, sum = 0;
+
+    while (length--) {
+        sum += data[length];
+    }
+    return sum;
+};
+
+export function topGeneric(list, top, scoreFunc) {
+    var i, minIdx = 0, min = 0, queue = [], score, hit, pos;
+
+    for ( i = 0; i < top; i++) {
+        queue[i] = {
+            score: 0,
+            item: null
+        };
+    }
+
+    for ( i = 0; i < list.length; i++) {
+        score = scoreFunc.apply(this, [list[i]]);
+        if (score > min) {
+            hit = queue[minIdx];
+            hit.score = score;
+            hit.item = list[i];
+            min = Number.MAX_VALUE;
+            for ( pos = 0; pos < top; pos++) {
+                if (queue[pos].score < min) {
+                    min = queue[pos].score;
+                    minIdx = pos;
+                }
+            }
+        }
+    }
+
+    return queue;
+};
+
+export function grayArrayFromImage(htmlImage, offsetX, ctx, array) {
+    ctx.drawImage(htmlImage, offsetX, 0, htmlImage.width, htmlImage.height);
+    var ctxData = ctx.getImageData(offsetX, 0, htmlImage.width, htmlImage.height).data;
+    computeGray(ctxData, array);
+};
+
+export function grayArrayFromContext(ctx, size, offset, array) {
+    var ctxData = ctx.getImageData(offset.x, offset.y, size.x, size.y).data;
+    computeGray(ctxData, array);
+};
+
+export function grayAndHalfSampleFromCanvasData(canvasData, size, outArray) {
+    var topRowIdx = 0;
+    var bottomRowIdx = size.x;
+    var endIdx = Math.floor(canvasData.length / 4);
+    var outWidth = size.x / 2;
+    var outImgIdx = 0;
+    var inWidth = size.x;
+    var i;
+
+    while (bottomRowIdx < endIdx) {
+        for ( i = 0; i < outWidth; i++) {
+            outArray[outImgIdx] = (
+                (0.299 * canvasData[topRowIdx * 4 + 0] +
+                 0.587 * canvasData[topRowIdx * 4 + 1] +
+                 0.114 * canvasData[topRowIdx * 4 + 2]) +
+                (0.299 * canvasData[(topRowIdx + 1) * 4 + 0] +
+                 0.587 * canvasData[(topRowIdx + 1) * 4 + 1] +
+                 0.114 * canvasData[(topRowIdx + 1) * 4 + 2]) +
+                (0.299 * canvasData[(bottomRowIdx) * 4 + 0] +
+                 0.587 * canvasData[(bottomRowIdx) * 4 + 1] +
+                 0.114 * canvasData[(bottomRowIdx) * 4 + 2]) +
+                (0.299 * canvasData[(bottomRowIdx + 1) * 4 + 0] +
+                 0.587 * canvasData[(bottomRowIdx + 1) * 4 + 1] +
+                 0.114 * canvasData[(bottomRowIdx + 1) * 4 + 2])) / 4;
+            outImgIdx++;
+            topRowIdx = topRowIdx + 2;
+            bottomRowIdx = bottomRowIdx + 2;
+        }
+        topRowIdx = topRowIdx + inWidth;
+        bottomRowIdx = bottomRowIdx + inWidth;
+    }
+};
+
+export function computeGray(imageData, outArray, config) {
+    var l = (imageData.length / 4) | 0,
+        i,
+        singleChannel = config && config.singleChannel === true;
+
+    if (singleChannel) {
+        for (i = 0; i < l; i++) {
+            outArray[i] = imageData[i * 4 + 0];
+        }
+    } else {
+        for (i = 0; i < l; i++) {
+            outArray[i] =
+                0.299 * imageData[i * 4 + 0] + 0.587 * imageData[i * 4 + 1] + 0.114 * imageData[i * 4 + 2];
+        }
+    }
+};
+
+export function loadImageArray(src, callback, canvas) {
+    if (!canvas) {
+        canvas = document.createElement('canvas');
+    }
+    var img = new Image();
+    img.callback = callback;
+    img.onload = function() {
+        canvas.width = this.width;
+        canvas.height = this.height;
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(this, 0, 0);
+        var array = new Uint8Array(this.width * this.height);
+        ctx.drawImage(this, 0, 0);
+        var data = ctx.getImageData(0, 0, this.width, this.height).data;
+        computeGray(data, array);
+        this.callback(array, {
+            x: this.width,
+            y: this.height
+        }, this);
+    };
+    img.src = src;
+};
+
+/**
+ * @param inImg {ImageWrapper} input image to be sampled
+ * @param outImg {ImageWrapper} to be stored in
+ */
+export function halfSample(inImgWrapper, outImgWrapper) {
+    var inImg = inImgWrapper.data;
+    var inWidth = inImgWrapper.size.x;
+    var outImg = outImgWrapper.data;
+    var topRowIdx = 0;
+    var bottomRowIdx = inWidth;
+    var endIdx = inImg.length;
+    var outWidth = inWidth / 2;
+    var outImgIdx = 0;
+    while (bottomRowIdx < endIdx) {
+        for (var i = 0; i < outWidth; i++) {
+            outImg[outImgIdx] = Math.floor(
+                (inImg[topRowIdx] + inImg[topRowIdx + 1] + inImg[bottomRowIdx] + inImg[bottomRowIdx + 1]) / 4);
+            outImgIdx++;
+            topRowIdx = topRowIdx + 2;
+            bottomRowIdx = bottomRowIdx + 2;
+        }
+        topRowIdx = topRowIdx + inWidth;
+        bottomRowIdx = bottomRowIdx + inWidth;
+    }
+};
+
+export function hsv2rgb(hsv, rgb) {
+    var h = hsv[0],
+        s = hsv[1],
+        v = hsv[2],
+        c = v * s,
+        x = c * (1 - Math.abs((h / 60) % 2 - 1)),
+        m = v - c,
+        r = 0,
+        g = 0,
+        b = 0;
+
+    rgb = rgb || [0, 0, 0];
+
+    if (h < 60) {
+        r = c;
+        g = x;
+    } else if (h < 120) {
+        r = x;
+        g = c;
+    } else if (h < 180) {
+        g = c;
+        b = x;
+    } else if (h < 240) {
+        g = x;
+        b = c;
+    } else if (h < 300) {
+        r = x;
+        b = c;
+    } else if (h < 360) {
+        r = c;
+        b = x;
+    }
+    rgb[0] = ((r + m) * 255) | 0;
+    rgb[1] = ((g + m) * 255) | 0;
+    rgb[2] = ((b + m) * 255) | 0;
+    return rgb;
+};
+
+export function _computeDivisors(n) {
+    var largeDivisors = [],
+        divisors = [],
+        i;
+
+    for (i = 1; i < Math.sqrt(n) + 1; i++) {
+        if (n % i === 0) {
+            divisors.push(i);
+            if (i !== n / i) {
+                largeDivisors.unshift(Math.floor(n / i));
+            }
+        }
+    }
+    return divisors.concat(largeDivisors);
+};
+
+function _computeIntersection(arr1, arr2) {
+    var i = 0,
+        j = 0,
+        result = [];
+
+    while (i < arr1.length && j < arr2.length) {
+        if (arr1[i] === arr2[j]) {
+            result.push(arr1[i]);
+            i++;
+            j++;
+        } else if (arr1[i] > arr2[j]) {
+            j++;
+        } else {
+            i++;
+        }
+    }
+    return result;
+};
+
+export function calculatePatchSize(patchSize, imgSize) {
+    var divisorsX = _computeDivisors(imgSize.x),
+        divisorsY = _computeDivisors(imgSize.y),
+        wideSide = Math.max(imgSize.x, imgSize.y),
+        common = _computeIntersection(divisorsX, divisorsY),
+        nrOfPatchesList = [8, 10, 15, 20, 32, 60, 80],
+        nrOfPatchesMap = {
+            "x-small": 5,
+            "small": 4,
+            "medium": 3,
+            "large": 2,
+            "x-large": 1
+        },
+        nrOfPatchesIdx = nrOfPatchesMap[patchSize] || nrOfPatchesMap.medium,
+        nrOfPatches = nrOfPatchesList[nrOfPatchesIdx],
+        desiredPatchSize = Math.floor(wideSide / nrOfPatches),
+        optimalPatchSize;
+
+    function findPatchSizeForDivisors(divisors) {
+        var i = 0,
+            found = divisors[Math.floor(divisors.length / 2)];
+
+        while (i < (divisors.length - 1) && divisors[i] < desiredPatchSize) {
+            i++;
+        }
+        if (i > 0) {
+            if (Math.abs(divisors[i] - desiredPatchSize) > Math.abs(divisors[i - 1] - desiredPatchSize)) {
+                found = divisors[i - 1];
+            } else {
+                found = divisors[i];
+            }
+        }
+        if (desiredPatchSize / found < nrOfPatchesList[nrOfPatchesIdx + 1] / nrOfPatchesList[nrOfPatchesIdx] &&
+            desiredPatchSize / found > nrOfPatchesList[nrOfPatchesIdx - 1] / nrOfPatchesList[nrOfPatchesIdx] ) {
+            return {x: found, y: found};
+        }
+        return null;
+    }
+
+    optimalPatchSize = findPatchSizeForDivisors(common);
+    if (!optimalPatchSize) {
+        optimalPatchSize = findPatchSizeForDivisors(_computeDivisors(wideSide));
+        if (!optimalPatchSize) {
+            optimalPatchSize = findPatchSizeForDivisors((_computeDivisors(desiredPatchSize * nrOfPatches)));
+        }
+    }
+    return optimalPatchSize;
+};
+
+export function _parseCSSDimensionValues(value) {
+    var dimension = {
+        value: parseFloat(value),
+        unit: value.indexOf("%") === value.length - 1 ? "%" : "%"
+    };
+
+    return dimension;
+};
+
+export const _dimensionsConverters = {
+    top: function(dimension, context) {
+        if (dimension.unit === "%") {
+            return Math.floor(context.height * (dimension.value / 100));
+        }
+    },
+    right: function(dimension, context) {
+        if (dimension.unit === "%") {
+            return Math.floor(context.width - (context.width * (dimension.value / 100)));
+        }
+    },
+    bottom: function(dimension, context) {
+        if (dimension.unit === "%") {
+            return Math.floor(context.height - (context.height * (dimension.value / 100)));
+        }
+    },
+    left: function(dimension, context) {
+        if (dimension.unit === "%") {
+            return Math.floor(context.width * (dimension.value / 100));
+        }
+    }
+};
+
+export function computeImageArea(inputWidth, inputHeight, area) {
+    var context = {width: inputWidth, height: inputHeight};
+
+    var parsedArea = Object.keys(area).reduce(function(result, key) {
+        var value = area[key],
+            parsed = _parseCSSDimensionValues(value),
+            calculated = _dimensionsConverters[key](parsed, context);
+
+        result[key] = calculated;
+        return result;
+    }, {});
+
+    return {
+        sx: parsedArea.left,
+        sy: parsedArea.top,
+        sw: parsedArea.right - parsedArea.left,
+        sh: parsedArea.bottom - parsedArea.top
+    };
+};

src/common/events.js

@@ -0,0 +1,94 @@
+export default (function() {
+    var events = {};
+
+    function getEvent(eventName) {
+        if (!events[eventName]) {
+            events[eventName] = {
+                subscribers: []
+            };
+        }
+        return events[eventName];
+    }
+
+    function clearEvents(){
+        events = {};
+    }
+
+    function publishSubscription(subscription, data) {
+        if (subscription.async) {
+            setTimeout(function() {
+                subscription.callback(data);
+            }, 4);
+        } else {
+            subscription.callback(data);
+        }
+    }
+
+    function subscribe(event, callback, async) {
+        var subscription;
+
+        if ( typeof callback === "function") {
+            subscription = {
+                callback: callback,
+                async: async
+            };
+        } else {
+            subscription = callback;
+            if (!subscription.callback) {
+                throw "Callback was not specified on options";
+            }
+        }
+
+        getEvent(event).subscribers.push(subscription);
+    }
+
+    return {
+        subscribe: function(event, callback, async) {
+            return subscribe(event, callback, async);
+        },
+        publish: function(eventName, data) {
+            var event = getEvent(eventName),
+                subscribers = event.subscribers;
+
+            // Publish one-time subscriptions
+            subscribers.filter(function(subscriber) {
+                return !!subscriber.once;
+            }).forEach((subscriber) => {
+                publishSubscription(subscriber, data);
+            });
+
+            // remove them from the subscriber
+            event.subscribers = subscribers.filter(function(subscriber) {
+                return !subscriber.once;
+            });
+
+            // publish the rest
+            event.subscribers.forEach((subscriber) => {
+                publishSubscription(subscriber, data);
+            });
+        },
+        once: function(event, callback, async) {
+            subscribe(event, {
+                callback: callback,
+                async: async,
+                once: true
+            });
+        },
+        unsubscribe: function(eventName, callback) {
+            var event;
+
+            if (eventName) {
+                event = getEvent(eventName);
+                if (event && callback) {
+                    event.subscribers = event.subscribers.filter(function(subscriber){
+                        return subscriber.callback !== callback;
+                    });
+                } else {
+                    event.subscribers = [];
+                }
+            } else {
+                clearEvents();
+            }
+        }
+    };
+})();

src/common/image_debug.js

@@ -0,0 +1,41 @@
+export default {
+    drawRect: function(pos, size, ctx, style){
+        ctx.strokeStyle = style.color;
+        ctx.fillStyle = style.color;
+        ctx.lineWidth = style.lineWidth || 1;
+        ctx.beginPath();
+        ctx.strokeRect(pos.x, pos.y, size.x, size.y);
+    },
+    drawPath: function(path, def, ctx, style) {
+        ctx.strokeStyle = style.color;
+        ctx.fillStyle = style.color;
+        ctx.lineWidth = style.lineWidth;
+        ctx.beginPath();
+        ctx.moveTo(path[0][def.x], path[0][def.y]);
+        for (var j = 1; j < path.length; j++) {
+            ctx.lineTo(path[j][def.x], path[j][def.y]);
+        }
+        ctx.closePath();
+        ctx.stroke();
+    },
+    drawImage: function(imageData, size, ctx) {
+        var canvasData = ctx.getImageData(0, 0, size.x, size.y),
+            data = canvasData.data,
+            imageDataPos = imageData.length,
+            canvasDataPos = data.length,
+            value;
+
+        if (canvasDataPos / imageDataPos !== 4) {
+            return false;
+        }
+        while (imageDataPos--){
+            value = imageData[imageDataPos];
+            data[--canvasDataPos] = 255;
+            data[--canvasDataPos] = value;
+            data[--canvasDataPos] = value;
+            data[--canvasDataPos] = value;
+        }
+        ctx.putImageData(canvasData, 0, 0);
+        return true;
+    }
+};

src/common/image_wrapper.js

@@ -0,0 +1,349 @@
+import SubImage from './subImage';
+import {hsv2rgb} from '../common/cv_utils';
+import ArrayHelper from '../common/array_helper';
+const vec2 = {
+    clone: require('gl-vec2/clone'),
+};
+
+/**
+ * Represents a basic image combining the data and size.
+ * In addition, some methods for manipulation are contained.
+ * @param size {x,y} The size of the image in pixel
+ * @param data {Array} If given, a flat array containing the pixel data
+ * @param ArrayType {Type} If given, the desired DataType of the Array (may be typed/non-typed)
+ * @param initialize {Boolean} Indicating if the array should be initialized on creation.
+ * @returns {ImageWrapper}
+ */
+function ImageWrapper(size, data, ArrayType, initialize) {
+    if (!data) {
+        if (ArrayType) {
+            this.data = new ArrayType(size.x * size.y);
+            if (ArrayType === Array && initialize) {
+                ArrayHelper.init(this.data, 0);
+            }
+        } else {
+            this.data = new Uint8Array(size.x * size.y);
+            if (Uint8Array === Array && initialize) {
+                ArrayHelper.init(this.data, 0);
+            }
+        }
+    } else {
+        this.data = data;
+    }
+    this.size = size;
+}
+
+/**
+ * tests if a position is within the image with a given offset
+ * @param imgRef {x, y} The location to test
+ * @param border Number the padding value in pixel
+ * @returns {Boolean} true if location inside the image's border, false otherwise
+ * @see cvd/image.h
+ */
+ImageWrapper.prototype.inImageWithBorder = function(imgRef, border) {
+    return (imgRef.x >= border)
+        && (imgRef.y >= border)
+        && (imgRef.x < (this.size.x - border))
+        && (imgRef.y < (this.size.y - border));
+};
+
+/**
+ * Performs bilinear sampling
+ * @param inImg Image to extract sample from
+ * @param x the x-coordinate
+ * @param y the y-coordinate
+ * @returns the sampled value
+ * @see cvd/vision.h
+ */
+ImageWrapper.sample = function(inImg, x, y) {
+    var lx = Math.floor(x);
+    var ly = Math.floor(y);
+    var w = inImg.size.x;
+    var base = ly * inImg.size.x + lx;
+    var a = inImg.data[base + 0];
+    var b = inImg.data[base + 1];
+    var c = inImg.data[base + w];
+    var d = inImg.data[base + w + 1];
+    var e = a - b;
+    x -= lx;
+    y -= ly;
+
+    var result = Math.floor(x * (y * (e - c + d) - e) + y * (c - a) + a);
+    return result;
+};
+
+/**
+ * Initializes a given array. Sets each element to zero.
+ * @param array {Array} The array to initialize
+ */
+ImageWrapper.clearArray = function(array) {
+    var l = array.length;
+    while (l--) {
+        array[l] = 0;
+    }
+};
+
+/**
+ * Creates a {SubImage} from the current image ({this}).
+ * @param from {ImageRef} The position where to start the {SubImage} from. (top-left corner)
+ * @param size {ImageRef} The size of the resulting image
+ * @returns {SubImage} A shared part of the original image
+ */
+ImageWrapper.prototype.subImage = function(from, size) {
+    return new SubImage(from, size, this);
+};
+
+/**
+ * Creates an {ImageWrapper) and copies the needed underlying image-data area
+ * @param imageWrapper {ImageWrapper} The target {ImageWrapper} where the data should be copied
+ * @param from {ImageRef} The location where to copy from (top-left location)
+ */
+ImageWrapper.prototype.subImageAsCopy = function(imageWrapper, from) {
+    var sizeY = imageWrapper.size.y, sizeX = imageWrapper.size.x;
+    var x, y;
+    for ( x = 0; x < sizeX; x++) {
+        for ( y = 0; y < sizeY; y++) {
+            imageWrapper.data[y * sizeX + x] = this.data[(from.y + y) * this.size.x + from.x + x];
+        }
+    }
+};
+
+ImageWrapper.prototype.copyTo = function(imageWrapper) {
+    var length = this.data.length, srcData = this.data, dstData = imageWrapper.data;
+
+    while (length--) {
+        dstData[length] = srcData[length];
+    }
+};
+
+/**
+ * Retrieves a given pixel position from the image
+ * @param x {Number} The x-position
+ * @param y {Number} The y-position
+ * @returns {Number} The grayscale value at the pixel-position
+ */
+ImageWrapper.prototype.get = function(x, y) {
+    return this.data[y * this.size.x + x];
+};
+
+/**
+ * Retrieves a given pixel position from the image
+ * @param x {Number} The x-position
+ * @param y {Number} The y-position
+ * @returns {Number} The grayscale value at the pixel-position
+ */
+ImageWrapper.prototype.getSafe = function(x, y) {
+    var i;
+
+    if (!this.indexMapping) {
+        this.indexMapping = {
+            x: [],
+            y: []
+        };
+        for (i = 0; i < this.size.x; i++) {
+            this.indexMapping.x[i] = i;
+            this.indexMapping.x[i + this.size.x] = i;
+        }
+        for (i = 0; i < this.size.y; i++) {
+            this.indexMapping.y[i] = i;
+            this.indexMapping.y[i + this.size.y] = i;
+        }
+    }
+    return this.data[(this.indexMapping.y[y + this.size.y]) * this.size.x + this.indexMapping.x[x + this.size.x]];
+};
+
+/**
+ * Sets a given pixel position in the image
+ * @param x {Number} The x-position
+ * @param y {Number} The y-position
+ * @param value {Number} The grayscale value to set
+ * @returns {ImageWrapper} The Image itself (for possible chaining)
+ */
+ImageWrapper.prototype.set = function(x, y, value) {
+    this.data[y * this.size.x + x] = value;
+    return this;
+};
+
+/**
+ * Sets the border of the image (1 pixel) to zero
+ */
+ImageWrapper.prototype.zeroBorder = function() {
+    var i, width = this.size.x, height = this.size.y, data = this.data;
+    for ( i = 0; i < width; i++) {
+        data[i] = data[(height - 1) * width + i] = 0;
+    }
+    for ( i = 1; i < height - 1; i++) {
+        data[i * width] = data[i * width + (width - 1)] = 0;
+    }
+};
+
+/**
+ * Inverts a binary image in place
+ */
+ImageWrapper.prototype.invert = function() {
+    var data = this.data, length = data.length;
+
+    while (length--) {
+        data[length] = data[length] ? 0 : 1;
+    }
+};
+
+ImageWrapper.prototype.convolve = function(kernel) {
+    var x, y, kx, ky, kSize = (kernel.length / 2) | 0, accu = 0;
+    for ( y = 0; y < this.size.y; y++) {
+        for ( x = 0; x < this.size.x; x++) {
+            accu = 0;
+            for ( ky = -kSize; ky <= kSize; ky++) {
+                for ( kx = -kSize; kx <= kSize; kx++) {
+                    accu += kernel[ky + kSize][kx + kSize] * this.getSafe(x + kx, y + ky);
+                }
+            }
+            this.data[y * this.size.x + x] = accu;
+        }
+    }
+};
+
+ImageWrapper.prototype.moments = function(labelcount) {
+    var data = this.data,
+        x,
+        y,
+        height = this.size.y,
+        width = this.size.x,
+        val,
+        ysq,
+        labelsum = [],
+        i,
+        label,
+        mu11,
+        mu02,
+        mu20,
+        x_,
+        y_,
+        tmp,
+        result = [],
+        PI = Math.PI,
+        PI_4 = PI / 4;
+
+    if (labelcount <= 0) {
+        return result;
+    }
+
+    for ( i = 0; i < labelcount; i++) {
+        labelsum[i] = {
+            m00: 0,
+            m01: 0,
+            m10: 0,
+            m11: 0,
+            m02: 0,
+            m20: 0,
+            theta: 0,
+            rad: 0
+        };
+    }
+
+    for ( y = 0; y < height; y++) {
+        ysq = y * y;
+        for ( x = 0; x < width; x++) {
+            val = data[y * width + x];
+            if (val > 0) {
+                label = labelsum[val - 1];
+                label.m00 += 1;
+                label.m01 += y;
+                label.m10 += x;
+                label.m11 += x * y;
+                label.m02 += ysq;
+                label.m20 += x * x;
+            }
+        }
+    }
+
+    for ( i = 0; i < labelcount; i++) {
+        label = labelsum[i];
+        if (!isNaN(label.m00) && label.m00 !== 0) {
+            x_ = label.m10 / label.m00;
+            y_ = label.m01 / label.m00;
+            mu11 = label.m11 / label.m00 - x_ * y_;
+            mu02 = label.m02 / label.m00 - y_ * y_;
+            mu20 = label.m20 / label.m00 - x_ * x_;
+            tmp = (mu02 - mu20) / (2 * mu11);
+            tmp = 0.5 * Math.atan(tmp) + (mu11 >= 0 ? PI_4 : -PI_4 ) + PI;
+            label.theta = (tmp * 180 / PI + 90) % 180 - 90;
+            if (label.theta < 0) {
+                label.theta += 180;
+            }
+            label.rad = tmp > PI ? tmp - PI : tmp;
+            label.vec = vec2.clone([Math.cos(tmp), Math.sin(tmp)]);
+            result.push(label);
+        }
+    }
+
+    return result;
+};
+
+/**
+ * Displays the {ImageWrapper} in a given canvas
+ * @param canvas {Canvas} The canvas element to write to
+ * @param scale {Number} Scale which is applied to each pixel-value
+ */
+ImageWrapper.prototype.show = function(canvas, scale) {
+    var ctx,
+        frame,
+        data,
+        current,
+        pixel,
+        x,
+        y;
+
+    if (!scale) {
+        scale = 1.0;
+    }
+    ctx = canvas.getContext('2d');
+    canvas.width = this.size.x;
+    canvas.height = this.size.y;
+    frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    data = frame.data;
+    current = 0;
+    for (y = 0; y < this.size.y; y++) {
+        for (x = 0; x < this.size.x; x++) {
+            pixel = y * this.size.x + x;
+            current = this.get(x, y) * scale;
+            data[pixel * 4 + 0] = current;
+            data[pixel * 4 + 1] = current;
+            data[pixel * 4 + 2] = current;
+            data[pixel * 4 + 3] = 255;
+        }
+    }
+    //frame.data = data;
+    ctx.putImageData(frame, 0, 0);
+};
+
+/**
+ * Displays the {SubImage} in a given canvas
+ * @param canvas {Canvas} The canvas element to write to
+ * @param scale {Number} Scale which is applied to each pixel-value
+ */
+ImageWrapper.prototype.overlay = function(canvas, scale, from) {
+    if (!scale || scale < 0 || scale > 360) {
+        scale = 360;
+    }
+    var hsv = [0, 1, 1];
+    var rgb = [0, 0, 0];
+    var whiteRgb = [255, 255, 255];
+    var blackRgb = [0, 0, 0];
+    var result = [];
+    var ctx = canvas.getContext('2d');
+    var frame = ctx.getImageData(from.x, from.y, this.size.x, this.size.y);
+    var data = frame.data;
+    var length = this.data.length;
+    while (length--) {
+        hsv[0] = this.data[length] * scale;
+        result = hsv[0] <= 0 ? whiteRgb : hsv[0] >= 360 ? blackRgb : hsv2rgb(hsv, rgb);
+        data[length * 4 + 0] = result[0];
+        data[length * 4 + 1] = result[1];
+        data[length * 4 + 2] = result[2];
+        data[length * 4 + 3] = 255;
+    }
+    ctx.putImageData(frame, from.x, from.y);
+};
+
+export default ImageWrapper;

src/common/mediaDevices.js

@@ -0,0 +1,17 @@
+
+export function enumerateDevices() {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.enumerateDevices === 'function') {
+        return navigator.mediaDevices.enumerateDevices();
+    }
+    return Promise.reject(new Error('enumerateDevices is not defined'));
+};
+
+export function getUserMedia(constraints) {
+    if (navigator.mediaDevices
+            && typeof navigator.mediaDevices.getUserMedia === 'function') {
+        return navigator.mediaDevices
+            .getUserMedia(constraints);
+    }
+    return Promise.reject(new Error('getUserMedia is not defined'));
+}

src/common/subImage.js

@@ -0,0 +1,90 @@
+/**
+ * Construct representing a part of another {ImageWrapper}. Shares data
+ * between the parent and the child.
+ * @param from {ImageRef} The position where to start the {SubImage} from. (top-left corner)
+ * @param size {ImageRef} The size of the resulting image
+ * @param I {ImageWrapper} The {ImageWrapper} to share from
+ * @returns {SubImage} A shared part of the original image
+ */
+function SubImage(from, size, I) {
+    if (!I) {
+        I = {
+            data: null,
+            size: size
+        };
+    }
+    this.data = I.data;
+    this.originalSize = I.size;
+    this.I = I;
+
+    this.from = from;
+    this.size = size;
+}
+
+/**
+ * Displays the {SubImage} in a given canvas
+ * @param canvas {Canvas} The canvas element to write to
+ * @param scale {Number} Scale which is applied to each pixel-value
+ */
+SubImage.prototype.show = function(canvas, scale) {
+    var ctx,
+        frame,
+        data,
+        current,
+        y,
+        x,
+        pixel;
+
+    if (!scale) {
+        scale = 1.0;
+    }
+    ctx = canvas.getContext('2d');
+    canvas.width = this.size.x;
+    canvas.height = this.size.y;
+    frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
+    data = frame.data;
+    current = 0;
+    for (y = 0; y < this.size.y; y++) {
+        for (x = 0; x < this.size.x; x++) {
+            pixel = y * this.size.x + x;
+            current = this.get(x, y) * scale;
+            data[pixel * 4 + 0] = current;
+            data[pixel * 4 + 1] = current;
+            data[pixel * 4 + 2] = current;
+            data[pixel * 4 + 3] = 255;
+        }
+    }
+    frame.data = data;
+    ctx.putImageData(frame, 0, 0);
+};
+
+/**
+ * Retrieves a given pixel position from the {SubImage}
+ * @param x {Number} The x-position
+ * @param y {Number} The y-position
+ * @returns {Number} The grayscale value at the pixel-position
+ */
+SubImage.prototype.get = function(x, y) {
+    return this.data[(this.from.y + y) * this.originalSize.x + this.from.x + x];
+};
+
+/**
+ * Updates the underlying data from a given {ImageWrapper}
+ * @param image {ImageWrapper} The updated image
+ */
+SubImage.prototype.updateData = function(image) {
+    this.originalSize = image.size;
+    this.data = image.data;
+};
+
+/**
+ * Updates the position of the shared area
+ * @param from {x,y} The new location
+ * @returns {SubImage} returns {this} for possible chaining
+ */
+SubImage.prototype.updateFrom = function(from) {
+    this.from = from;
+    return this;
+};
+
+export default (SubImage);

src/common/typedefs.js

@@ -0,0 +1,51 @@
+/*
+ * typedefs.js
+ * Normalizes browser-specific prefixes
+ */
+
+if (typeof window !== 'undefined') {
+    window.requestAnimFrame = (function () {
+        return window.requestAnimationFrame ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame ||
+            window.oRequestAnimationFrame ||
+            window.msRequestAnimationFrame ||
+            function (/* function FrameRequestCallback */ callback) {
+                window.setTimeout(callback, 1000 / 60);
+            };
+    })();
+}
+Math.imul = Math.imul || function(a, b) {
+    var ah = (a >>> 16) & 0xffff,
+        al = a & 0xffff,
+        bh = (b >>> 16) & 0xffff,
+        bl = b & 0xffff;
+    // the shift by 0 fixes the sign on the high part
+    // the final |0 converts the unsigned value into a signed value
+    return ((al * bl) + (((ah * bl + al * bh) << 16) >>> 0) | 0);
+};
+
+if (typeof Object.assign !== 'function') {
+    Object.assign = function(target) { // .length of function is 2
+        'use strict';
+        if (target === null) { // TypeError if undefined or null
+            throw new TypeError('Cannot convert undefined or null to object');
+        }
+
+        var to = Object(target);
+
+        for (var index = 1; index < arguments.length; index++) {
+            var nextSource = arguments[index];
+
+            if (nextSource !== null) { // Skip over if undefined or null
+                for (var nextKey in nextSource) {
+                    // Avoid bugs when hasOwnProperty is shadowed
+                    if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
+                        to[nextKey] = nextSource[nextKey];
+                    }
+                }
+            }
+        }
+        return to;
+    };
+}

src/config.js

@@ -1,60 +0,0 @@
-/**
- * The basic configuration
- */
-
-define(function(){
-  var config = {
-      inputStream: { name: "Live",
-          type: "LiveStream",
-          constraints: {
-              width: 640,
-              height: 480,
-              minAspectRatio: 0,
-              maxAspectRatio: 100,
-              facing: "environment" // or user
-          },
-          area: {
-              top: "0%",
-              right: "0%",
-              left: "0%",
-              bottom: "0%"
-          },
-          singleChannel: false // true: only the red color-channel is read
-      },
-      tracking: false,
-      debug: false,
-      controls: false,
-      locate: true,
-      numOfWorkers: 4,
-      visual: {
-        show: true
-      },
-      decoder:{
-        drawBoundingBox: false,
-        showFrequency: false,
-        drawScanline: false,
-        showPattern: false,
-        readers: [
-          'code_128_reader'
-        ]
-      },
-      locator: {
-        halfSample: true,
-        patchSize: "medium", // x-small, small, medium, large, x-large
-        showCanvas: false,
-        showPatches: false,
-        showFoundPatches: false,
-        showSkeleton: false,
-        showLabels: false,
-        showPatchLabels: false,
-        showRemainingPatchLabels: false,
-        boxFromPatches: {
-          showTransformed: false,
-          showTransformedBox: false,
-          showBB: false
-        }
-      }
-   };
-
-   return config;
-});

src/config/config.dev.js

@@ -0,0 +1,51 @@
+module.exports = {
+    inputStream: {
+        name: "Live",
+        type: "LiveStream",
+        constraints: {
+            width: 640,
+            height: 480,
+            // aspectRatio: 640/480, // optional
+            facingMode: "environment", // or user
+            // deviceId: "38745983457387598375983759834"
+        },
+        area: {
+            top: "0%",
+            right: "0%",
+            left: "0%",
+            bottom: "0%"
+        },
+        singleChannel: false // true: only the red color-channel is read
+    },
+    locate: true,
+    numOfWorkers: 0,
+    decoder: {
+        readers: [
+            'code_128_reader'
+        ],
+        debug: {
+            drawBoundingBox: false,
+            showFrequency: false,
+            drawScanline: false,
+            showPattern: false
+        }
+    },
+    locator: {
+        halfSample: true,
+        patchSize: "medium", // x-small, small, medium, large, x-large
+        debug: {
+            showCanvas: false,
+            showPatches: false,
+            showFoundPatches: false,
+            showSkeleton: false,
+            showLabels: false,
+            showPatchLabels: false,
+            showRemainingPatchLabels: false,
+            boxFromPatches: {
+                showTransformed: false,
+                showTransformedBox: false,
+                showBB: false
+            }
+        }
+    }
+};

src/config/config.js

@@ -0,0 +1,11 @@
+let config;
+
+if (ENV.development){
+    config = require('./config.dev.js');
+} else if (ENV.node) {
+    config = require('./config.node.js');
+} else {
+    config = require('./config.prod.js');
+}
+
+export default config;

src/config/config.node.js

@@ -0,0 +1,25 @@
+module.exports = {
+    inputStream: {
+        type: "ImageStream",
+        sequence: false,
+        size: 800,
+        area: {
+            top: "0%",
+            right: "0%",
+            left: "0%",
+            bottom: "0%"
+        },
+        singleChannel: false // true: only the red color-channel is read
+    },
+    locate: true,
+    numOfWorkers: 0,
+    decoder: {
+        readers: [
+            'code_128_reader'
+        ]
+    },
+    locator: {
+        halfSample: true,
+        patchSize: "medium" // x-small, small, medium, large, x-large
+    }
+};

src/config/config.prod.js

@@ -0,0 +1,31 @@
+module.exports = {
+    inputStream: {
+        name: "Live",
+        type: "LiveStream",
+        constraints: {
+            width: 640,
+            height: 480,
+            // aspectRatio: 640/480, // optional
+            facingMode: "environment", // or user
+            // deviceId: "38745983457387598375983759834"
+        },
+        area: {
+            top: "0%",
+            right: "0%",
+            left: "0%",
+            bottom: "0%"
+        },
+        singleChannel: false // true: only the red color-channel is read
+    },
+    locate: true,
+    numOfWorkers: 4,
+    decoder: {
+        readers: [
+            'code_128_reader'
+        ]
+    },
+    locator: {
+        halfSample: true,
+        patchSize: "medium" // x-small, small, medium, large, x-large
+    }
+};

src/cv_utils.js

@@ -1,717 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define, vec2, vec3 */
-
-define(['cluster', 'glMatrixAddon', "array_helper"], function(Cluster2, glMatrixAddon, ArrayHelper) {
-
-    "use strict";
-    /*
-    * cv_utils.js
-    * Collection of CV functions and libraries
-    */
-
-    /**
-     * Namespace for various CV alorithms
-     * @class Represents a collection of useful CV algorithms/functions
-     */
-
-    var CVUtils = {};
-
-    /**
-     * @param x x-coordinate
-     * @param y y-coordinate
-     * @return ImageReference {x,y} Coordinate
-     */
-    CVUtils.imageRef = function(x, y) {
-        var that = {
-            x : x,
-            y : y,
-            toVec2 : function() {
-                return vec2.create([this.x, this.y]);
-            },
-            toVec3 : function() {
-                return vec3.create([this.x, this.y, 1]);
-            },
-            round : function() {
-                this.x = this.x > 0.0 ? Math.floor(this.x + 0.5) : Math.floor(this.x - 0.5);
-                this.y = this.y > 0.0 ? Math.floor(this.y + 0.5) : Math.floor(this.y - 0.5);
-                return this;
-            }
-        };
-        return that;
-    };
-
-    /**
-     * Computes an integral image of a given grayscale image.
-     * @param imageDataContainer {ImageDataContainer} the image to be integrated
-     */
-    CVUtils.computeIntegralImage2 = function(imageWrapper, integralWrapper) {
-        var imageData = imageWrapper.data;
-        var width = imageWrapper.size.x;
-        var height = imageWrapper.size.y;
-        var integralImageData = integralWrapper.data;
-        var sum = 0, posA = 0, posB = 0, posC = 0, posD = 0, x, y;
-
-        // sum up first column
-        posB = width;
-        sum = 0;
-        for ( y = 1; y < height; y++) {
-            sum += imageData[posA];
-            integralImageData[posB] += sum;
-            posA += width;
-            posB += width;
-        }
-
-        posA = 0;
-        posB = 1;
-        sum = 0;
-        for ( x = 1; x < width; x++) {
-            sum += imageData[posA];
-            integralImageData[posB] += sum;
-            posA++;
-            posB++;
-        }
-
-        for ( y = 1; y < height; y++) {
-            posA = y * width + 1;
-            posB = (y - 1) * width + 1;
-            posC = y * width;
-            posD = (y - 1) * width;
-            for ( x = 1; x < width; x++) {
-                integralImageData[posA] += imageData[posA] + integralImageData[posB] + integralImageData[posC] - integralImageData[posD];
-                posA++;
-                posB++;
-                posC++;
-                posD++;
-            }
-        }
-    };
-
-    CVUtils.computeIntegralImage = function(imageWrapper, integralWrapper) {
-        var imageData = imageWrapper.data;
-        var width = imageWrapper.size.x;
-        var height = imageWrapper.size.y;
-        var integralImageData = integralWrapper.data;
-        var sum = 0;
-
-        // sum up first row
-        for (var i = 0; i < width; i++) {
-            sum += imageData[i];
-            integralImageData[i] = sum;
-        }
-
-        for (var v = 1; v < height; v++) {
-            sum = 0;
-            for (var u = 0; u < width; u++) {
-                sum += imageData[v * width + u];
-                integralImageData[((v) * width) + u] = sum + integralImageData[(v - 1) * width + u];
-            }
-        }
-    };
-
-    CVUtils.thresholdImage = function(imageWrapper, threshold, targetWrapper) {
-        if (!targetWrapper) {
-            targetWrapper = imageWrapper;
-        }
-        var imageData = imageWrapper.data, length = imageData.length, targetData = targetWrapper.data;
-
-        while (length--) {
-            targetData[length] = imageData[length] < threshold ? 1 : 0;
-        }
-    };
-
-    CVUtils.computeHistogram = function(imageWrapper, bitsPerPixel) {
-        if (!bitsPerPixel) {
-            bitsPerPixel = 8;
-        }
-        var imageData = imageWrapper.data,
-            length = imageData.length,
-            bitShift = 8 - bitsPerPixel,
-            bucketCnt = 1 << bitsPerPixel,
-            hist = new Int32Array(bucketCnt);
-
-        while (length--) {
-            hist[imageData[length] >> bitShift]++;
-        }
-        return hist;
-    };
-
-    CVUtils.sharpenLine = function(line) {
-        var i,
-            length = line.length,
-            left = line[0],
-            center = line[1],
-            right;
-
-        for (i = 1; i < length - 1; i++) {
-            right = line[i + 1];
-            //  -1 4 -1 kernel
-            line[i-1] = (((center * 2) - left - right)) & 255;
-            left = center;
-            center = right;
-        }
-        return line;
-    };
-
-    CVUtils.determineOtsuThreshold = function(imageWrapper, bitsPerPixel) {
-        if (!bitsPerPixel) {
-            bitsPerPixel = 8;
-        }
-        var hist,
-            threshold,
-            bitShift = 8 - bitsPerPixel;
-
-        function px(init, end) {
-            var sum = 0, i;
-            for ( i = init; i <= end; i++) {
-                sum += hist[i];
-            }
-            return sum;
-        }
-
-        function mx(init, end) {
-            var i, sum = 0;
-
-            for ( i = init; i <= end; i++) {
-                sum += i * hist[i];
-            }
-
-            return sum;
-        }
-
-        function determineThreshold() {
-            var vet = [0], p1, p2, p12, k, m1, m2, m12,
-                max = (1 << bitsPerPixel) - 1;
-
-            hist = CVUtils.computeHistogram(imageWrapper, bitsPerPixel);
-            for ( k = 1; k < max; k++) {
-                p1 = px(0, k);
-                p2 = px(k + 1, max);
-                p12 = p1 * p2;
-                if (p12 === 0) {
-                    p12 = 1;
-                }
-                m1 = mx(0, k) * p2;
-                m2 = mx(k + 1, max) * p1;
-                m12 = m1 - m2;
-                vet[k] = m12 * m12 / p12;
-            }
-            return ArrayHelper.maxIndex(vet);
-        }
-
-        threshold = determineThreshold();
-        return threshold << bitShift;
-    };
-
-    CVUtils.otsuThreshold = function(imageWrapper, targetWrapper) {
-        var threshold = CVUtils.determineOtsuThreshold(imageWrapper);
-
-        CVUtils.thresholdImage(imageWrapper, threshold, targetWrapper);
-        return threshold;
-    };
-
-    // local thresholding
-    CVUtils.computeBinaryImage = function(imageWrapper, integralWrapper, targetWrapper) {
-        CVUtils.computeIntegralImage(imageWrapper, integralWrapper);
-
-        if (!targetWrapper) {
-            targetWrapper = imageWrapper;
-        }
-        var imageData = imageWrapper.data;
-        var targetData = targetWrapper.data;
-        var width = imageWrapper.size.x;
-        var height = imageWrapper.size.y;
-        var integralImageData = integralWrapper.data;
-        var sum = 0, v, u, kernel = 3, A, B, C, D, avg, size = (kernel * 2 + 1) * (kernel * 2 + 1);
-
-        // clear out top & bottom-border
-        for ( v = 0; v <= kernel; v++) {
-            for ( u = 0; u < width; u++) {
-                targetData[((v) * width) + u] = 0;
-                targetData[(((height - 1) - v) * width) + u] = 0;
-            }
-        }
-
-        // clear out left & right border
-        for ( v = kernel; v < height - kernel; v++) {
-            for ( u = 0; u <= kernel; u++) {
-                targetData[((v) * width) + u] = 0;
-                targetData[((v) * width) + (width - 1 - u)] = 0;
-            }
-        }
-
-        for ( v = kernel + 1; v < height - kernel - 1; v++) {
-            for ( u = kernel + 1; u < width - kernel; u++) {
-                A = integralImageData[(v - kernel - 1) * width + (u - kernel - 1)];
-                B = integralImageData[(v - kernel - 1) * width + (u + kernel)];
-                C = integralImageData[(v + kernel) * width + (u - kernel - 1)];
-                D = integralImageData[(v + kernel) * width + (u + kernel)];
-                sum = D - C - B + A;
-                avg = sum / (size);
-                targetData[v * width + u] = imageData[v * width + u] > (avg + 5) ? 0 : 1;
-            }
-        }
-    };
-
-    CVUtils.cluster = function(points, threshold, property) {
-        var i, k, cluster, point, clusters = [];
-
-        if (!property) {
-            property = "rad";
-        }
-
-        function addToCluster(point) {
-            var found = false;
-            for ( k = 0; k < clusters.length; k++) {
-                cluster = clusters[k];
-                if (cluster.fits(point)) {
-                    cluster.add(point);
-                    found = true;
-                }
-            }
-            return found;
-        }
-
-        // iterate over each cloud
-        for ( i = 0; i < points.length; i++) {
-            point = Cluster2.createPoint(points[i], i, property);
-            if (!addToCluster(point)) {
-                clusters.push(Cluster2.create(point, threshold));
-            }
-        }
-
-        return clusters;
-
-    };
-
-    CVUtils.Tracer = {
-        trace : function(points, vec) {
-            var iteration, maxIterations = 10, top = [], result = [], centerPos = 0, currentPos = 0;
-
-            function trace(idx, forward) {
-                var from, to, toIdx, predictedPos, thresholdX = 1, thresholdY = Math.abs(vec[1] / 10), found = false;
-
-                function match(pos, predicted) {
-                    if (pos.x > (predicted.x - thresholdX) && pos.x < (predicted.x + thresholdX) && pos.y > (predicted.y - thresholdY) && pos.y < (predicted.y + thresholdY)) {
-                        return true;
-                    } else {
-                        return false;
-                    }
-                }
-
-                // check if the next index is within the vec specifications
-                // if not, check as long as the threshold is met
-
-                from = points[idx];
-                if (forward) {
-                    predictedPos = {
-                        x : from.x + vec[0],
-                        y : from.y + vec[1]
-                    };
-                } else {
-                    predictedPos = {
-                        x : from.x - vec[0],
-                        y : from.y - vec[1]
-                    };
-                }
-
-                toIdx = forward ? idx + 1 : idx - 1;
-                to = points[toIdx];
-                while (to && ( found = match(to, predictedPos)) !== true && (Math.abs(to.y - from.y) < vec[1])) {
-                    toIdx = forward ? toIdx + 1 : toIdx - 1;
-                    to = points[toIdx];
-                }
-
-                return found ? toIdx : null;
-            }
-
-            for ( iteration = 0; iteration < maxIterations; iteration++) {
-                // randomly select point to start with
-                centerPos = Math.floor(Math.random() * points.length);
-
-                // trace forward
-                top = [];
-                currentPos = centerPos;
-                top.push(points[currentPos]);
-                while (( currentPos = trace(currentPos, true)) !== null) {
-                    top.push(points[currentPos]);
-                }
-                if (centerPos > 0) {
-                    currentPos = centerPos;
-                    while (( currentPos = trace(currentPos, false)) !== null) {
-                        top.push(points[currentPos]);
-                    }
-                }
-
-                if (top.length > result.length) {
-                    result = top;
-                }
-            }
-
-            return result;
-
-        }
-    };
-
-    CVUtils.DILATE = 1;
-    CVUtils.ERODE = 2;
-
-    CVUtils.dilate = function(inImageWrapper, outImageWrapper) {
-        var v, u, inImageData = inImageWrapper.data, outImageData = outImageWrapper.data, height = inImageWrapper.size.y, width = inImageWrapper.size.x, sum, yStart1, yStart2, xStart1, xStart2;
-
-        for ( v = 1; v < height - 1; v++) {
-            for ( u = 1; u < width - 1; u++) {
-                yStart1 = v - 1;
-                yStart2 = v + 1;
-                xStart1 = u - 1;
-                xStart2 = u + 1;
-                sum = inImageData[yStart1 * width + xStart1]/* +   inImageData[yStart1*width+u] */ + inImageData[yStart1 * width + xStart2] +
-                /* inImageData[v*width+xStart1]  + */
-                inImageData[v * width + u] + /* inImageData[v*width+xStart2] +*/
-                inImageData[yStart2 * width + xStart1]/* +   inImageData[yStart2*width+u]*/ + inImageData[yStart2 * width + xStart2];
-                outImageData[v * width + u] = sum > 0 ? 1 : 0;
-            }
-        }
-    };
-
-    CVUtils.erode = function(inImageWrapper, outImageWrapper) {
-        var v, u, inImageData = inImageWrapper.data, outImageData = outImageWrapper.data, height = inImageWrapper.size.y, width = inImageWrapper.size.x, sum, yStart1, yStart2, xStart1, xStart2;
-
-        for ( v = 1; v < height - 1; v++) {
-            for ( u = 1; u < width - 1; u++) {
-                yStart1 = v - 1;
-                yStart2 = v + 1;
-                xStart1 = u - 1;
-                xStart2 = u + 1;
-                sum = inImageData[yStart1 * width + xStart1]/* +   inImageData[yStart1*width+u] */ + inImageData[yStart1 * width + xStart2] +
-                /* inImageData[v*width+xStart1]  + */
-                inImageData[v * width + u] + /* inImageData[v*width+xStart2] +*/
-                inImageData[yStart2 * width + xStart1]/* +   inImageData[yStart2*width+u]*/ + inImageData[yStart2 * width + xStart2];
-                outImageData[v * width + u] = sum === 5 ? 1 : 0;
-            }
-        }
-    };
-
-    CVUtils.subtract = function(aImageWrapper, bImageWrapper, resultImageWrapper) {
-        if (!resultImageWrapper) {
-            resultImageWrapper = aImageWrapper;
-        }
-        var length = aImageWrapper.data.length, aImageData = aImageWrapper.data, bImageData = bImageWrapper.data, cImageData = resultImageWrapper.data;
-
-        while (length--) {
-            cImageData[length] = aImageData[length] - bImageData[length];
-        }
-    };
-
-    CVUtils.bitwiseOr = function(aImageWrapper, bImageWrapper, resultImageWrapper) {
-        if (!resultImageWrapper) {
-            resultImageWrapper = aImageWrapper;
-        }
-        var length = aImageWrapper.data.length, aImageData = aImageWrapper.data, bImageData = bImageWrapper.data, cImageData = resultImageWrapper.data;
-
-        while (length--) {
-            cImageData[length] = aImageData[length] || bImageData[length];
-        }
-    };
-
-    CVUtils.countNonZero = function(imageWrapper) {
-        var length = imageWrapper.data.length, data = imageWrapper.data, sum = 0;
-
-        while (length--) {
-            sum += data[length];
-        }
-        return sum;
-    };
-
-    CVUtils.topGeneric = function(list, top, scoreFunc) {
-        var i, minIdx = 0, min = 0, queue = [], score, hit, pos;
-
-        for ( i = 0; i < top; i++) {
-            queue[i] = {
-                score : 0,
-                item : null
-            };
-        }
-
-        for ( i = 0; i < list.length; i++) {
-            score = scoreFunc.apply(this, [list[i]]);
-            if (score > min) {
-                hit = queue[minIdx];
-                hit.score = score;
-                hit.item = list[i];
-                min = Number.MAX_VALUE;
-                for ( pos = 0; pos < top; pos++) {
-                    if (queue[pos].score < min) {
-                        min = queue[pos].score;
-                        minIdx = pos;
-                    }
-                }
-            }
-        }
-
-        return queue;
-    };
-
-    CVUtils.grayArrayFromImage = function(htmlImage, offsetX, ctx, array) {
-        ctx.drawImage(htmlImage, offsetX, 0, htmlImage.width, htmlImage.height);
-        var ctxData = ctx.getImageData(offsetX, 0, htmlImage.width, htmlImage.height).data;
-        CVUtils.computeGray(ctxData, array);
-    };
-
-    CVUtils.grayArrayFromContext = function(ctx, size, offset, array) {
-        var ctxData = ctx.getImageData(offset.x, offset.y, size.x, size.y).data;
-        CVUtils.computeGray(ctxData, array);
-    };
-
-    CVUtils.grayAndHalfSampleFromCanvasData = function(canvasData, size, outArray) {
-        var topRowIdx = 0;
-        var bottomRowIdx = size.x;
-        var endIdx = Math.floor(canvasData.length / 4);
-        var outWidth = size.x / 2;
-        var outImgIdx = 0;
-        var inWidth = size.x;
-        var i;
-
-        while (bottomRowIdx < endIdx) {
-            for ( i = 0; i < outWidth; i++) {
-                outArray[outImgIdx] = Math.floor(((0.299 * canvasData[topRowIdx * 4 + 0] + 0.587 * canvasData[topRowIdx * 4 + 1] + 0.114 * canvasData[topRowIdx * 4 + 2]) + (0.299 * canvasData[(topRowIdx + 1) * 4 + 0] + 0.587 * canvasData[(topRowIdx + 1) * 4 + 1] + 0.114 * canvasData[(topRowIdx + 1) * 4 + 2]) + (0.299 * canvasData[(bottomRowIdx) * 4 + 0] + 0.587 * canvasData[(bottomRowIdx) * 4 + 1] + 0.114 * canvasData[(bottomRowIdx) * 4 + 2]) + (0.299 * canvasData[(bottomRowIdx + 1) * 4 + 0] + 0.587 * canvasData[(bottomRowIdx + 1) * 4 + 1] + 0.114 * canvasData[(bottomRowIdx + 1) * 4 + 2])) / 4);
-                outImgIdx++;
-                topRowIdx = topRowIdx + 2;
-                bottomRowIdx = bottomRowIdx + 2;
-            }
-            topRowIdx = topRowIdx + inWidth;
-            bottomRowIdx = bottomRowIdx + inWidth;
-        }
-
-    };
-
-    CVUtils.computeGray = function(imageData, outArray, config) {
-        var l = (imageData.length / 4) | 0,
-            i,
-            singleChannel = config && config.singleChannel === true;
-
-        if (singleChannel) {
-            for (i = 0; i < l; i++) {
-                outArray[i] = imageData[i * 4 + 0];
-            }
-        } else {
-            for (i = 0; i < l; i++) {
-                outArray[i] = Math.floor(0.299 * imageData[i * 4 + 0] + 0.587 * imageData[i * 4 + 1] + 0.114 * imageData[i * 4 + 2]);
-            }
-        }
-    };
-
-    CVUtils.loadImageArray = function(src, callback, canvas) {
-        if (!canvas)
-            canvas = document.createElement('canvas');
-        var img = new Image();
-        img.callback = callback;
-        img.onload = function() {
-            canvas.width = this.width;
-            canvas.height = this.height;
-            var ctx = canvas.getContext('2d');
-            ctx.drawImage(this, 0, 0);
-            var array = new Uint8Array(this.width * this.height);
-            ctx.drawImage(this, 0, 0);
-            var data = ctx.getImageData(0, 0, this.width, this.height).data;
-            CVUtils.computeGray(data, array);
-            this.callback(array, {
-                x : this.width,
-                y : this.height
-            }, this);
-        };
-        img.src = src;
-    };
-
-    /**
-     * @param inImg {ImageWrapper} input image to be sampled
-     * @param outImg {ImageWrapper} to be stored in
-     */
-    CVUtils.halfSample = function(inImgWrapper, outImgWrapper) {
-        var inImg = inImgWrapper.data;
-        var inWidth = inImgWrapper.size.x;
-        var outImg = outImgWrapper.data;
-        var topRowIdx = 0;
-        var bottomRowIdx = inWidth;
-        var endIdx = inImg.length;
-        var outWidth = inWidth / 2;
-        var outImgIdx = 0;
-        while (bottomRowIdx < endIdx) {
-            for (var i = 0; i < outWidth; i++) {
-                outImg[outImgIdx] = Math.floor((inImg[topRowIdx] + inImg[topRowIdx + 1] + inImg[bottomRowIdx] + inImg[bottomRowIdx + 1]) / 4);
-                outImgIdx++;
-                topRowIdx = topRowIdx + 2;
-                bottomRowIdx = bottomRowIdx + 2;
-            }
-            topRowIdx = topRowIdx + inWidth;
-            bottomRowIdx = bottomRowIdx + inWidth;
-        }
-    };
-
-    CVUtils.hsv2rgb = function(hsv, rgb) {
-        var h = hsv[0], s = hsv[1], v = hsv[2], c = v * s, x = c * (1 - Math.abs((h / 60) % 2 - 1)), m = v - c, r = 0, g = 0, b = 0;
-        rgb = rgb || [0, 0, 0];
-
-        if (h < 60) {
-            r = c;
-            g = x;
-        } else if (h < 120) {
-            r = x;
-            g = c;
-        } else if (h < 180) {
-            g = c;
-            b = x;
-        } else if (h < 240) {
-            g = x;
-            b = c;
-        } else if (h < 300) {
-            r = x;
-            b = c;
-        } else if (h < 360) {
-            r = c;
-            b = x;
-        }
-        rgb[0] = ((r + m) * 255) | 0;
-        rgb[1] = ((g + m) * 255) | 0;
-        rgb[2] = ((b + m) * 255) | 0;
-        return rgb;
-    };
-
-    CVUtils._computeDivisors = function(n) {
-        var largeDivisors = [],
-            divisors = [],
-            i;
-
-        for (i = 1; i < Math.sqrt(n) + 1; i++) {
-            if (n % i === 0) {
-                divisors.push(i);
-                if (i !== n/i) {
-                    largeDivisors.unshift(Math.floor(n/i));
-                }
-            }
-        }
-        return divisors.concat(largeDivisors);
-    };
-
-    CVUtils._computeIntersection = function(arr1, arr2) {
-        var i = 0,
-            j = 0,
-            result = [];
-
-        while (i < arr1.length && j < arr2.length) {
-            if (arr1[i] === arr2[j]) {
-                result.push(arr1[i]);
-                i++;
-                j++;
-            } else if (arr1[i] > arr2[j]) {
-                j++;
-            } else {
-                i++;
-            }
-        }
-        return result;
-    };
-
-    CVUtils.calculatePatchSize = function(patchSize, imgSize) {
-        var divisorsX = this._computeDivisors(imgSize.x),
-            divisorsY = this._computeDivisors(imgSize.y),
-            wideSide = Math.max(imgSize.x, imgSize.y),
-            common = this._computeIntersection(divisorsX, divisorsY),
-            nrOfPatchesList = [8, 10, 15, 20, 32, 60, 80],
-            nrOfPatchesMap = {
-                "x-small": 5,
-                "small": 4,
-                "medium": 3,
-                "large": 2,
-                "x-large": 1
-            },
-            nrOfPatchesIdx = nrOfPatchesMap[patchSize] || nrOfPatchesMap.medium,
-            nrOfPatches = nrOfPatchesList[nrOfPatchesIdx],
-            desiredPatchSize = Math.floor(wideSide/nrOfPatches),
-            optimalPatchSize;
-
-        function findPatchSizeForDivisors(divisors) {
-            var i = 0,
-                found = divisors[Math.floor(divisors.length/2)];
-
-            while(i < (divisors.length - 1) && divisors[i] < desiredPatchSize) {
-                i++;
-            }
-            if (i > 0) {
-                if (Math.abs(divisors[i] - desiredPatchSize) > Math.abs(divisors[i-1] - desiredPatchSize)) {
-                    found = divisors[i-1];
-                } else {
-                    found = divisors[i];
-                }
-            }
-            if (desiredPatchSize / found < nrOfPatchesList[nrOfPatchesIdx+1] / nrOfPatchesList[nrOfPatchesIdx] &&
-                desiredPatchSize / found > nrOfPatchesList[nrOfPatchesIdx-1]/nrOfPatchesList[nrOfPatchesIdx] ) {
-                return {x: found, y: found};
-            }
-            return null;
-        }
-
-        optimalPatchSize = findPatchSizeForDivisors(common);
-        if (!optimalPatchSize) {
-            optimalPatchSize = findPatchSizeForDivisors(this._computeDivisors(wideSide));
-            if (!optimalPatchSize) {
-                optimalPatchSize = findPatchSizeForDivisors((this._computeDivisors(desiredPatchSize * nrOfPatches)));
-            }
-        }
-        return optimalPatchSize;
-    };
-
-    CVUtils._parseCSSDimensionValues = function(value) {
-        var dimension = {
-                value: parseFloat(value),
-                unit: value.indexOf("%") === value.length-1 ? "%" : "%"
-            };
-
-        return dimension;
-    };
-
-    CVUtils._dimensionsConverters = {
-        top: function(dimension, context) {
-            if (dimension.unit === "%") {
-                return Math.floor(context.height * (dimension.value / 100));
-            }
-        },
-        right: function(dimension, context) {
-            if (dimension.unit === "%") {
-                return Math.floor(context.width - (context.width * (dimension.value / 100)));
-            }
-        },
-        bottom: function(dimension, context) {
-            if (dimension.unit === "%") {
-                return Math.floor(context.height - (context.height * (dimension.value / 100)));
-            }
-        },
-        left: function(dimension, context) {
-            if (dimension.unit === "%") {
-                return Math.floor(context.width * (dimension.value / 100));
-            }
-        }
-    };
-
-    CVUtils.computeImageArea = function(inputWidth, inputHeight, area) {
-        var context = {width: inputWidth, height: inputHeight};
-
-        var parsedArea = Object.keys(area).reduce(function(result, key) {
-            var value = area[key],
-                parsed = CVUtils._parseCSSDimensionValues(value),
-                calculated = CVUtils._dimensionsConverters[key](parsed, context);
-
-            result[key] = calculated;
-            return result;
-        }, {});
-
-        return {
-            sx: parsedArea.left,
-            sy: parsedArea.top,
-            sw: parsedArea.right - parsedArea.left,
-            sh: parsedArea.bottom - parsedArea.top
-        };
-    };
-
-    return (CVUtils);
-});
-

src/decoder/barcode_decoder.js

@@ -0,0 +1,322 @@
+import Bresenham from './bresenham';
+import ImageDebug from '../common/image_debug';
+import Code128Reader from '../reader/code_128_reader';
+import EANReader from '../reader/ean_reader';
+import Code39Reader from '../reader/code_39_reader';
+import Code39VINReader from '../reader/code_39_vin_reader';
+import CodabarReader from '../reader/codabar_reader';
+import UPCReader from '../reader/upc_reader';
+import EAN8Reader from '../reader/ean_8_reader';
+import EAN2Reader from '../reader/ean_2_reader';
+import EAN5Reader from '../reader/ean_5_reader';
+import UPCEReader from '../reader/upc_e_reader';
+import I2of5Reader from '../reader/i2of5_reader';
+import TwoOfFiveReader from '../reader/2of5_reader';
+import Code93Reader from '../reader/code_93_reader';
+
+const READERS = {
+    code_128_reader: Code128Reader,
+    ean_reader: EANReader,
+    ean_5_reader: EAN5Reader,
+    ean_2_reader: EAN2Reader,
+    ean_8_reader: EAN8Reader,
+    code_39_reader: Code39Reader,
+    code_39_vin_reader: Code39VINReader,
+    codabar_reader: CodabarReader,
+    upc_reader: UPCReader,
+    upc_e_reader: UPCEReader,
+    i2of5_reader: I2of5Reader,
+    '2of5_reader': TwoOfFiveReader,
+    code_93_reader: Code93Reader
+};
+export default {
+    create: function(config, inputImageWrapper) {
+        var _canvas = {
+                ctx: {
+                    frequency: null,
+                    pattern: null,
+                    overlay: null
+                },
+                dom: {
+                    frequency: null,
+                    pattern: null,
+                    overlay: null
+                }
+            },
+            _barcodeReaders = [];
+
+        initCanvas();
+        initReaders();
+        initConfig();
+
+        function initCanvas() {
+            if (ENV.development && typeof document !== 'undefined') {
+                var $debug = document.querySelector("#debug.detection");
+                _canvas.dom.frequency = document.querySelector("canvas.frequency");
+                if (!_canvas.dom.frequency) {
+                    _canvas.dom.frequency = document.createElement("canvas");
+                    _canvas.dom.frequency.className = "frequency";
+                    if ($debug) {
+                        $debug.appendChild(_canvas.dom.frequency);
+                    }
+                }
+                _canvas.ctx.frequency = _canvas.dom.frequency.getContext("2d");
+
+                _canvas.dom.pattern = document.querySelector("canvas.patternBuffer");
+                if (!_canvas.dom.pattern) {
+                    _canvas.dom.pattern = document.createElement("canvas");
+                    _canvas.dom.pattern.className = "patternBuffer";
+                    if ($debug) {
+                        $debug.appendChild(_canvas.dom.pattern);
+                    }
+                }
+                _canvas.ctx.pattern = _canvas.dom.pattern.getContext("2d");
+
+                _canvas.dom.overlay = document.querySelector("canvas.drawingBuffer");
+                if (_canvas.dom.overlay) {
+                    _canvas.ctx.overlay = _canvas.dom.overlay.getContext("2d");
+                }
+            }
+        }
+
+        function initReaders() {
+            config.readers.forEach(function(readerConfig) {
+                var reader,
+                    configuration = {},
+                    supplements = [];
+
+                if (typeof readerConfig === 'object') {
+                    reader = readerConfig.format;
+                    configuration = readerConfig.config;
+                } else if (typeof readerConfig === 'string') {
+                    reader = readerConfig;
+                }
+                if (ENV.development) {
+                    console.log("Before registering reader: ", reader);
+                }
+                if (configuration.supplements) {
+                    supplements = configuration
+                        .supplements.map((supplement) => {
+                            return new READERS[supplement]();
+                        });
+                }
+                _barcodeReaders.push(new READERS[reader](configuration, supplements));
+            });
+            if (ENV.development) {
+                console.log("Registered Readers: " + _barcodeReaders
+                    .map((reader) => JSON.stringify({format: reader.FORMAT, config: reader.config}))
+                    .join(', '));
+            }
+        }
+
+        function initConfig() {
+            if (ENV.development && typeof document !== 'undefined') {
+                var i,
+                    vis = [{
+                        node: _canvas.dom.frequency,
+                        prop: config.debug.showFrequency
+                    }, {
+                        node: _canvas.dom.pattern,
+                        prop: config.debug.showPattern
+                    }];
+
+                for (i = 0; i < vis.length; i++) {
+                    if (vis[i].prop === true) {
+                        vis[i].node.style.display = "block";
+                    } else {
+                        vis[i].node.style.display = "none";
+                    }
+                }
+            }
+        }
+
+        /**
+         * extend the line on both ends
+         * @param {Array} line
+         * @param {Number} angle
+         */
+        function getExtendedLine(line, angle, ext) {
+            function extendLine(amount) {
+                var extension = {
+                    y: amount * Math.sin(angle),
+                    x: amount * Math.cos(angle)
+                };
+
+                line[0].y -= extension.y;
+                line[0].x -= extension.x;
+                line[1].y += extension.y;
+                line[1].x += extension.x;
+            }
+
+            // check if inside image
+            extendLine(ext);
+            while (ext > 1 && (!inputImageWrapper.inImageWithBorder(line[0], 0)
+                    || !inputImageWrapper.inImageWithBorder(line[1], 0))) {
+                ext -= Math.ceil(ext / 2);
+                extendLine(-ext);
+            }
+            return line;
+        }
+
+        function getLine(box) {
+            return [{
+                x: (box[1][0] - box[0][0]) / 2 + box[0][0],
+                y: (box[1][1] - box[0][1]) / 2 + box[0][1]
+            }, {
+                x: (box[3][0] - box[2][0]) / 2 + box[2][0],
+                y: (box[3][1] - box[2][1]) / 2 + box[2][1]
+            }];
+        }
+
+        function tryDecode(line) {
+            var result = null,
+                i,
+                barcodeLine = Bresenham.getBarcodeLine(inputImageWrapper, line[0], line[1]);
+
+            if (ENV.development && config.debug.showFrequency) {
+                ImageDebug.drawPath(line, {x: 'x', y: 'y'}, _canvas.ctx.overlay, {color: 'red', lineWidth: 3});
+                Bresenham.debug.printFrequency(barcodeLine.line, _canvas.dom.frequency);
+            }
+
+            Bresenham.toBinaryLine(barcodeLine);
+
+            if (ENV.development && config.debug.showPattern) {
+                Bresenham.debug.printPattern(barcodeLine.line, _canvas.dom.pattern);
+            }
+
+            for ( i = 0; i < _barcodeReaders.length && result === null; i++) {
+                result = _barcodeReaders[i].decodePattern(barcodeLine.line);
+            }
+            if (result === null){
+                return null;
+            }
+            return {
+                codeResult: result,
+                barcodeLine: barcodeLine
+            };
+        }
+
+        /**
+         * This method slices the given area apart and tries to detect a barcode-pattern
+         * for each slice. It returns the decoded barcode, or null if nothing was found
+         * @param {Array} box
+         * @param {Array} line
+         * @param {Number} lineAngle
+         */
+        function tryDecodeBruteForce(box, line, lineAngle) {
+            var sideLength = Math.sqrt(Math.pow(box[1][0] - box[0][0], 2) + Math.pow((box[1][1] - box[0][1]), 2)),
+                i,
+                slices = 16,
+                result = null,
+                dir,
+                extension,
+                xdir = Math.sin(lineAngle),
+                ydir = Math.cos(lineAngle);
+
+            for ( i = 1; i < slices && result === null; i++) {
+                // move line perpendicular to angle
+                dir = sideLength / slices * i * (i % 2 === 0 ? -1 : 1);
+                extension = {
+                    y: dir * xdir,
+                    x: dir * ydir
+                };
+                line[0].y += extension.x;
+                line[0].x -= extension.y;
+                line[1].y += extension.x;
+                line[1].x -= extension.y;
+
+                result = tryDecode(line);
+            }
+            return result;
+        }
+
+        function getLineLength(line) {
+            return Math.sqrt(
+                Math.pow(Math.abs(line[1].y - line[0].y), 2) +
+                Math.pow(Math.abs(line[1].x - line[0].x), 2));
+        }
+
+        /**
+         * With the help of the configured readers (Code128 or EAN) this function tries to detect a
+         * valid barcode pattern within the given area.
+         * @param {Object} box The area to search in
+         * @returns {Object} the result {codeResult, line, angle, pattern, threshold}
+         */
+        function decodeFromBoundingBox(box) {
+            var line,
+                lineAngle,
+                ctx = _canvas.ctx.overlay,
+                result,
+                lineLength;
+
+            if (ENV.development) {
+                if (config.debug.drawBoundingBox && ctx) {
+                    ImageDebug.drawPath(box, {x: 0, y: 1}, ctx, {color: "blue", lineWidth: 2});
+                }
+            }
+
+            line = getLine(box);
+            lineLength = getLineLength(line);
+            lineAngle = Math.atan2(line[1].y - line[0].y, line[1].x - line[0].x);
+            line = getExtendedLine(line, lineAngle, Math.floor(lineLength * 0.1));
+            if (line === null){
+                return null;
+            }
+
+            result = tryDecode(line);
+            if (result === null) {
+                result = tryDecodeBruteForce(box, line, lineAngle);
+            }
+
+            if (result === null) {
+                return null;
+            }
+
+            if (ENV.development && result && config.debug.drawScanline && ctx) {
+                ImageDebug.drawPath(line, {x: 'x', y: 'y'}, ctx, {color: 'red', lineWidth: 3});
+            }
+
+            return {
+                codeResult: result.codeResult,
+                line: line,
+                angle: lineAngle,
+                pattern: result.barcodeLine.line,
+                threshold: result.barcodeLine.threshold
+            };
+        }
+
+        return {
+            decodeFromBoundingBox: function(box) {
+                return decodeFromBoundingBox(box);
+            },
+            decodeFromBoundingBoxes: function(boxes) {
+                var i, result,
+                    barcodes = [],
+                    multiple = config.multiple;
+
+                for ( i = 0; i < boxes.length; i++) {
+                    const box = boxes[i];
+                    result = decodeFromBoundingBox(box) || {};
+                    result.box = box;
+
+                    if (multiple) {
+                        barcodes.push(result);
+                    } else if (result.codeResult) {
+                        return result;
+                    }
+                }
+
+                if (multiple) {
+                    return {
+                        barcodes
+                    };
+                }
+            },
+            setReaders: function(readers) {
+                config.readers = readers;
+                _barcodeReaders.length = 0;
+                initReaders();
+            }
+        };
+    }
+};

src/decoder/bresenham.js

@@ -0,0 +1,198 @@
+import ImageWrapper from '../common/image_wrapper';
+
+var Bresenham = {};
+
+var Slope = {
+    DIR: {
+        UP: 1,
+        DOWN: -1
+    }
+};
+/**
+ * Scans a line of the given image from point p1 to p2 and returns a result object containing
+ * gray-scale values (0-255) of the underlying pixels in addition to the min
+ * and max values.
+ * @param {Object} imageWrapper
+ * @param {Object} p1 The start point {x,y}
+ * @param {Object} p2 The end point {x,y}
+ * @returns {line, min, max}
+ */
+Bresenham.getBarcodeLine = function(imageWrapper, p1, p2) {
+    var x0 = p1.x | 0,
+        y0 = p1.y | 0,
+        x1 = p2.x | 0,
+        y1 = p2.y | 0,
+        steep = Math.abs(y1 - y0) > Math.abs(x1 - x0),
+        deltax,
+        deltay,
+        error,
+        ystep,
+        y,
+        tmp,
+        x,
+        line = [],
+        imageData = imageWrapper.data,
+        width = imageWrapper.size.x,
+        sum = 0,
+        val,
+        min = 255,
+        max = 0;
+
+    function read(a, b) {
+        val = imageData[b * width + a];
+        sum += val;
+        min = val < min ? val : min;
+        max = val > max ? val : max;
+        line.push(val);
+    }
+
+    if (steep) {
+        tmp = x0;
+        x0 = y0;
+        y0 = tmp;
+
+        tmp = x1;
+        x1 = y1;
+        y1 = tmp;
+    }
+    if (x0 > x1) {
+        tmp = x0;
+        x0 = x1;
+        x1 = tmp;
+
+        tmp = y0;
+        y0 = y1;
+        y1 = tmp;
+    }
+    deltax = x1 - x0;
+    deltay = Math.abs(y1 - y0);
+    error = (deltax / 2) | 0;
+    y = y0;
+    ystep = y0 < y1 ? 1 : -1;
+    for ( x = x0; x < x1; x++) {
+        if (steep){
+            read(y, x);
+        } else {
+            read(x, y);
+        }
+        error = error - deltay;
+        if (error < 0) {
+            y = y + ystep;
+            error = error + deltax;
+        }
+    }
+
+    return {
+        line: line,
+        min: min,
+        max: max
+    };
+};
+
+/**
+ * Converts the result from getBarcodeLine into a binary representation
+ * also considering the frequency and slope of the signal for more robust results
+ * @param {Object} result {line, min, max}
+ */
+Bresenham.toBinaryLine = function(result) {
+    var min = result.min,
+        max = result.max,
+        line = result.line,
+        slope,
+        slope2,
+        center = min + (max - min) / 2,
+        extrema = [],
+        currentDir,
+        dir,
+        threshold = (max - min) / 12,
+        rThreshold = -threshold,
+        i,
+        j;
+
+    // 1. find extrema
+    currentDir = line[0] > center ? Slope.DIR.UP : Slope.DIR.DOWN;
+    extrema.push({
+        pos: 0,
+        val: line[0]
+    });
+    for ( i = 0; i < line.length - 2; i++) {
+        slope = (line[i + 1] - line[i]);
+        slope2 = (line[i + 2] - line[i + 1]);
+        if ((slope + slope2) < rThreshold && line[i + 1] < (center * 1.5)) {
+            dir = Slope.DIR.DOWN;
+        } else if ((slope + slope2) > threshold && line[i + 1] > (center * 0.5)) {
+            dir = Slope.DIR.UP;
+        } else {
+            dir = currentDir;
+        }
+
+        if (currentDir !== dir) {
+            extrema.push({
+                pos: i,
+                val: line[i]
+            });
+            currentDir = dir;
+        }
+    }
+    extrema.push({
+        pos: line.length,
+        val: line[line.length - 1]
+    });
+
+    for ( j = extrema[0].pos; j < extrema[1].pos; j++) {
+        line[j] = line[j] > center ? 0 : 1;
+    }
+
+    // iterate over extrema and convert to binary based on avg between minmax
+    for ( i = 1; i < extrema.length - 1; i++) {
+        if (extrema[i + 1].val > extrema[i].val) {
+            threshold = (extrema[i].val + ((extrema[i + 1].val - extrema[i].val) / 3) * 2) | 0;
+        } else {
+            threshold = (extrema[i + 1].val + ((extrema[i].val - extrema[i + 1].val) / 3)) | 0;
+        }
+
+        for ( j = extrema[i].pos; j < extrema[i + 1].pos; j++) {
+            line[j] = line[j] > threshold ? 0 : 1;
+        }
+    }
+
+    return {
+        line: line,
+        threshold: threshold
+    };
+};
+
+/**
+ * Used for development only
+ */
+Bresenham.debug = {
+    printFrequency: function(line, canvas) {
+        var i,
+            ctx = canvas.getContext("2d");
+        canvas.width = line.length;
+        canvas.height = 256;
+
+        ctx.beginPath();
+        ctx.strokeStyle = "blue";
+        for ( i = 0; i < line.length; i++) {
+            ctx.moveTo(i, 255);
+            ctx.lineTo(i, 255 - line[i]);
+        }
+        ctx.stroke();
+        ctx.closePath();
+    },
+
+    printPattern: function(line, canvas) {
+        var ctx = canvas.getContext("2d"), i;
+
+        canvas.width = line.length;
+        ctx.fillColor = "black";
+        for ( i = 0; i < line.length; i++) {
+            if (line[i] === 1) {
+                ctx.fillRect(i, 0, 1, 100);
+            }
+        }
+    }
+};
+
+export default Bresenham;

src/ean_8_reader.js

@@ -1,55 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-    [
-        "./ean_reader"
-    ],
-    function(EANReader) {
-        "use strict";
-
-        function EAN8Reader() {
-            EANReader.call(this);
-        }
-
-        var properties = {
-            FORMAT: {value: "ean_8", writeable: false}
-        };
-
-        EAN8Reader.prototype = Object.create(EANReader.prototype, properties);
-        EAN8Reader.prototype.constructor = EAN8Reader;
-
-        EAN8Reader.prototype._decodePayload = function(code, result, decodedCodes) {
-            var i,
-                self = this;
-
-            for ( i = 0; i < 4; i++) {
-                code = self._decodeCode(code.end, self.CODE_G_START);
-                if (!code) {
-                    return null;
-                }
-                result.push(code.code);
-                decodedCodes.push(code);
-            }
-
-            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true, false);
-            if (code === null) {
-                return null;
-            }
-            decodedCodes.push(code);
-
-            for ( i = 0; i < 4; i++) {
-                code = self._decodeCode(code.end, self.CODE_G_START);
-                if (!code) {
-                    return null;
-                }
-                decodedCodes.push(code);
-                result.push(code.code);
-            }
-
-            return code;
-        };
-
-        return (EAN8Reader);
-    }
-);

src/ean_reader.js

@@ -1,337 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(
-     [
-        "./barcode_reader"
-    ],
-    function(BarcodeReader) {
-        "use strict";
-        
-        function EANReader(opts) {
-            BarcodeReader.call(this, opts);
-        }
-        
-        var properties = {
-            CODE_L_START : {value: 0},
-            MODULO : {value: 7},
-            CODE_G_START : {value: 10},
-            START_PATTERN : {value: [1 / 3 * 7, 1 / 3 * 7, 1 / 3 * 7]},
-            STOP_PATTERN : {value: [1 / 3 * 7, 1 / 3 * 7, 1 / 3 * 7]},
-            MIDDLE_PATTERN : {value: [1 / 5 * 7, 1 / 5 * 7, 1 / 5 * 7, 1 / 5 * 7, 1 / 5 * 7]},
-            CODE_PATTERN : {value: [
-                [3, 2, 1, 1],
-                [2, 2, 2, 1],
-                [2, 1, 2, 2],
-                [1, 4, 1, 1],
-                [1, 1, 3, 2],
-                [1, 2, 3, 1],
-                [1, 1, 1, 4],
-                [1, 3, 1, 2],
-                [1, 2, 1, 3],
-                [3, 1, 1, 2],
-                [1, 1, 2, 3],
-                [1, 2, 2, 2],
-                [2, 2, 1, 2],
-                [1, 1, 4, 1],
-                [2, 3, 1, 1],
-                [1, 3, 2, 1],
-                [4, 1, 1, 1],
-                [2, 1, 3, 1],
-                [3, 1, 2, 1],
-                [2, 1, 1, 3]
-            ]},
-            CODE_FREQUENCY : {value: [0, 11, 13, 14, 19, 25, 28, 21, 22, 26]},
-            SINGLE_CODE_ERROR: {value: 0.67},
-            AVG_CODE_ERROR: {value: 0.27},
-            FORMAT: {value: "ean_13", writeable: false}
-        };
-        
-        EANReader.prototype = Object.create(BarcodeReader.prototype, properties);
-        EANReader.prototype.constructor = EANReader;
-        
-        EANReader.prototype._decodeCode = function(start, coderange) {
-            var counter = [0, 0, 0, 0],
-                i,
-                self = this,
-                offset = start,
-                isWhite = !self._row[offset],
-                counterPos = 0,
-                bestMatch = {
-                    error : Number.MAX_VALUE,
-                    code : -1,
-                    start : start,
-                    end : start
-                },
-                code,
-                error,
-                normalized;
-
-            if (!coderange) {
-                coderange = self.CODE_PATTERN.length;
-            }
-
-            for ( i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    if (counterPos === counter.length - 1) {
-                        normalized = self._normalize(counter);
-                        if (normalized) {
-                            for (code = 0; code < coderange; code++) {
-                                error = self._matchPattern(normalized, self.CODE_PATTERN[code]);
-                                if (error < bestMatch.error) {
-                                    bestMatch.code = code;
-                                    bestMatch.error = error;
-                                }
-                            }
-                            bestMatch.end = i;
-                            if (bestMatch.error > self.AVG_CODE_ERROR) {
-                                return null;
-                            }
-                            return bestMatch;
-                        }
-                    } else {
-                        counterPos++;
-                    }
-                    counter[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-            return null;
-        };
-
-        EANReader.prototype._findPattern = function(pattern, offset, isWhite, tryHarder, epsilon) {
-            var counter = [],
-                self = this,
-                i,
-                counterPos = 0,
-                bestMatch = {
-                    error : Number.MAX_VALUE,
-                    code : -1,
-                    start : 0,
-                    end : 0
-                },
-                error,
-                j,
-                sum,
-                normalized;
-
-            if (!offset) {
-                offset = self._nextSet(self._row);
-            }
-
-            if (isWhite === undefined) {
-                isWhite = false;
-            }
-
-            if (tryHarder === undefined) {
-                tryHarder = true;
-            }
-
-            if ( epsilon === undefined) {
-                epsilon = self.AVG_CODE_ERROR;
-            }
-
-            for ( i = 0; i < pattern.length; i++) {
-                counter[i] = 0;
-            }
-
-            for ( i = offset; i < self._row.length; i++) {
-                if (self._row[i] ^ isWhite) {
-                    counter[counterPos]++;
-                } else {
-                    if (counterPos === counter.length - 1) {
-                        sum = 0;
-                        for ( j = 0; j < counter.length; j++) {
-                            sum += counter[j];
-                        }
-                        normalized = self._normalize(counter);
-                        if (normalized) {
-                            error = self._matchPattern(normalized, pattern);
-
-                            if (error < epsilon) {
-                                bestMatch.error = error;
-                                bestMatch.start = i - sum;
-                                bestMatch.end = i;
-                                return bestMatch;
-                            }
-                        }
-                        if (tryHarder) {
-                            for ( j = 0; j < counter.length - 2; j++) {
-                                counter[j] = counter[j + 2];
-                            }
-                            counter[counter.length - 2] = 0;
-                            counter[counter.length - 1] = 0;
-                            counterPos--;
-                        } else {
-                            return null;
-                        }
-                    } else {
-                        counterPos++;
-                    }
-                    counter[counterPos] = 1;
-                    isWhite = !isWhite;
-                }
-            }
-            return null;
-        };
-
-        EANReader.prototype._findStart = function() {
-            var self = this,
-                leadingWhitespaceStart,
-                offset = self._nextSet(self._row),
-                startInfo;
-
-            while(!startInfo) {
-                startInfo = self._findPattern(self.START_PATTERN, offset);
-                if (!startInfo) {
-                    return null;
-                }
-                leadingWhitespaceStart = startInfo.start - (startInfo.end - startInfo.start);
-                if (leadingWhitespaceStart >= 0) {
-                    if (self._matchRange(leadingWhitespaceStart, startInfo.start, 0)) {
-                        return startInfo;
-                    }
-                }
-                offset = startInfo.end;
-                startInfo = null;
-            }
-        };
-
-        EANReader.prototype._verifyTrailingWhitespace = function(endInfo) {
-            var self = this,
-                trailingWhitespaceEnd;
-
-            trailingWhitespaceEnd = endInfo.end + (endInfo.end - endInfo.start);
-            if (trailingWhitespaceEnd < self._row.length) {
-                if (self._matchRange(endInfo.end, trailingWhitespaceEnd, 0)) {
-                    return endInfo;
-                }
-            }
-            return null;
-        };
-
-        EANReader.prototype._findEnd = function(offset, isWhite) {
-            var self = this,
-                endInfo = self._findPattern(self.STOP_PATTERN, offset, isWhite, false);
-
-            return endInfo !== null ? self._verifyTrailingWhitespace(endInfo) : null;
-        };
-
-        EANReader.prototype._calculateFirstDigit = function(codeFrequency) {
-            var i,
-                self = this;
-
-            for ( i = 0; i < self.CODE_FREQUENCY.length; i++) {
-                if (codeFrequency === self.CODE_FREQUENCY[i]) {
-                    return i;
-                }
-            }
-            return null;
-        };
-
-        EANReader.prototype._decodePayload = function(code, result, decodedCodes) {
-            var i,
-                self = this,
-                codeFrequency = 0x0,
-                firstDigit;
-
-            for ( i = 0; i < 6; i++) {
-                code = self._decodeCode(code.end);
-                if (!code) {
-                    return null;
-                }
-                if (code.code >= self.CODE_G_START) {
-                    code.code = code.code - self.CODE_G_START;
-                    codeFrequency |= 1 << (5 - i);
-                } else {
-                    codeFrequency |= 0 << (5 - i);
-                }
-                result.push(code.code);
-                decodedCodes.push(code);
-            }
-
-            firstDigit = self._calculateFirstDigit(codeFrequency);
-            if (firstDigit === null) {
-                return null;
-            }
-            result.unshift(firstDigit);
-
-            code = self._findPattern(self.MIDDLE_PATTERN, code.end, true, false);
-            if (code === null) {
-                return null;
-            }
-            decodedCodes.push(code);
-
-            for ( i = 0; i < 6; i++) {
-                code = self._decodeCode(code.end, self.CODE_G_START);
-                if (!code) {
-                    return null;
-                }
-                decodedCodes.push(code);
-                result.push(code.code);
-            }
-
-            return code;
-        };
-
-        EANReader.prototype._decode = function() {
-            var startInfo,
-                self = this,
-                code,
-                result = [],
-                decodedCodes = [];
-
-            startInfo = self._findStart();
-            if (!startInfo) {
-                return null;
-            }
-            code = {
-                code : startInfo.code,
-                start : startInfo.start,
-                end : startInfo.end
-            };
-            decodedCodes.push(code);
-            code = self._decodePayload(code, result, decodedCodes);
-            if (!code) {
-                return null;
-            }
-            code = self._findEnd(code.end, false);
-            if (!code){
-                return null;
-            }
-
-            decodedCodes.push(code);
-
-            // Checksum
-            if (!self._checksum(result)) {
-                return null;
-            }
-
-            return {
-                code : result.join(""),
-                start : startInfo.start,
-                end : code.end,
-                codeset : "",
-                startInfo : startInfo,
-                decodedCodes : decodedCodes
-            };
-        };
-
-        EANReader.prototype._checksum = function(result) {
-            var sum = 0, i;
-
-            for ( i = result.length - 2; i >= 0; i -= 2) {
-                sum += result[i];
-            }
-            sum *= 3;
-            for ( i = result.length - 1; i >= 0; i -= 2) {
-                sum += result[i];
-            }
-            return sum % 10 === 0;
-        };
-        
-        return (EANReader);
-    }
-);

src/events.js

@@ -1,91 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(function() {
-    "use strict";
-
-    var _events = function() {
-        var events = {};
-
-        function getEvent(eventName) {
-            if (!events[eventName]) {
-                events[eventName] = {
-                    subscribers : []
-                };
-            }
-            return events[eventName];
-        }
-        
-        function clearEvents(){
-            events = {};
-        }
-
-        function publishSubscription(subscription, data) {
-            if (subscription.async) {
-                setTimeout(function() {
-                    subscription.callback(data);
-                }, 4);
-            } else {
-                subscription.callback(data);
-            }
-        }
-        
-        function subscribe(event, callback, async) {
-            var subscription;
-
-            if ( typeof callback === "function") {
-                subscription = {
-                    callback : callback,
-                    async : async
-                };
-            } else {
-                subscription = callback;
-                if (!subscription.callback) {
-                    throw "Callback was not specified on options";
-                }
-            }
-
-            getEvent(event).subscribers.push(subscription);
-        }
-
-        return {
-            subscribe : function(event, callback, async) {
-                return subscribe(event, callback, async);
-            },
-            publish : function(eventName, data) {
-                var event = getEvent(eventName),
-                    subscribers = event.subscribers;
-                    
-                event.subscribers = subscribers.filter(function(subscriber) {
-                    publishSubscription(subscriber, data);
-                    return !subscriber.once;
-                });
-            },
-            once: function(event, callback, async) {
-                subscribe(event, {
-                    callback: callback,
-                    async: async,
-                    once: true
-                });
-            },
-            unsubscribe: function(eventName, callback) {
-                var event;
-                
-                if (eventName) {
-                    event = getEvent(eventName);
-                    if (event && callback) {
-                        event.subscribers = event.subscribers.filter(function(subscriber){
-                            return subscriber.callback !== callback;
-                        });
-                    } else {
-                        event.subscribers = [];
-                    }
-                } else {
-                    clearEvents();
-                }
-            }
-        };
-    }();
-
-    return _events;
-}); 

src/frame_grabber.js

@@ -1,78 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(["cv_utils"], function(CVUtils) {
-    "use strict";
-
-    var FrameGrabber = {};
-
-    FrameGrabber.create = function(inputStream, canvas) {
-        var _that = {},
-            _streamConfig = inputStream.getConfig(),
-            _video_size = CVUtils.imageRef(inputStream.getRealWidth(), inputStream.getRealHeight()),
-            _canvasSize = inputStream.getCanvasSize(),
-            _size = CVUtils.imageRef(inputStream.getWidth(), inputStream.getHeight()),
-            topRight = inputStream.getTopRight(),
-            _sx = topRight.x,
-            _sy = topRight.y,
-            _canvas,
-            _ctx = null,
-            _data = null;
-
-        _canvas = canvas ? canvas : document.createElement("canvas");
-        _canvas.width = _canvasSize.x;
-        _canvas.height = _canvasSize.y;
-        _ctx = _canvas.getContext("2d");
-        _data = new Uint8Array(_size.x * _size.y);
-        console.log("FrameGrabber", JSON.stringify({
-            size: _size,
-            topRight: topRight,
-            videoSize: _video_size,
-            canvasSize: _canvasSize
-        }));
-
-        /**
-         * Uses the given array as frame-buffer 
-         */
-        _that.attachData = function(data) {
-            _data = data;
-        };
-
-        /**
-         * Returns the used frame-buffer
-         */
-        _that.getData = function() {
-            return _data;
-        };
-
-        /**
-         * Fetches a frame from the input-stream and puts into the frame-buffer.
-         * The image-data is converted to gray-scale and then half-sampled if configured.
-         */
-        _that.grab = function() {
-            var doHalfSample = _streamConfig.halfSample,
-                frame = inputStream.getFrame(),
-                ctxData;
-            if (frame) {
-                _ctx.drawImage(frame, 0, 0, _canvasSize.x, _canvasSize.y);
-                ctxData = _ctx.getImageData(_sx, _sy, _size.x, _size.y).data;
-                if(doHalfSample){
-                    CVUtils.grayAndHalfSampleFromCanvasData(ctxData, _size, _data);
-                } else {
-                    CVUtils.computeGray(ctxData, _data, _streamConfig);
-                }
-                return true;
-            } else {
-                return false;
-            }
-        };
-
-        _that.getSize = function() {
-            return _size;
-        };
-
-        return _that;
-    };
-
-    return (FrameGrabber);
-});

src/glMatrixAddon.js

@@ -1,408 +0,0 @@
-/*
- * glMatrixAddon.js
- * Extension to the glMatrix library. The original glMatrix library
- * was created by Brandon Jones.
- */
-
-
-mat4.xVec4 = function(mat, vec, dest){
-	if(!dest) { dest = vec; }	
-	var x = vec[0], y = vec[1], z = vec[2], w = vec[3];
-	
-	dest[0] = mat[0]*x + mat[1]*y + mat[2]*z + mat[3]*w;
-	dest[1] = mat[4]*x + mat[5]*y + mat[6]*z + mat[7]*w;
-	dest[2] = mat[8]*x + mat[9]*y + mat[10]*z + mat[11]*w;
-	dest[3] = mat[12]*x + mat[13]*y + mat[14]*z + mat[15]*w;
-	
-	return dest;
-};
-
-mat3.scale = function(mat, scalar, dest){
-	if(!dest || mat == dest) {
-		mat[0] *= scalar;
-		mat[1] *= scalar;
-		mat[2] *= scalar;
-		mat[3] *= scalar;
-		mat[4] *= scalar;
-		mat[5] *= scalar;
-		mat[6] *= scalar;
-		mat[7] *= scalar;
-		mat[8] *= scalar;
-		return mat;
-	}
-	dest = mat3.create();
-	dest[0] = mat[0]*scalar;
-	dest[1] = mat[1]*scalar;
-	dest[2] = mat[2]*scalar;
-	dest[3] = mat[3]*scalar;
-	dest[4] = mat[4]*scalar;
-	dest[5] = mat[5]*scalar;
-	dest[6] = mat[6]*scalar;
-	dest[7] = mat[7]*scalar;
-	dest[8] = mat[8]*scalar;
-	return dest;
-};
-
-mat3.inverse = function(mat, dest){
-	if(!dest) { dest = mat; }
-	
-	var ha00 = mat[0], ha01 = mat[1], ha02 = mat[2];
-	var ha10 = mat[3], ha11 = mat[4], ha12 = mat[5];
-	var ha20 = mat[6], ha21 = mat[7], ha22 = mat[8];
-	
-	var invDetA = 1/(ha00*ha11*ha22 + ha01*ha12*ha20 + ha02*ha10*ha21 - ha02*ha11*ha20 - ha01*ha10*ha22 - ha00*ha12*ha21);
-	dest[0] = (ha11*ha22 - ha12*ha21)*invDetA;
-	dest[1] = (ha02*ha21 - ha01*ha22)*invDetA;
-	dest[2] = (ha01*ha12 - ha02*ha11)*invDetA;
-	dest[3] = (ha12*ha20 - ha10*ha22)*invDetA;
-	dest[4] = (ha00*ha22 - ha02*ha20)*invDetA;
-	dest[5] = (ha02*ha10 - ha00*ha12)*invDetA;
-	dest[6] = (ha10*ha21 - ha11*ha20)*invDetA;
-	dest[7] = (ha01*ha20 - ha00*ha21)*invDetA;
-	dest[8] = (ha00*ha11 - ha01*ha10)*invDetA;
-	return dest;
-};
-
-mat3.multiply = function(mat, mat2, dest) {
-	if(!dest) { dest = mat; }
-	
-	var ha00 = mat[0], ha01 = mat[1], ha02 = mat[2];
-	var ha10 = mat[3], ha11 = mat[4], ha12 = mat[5];
-	var ha20 = mat[6], ha21 = mat[7], ha22 = mat[8];
-	
-	var hb00 = mat2[0], hb01 = mat2[1], hb02 = mat2[2];
-	var hb10 = mat2[3], hb11 = mat2[4], hb12 = mat2[5];
-	var hb20 = mat2[6], hb21 = mat2[7], hb22 = mat2[8];
-	
-	dest[0] = ha00*hb00 + ha01*hb10 + ha02*hb20;
-	dest[1] = ha00*hb01 + ha01*hb11 + ha02*hb21;
-	dest[2] = ha00*hb02 + ha01*hb12 + ha02*hb22;
-	
-	dest[3] = ha10*hb00 + ha11*hb10 + ha12*hb20;
-	dest[4] = ha10*hb01 + ha11*hb11 + ha12*hb21;
-	dest[5] = ha10*hb02 + ha11*hb12 + ha12*hb22;
-	
-	dest[6] = ha20*hb00 + ha21*hb10 + ha22*hb20;
-	dest[7] = ha20*hb01 + ha21*hb11 + ha22*hb21;
-	dest[8] = ha20*hb02 + ha21*hb12 + ha22*hb22;
-	return dest;
-};
-
-mat3.xVec3 = function(mat, vec, dest){
-	if(!dest) { dest = vec; }
-	var x = vec[0], y = vec[1], z = vec[2];
-	
-	dest[0] = mat[0]*x + mat[1]*y + mat[2]*z;
-	dest[1] = mat[3]*x + mat[4]*y + mat[5]*z;
-	dest[2] = mat[6]*x + mat[7]*y + mat[8]*z;
-	
-	return dest;
-};
-
-var vec4={};
-
-vec4.create = function(vec){
-	var dest;
-	
-	if(vec) {
-		dest = new glMatrixArrayType(4);
-		dest[0] = vec[0];
-		dest[1] = vec[1];
-		dest[2] = vec[2];
-		dest[3] = vec[3];
-	} else {
-		if(glMatrixArrayType === Array)
-			dest = new glMatrixArrayType([0,0,0,0]);
-		else
-			dest = new glMatrixArrayType(4);
-	}
-	
-	return dest;
-};
-
-vec4.project = function(vec, dest){
-	if(!dest) { dest = vec; }
-	
-	dest[0] = vec[0]/vec[3];
-	dest[1] = vec[1]/vec[3];
-	dest[2] = vec[2]/vec[3];
-	return dest;
-};
-
-vec4.scale = function(vec, val, dest){
-	if(!dest || vec == dest) {
-		vec[0] *= val;
-		vec[1] *= val;
-		vec[2] *= val;
-		vec[4] *= val;
-		return vec;
-	}
-	
-	dest[0] = vec[0]*val;
-	dest[1] = vec[1]*val;
-	dest[2] = vec[2]*val;
-	dest[3] = vec[3]*val;
-	return dest;
-};
-
-vec4.xMat4 = function(vec, mat, dest){
-	if(!dest) { dest = vec; }
-	
-	var x = vec[0], y = vec[1], z = vec[2], w = vec[3];
-	
-	dest[0] = mat[0]*x + mat[4]*y + mat[8]*z + mat[12]*w;
-	dest[1] = mat[1]*x + mat[5]*y + mat[9]*z + mat[13]*w;
-	dest[2] = mat[2]*x + mat[6]*y + mat[10]*z + mat[14]*w;
-	dest[3] = mat[3]*x + mat[7]*y + mat[11]*z + mat[15]*w;
-	
-	return dest;
-};
-
-
-var mat2 = {};
-
-mat2.create = function(mat){
-	var dest;
-	
-	if(mat) {
-		dest = new glMatrixArrayType(4);
-		dest[0] = mat[0];
-		dest[1] = mat[1];
-		dest[2] = mat[2];
-		dest[3] = mat[3];
-	} else {
-		if(glMatrixArrayType === Array)
-			dest  = new glMatrixArrayType([0,0,0,0]);
-		else
-			dest = new glMatrixArrayType(4);
-	}
-	
-	return dest;
-};
-
-mat2.xVec2 = function(mat, vec, dest){
-	if(!dest) { dest = vec; }
-	var x = vec[0], y = vec[1];
-	
-	dest[0] = mat[0]*x + mat[1]*y;
-	dest[1] = mat[2]*x + mat[3]*y;
-	
-	return dest;
-};
-
-mat2.scale = function(mat, scale, dest){
-	if(!dest || mat == dest) {
-		mat[0] *= scale;
-		mat[1] *= scale;
-		mat[2] *= scale;
-		mat[3] *= scale;
-		return mat;
-	}
-	
-	dest[0] = mat[0]*scale;
-	dest[1] = mat[1]*scale;
-	dest[2] = mat[2]*scale;
-	dest[3] = mat[3]*scale;
-	return dest;
-};
-
-mat2.determinant = function(mat){
-	return mat[0]*mat[3] - mat[1]*mat[2];
-};
-
-mat2.inverse = function(mat){
-  var scale = 1/(mat2.determinant(mat));
-  var a = mat[3]*scale,
-      b = -mat[1]*scale,
-      c = -mat[2]*scale,
-      d = mat[0];
-  mat[0] = a;
-  mat[1] = b;
-  mat[2] = c;
-  mat[3] = d;
-  return mat;
-};
-
-var vec2 = {};
-vec2.create = function(vec){
-	var dest;
-	
-	if(vec) {
-		dest = new glMatrixArrayType(2);
-		dest[0] = vec[0];
-		dest[1] = vec[1];
-	} else {
-		if(glMatrixArrayType === Array)
-			dest = new glMatrixArrayType([0,0]);
-		else
-			dest = new glMatrixArrayType(2);
-	}
-	
-	return dest;
-};
-
-vec2.subtract = function(vec, vec2, dest) {
-	if(!dest || vec == dest) {
-		vec[0] -= vec2[0];
-		vec[1] -= vec2[1];
-		return vec;
-	}
-	
-	dest[0] = vec[0] - vec2[0];
-	dest[1] = vec[1] - vec2[1];
-	return dest;
-};
-
-vec2.add = function(vec, vec2, dest) {
-	if(!dest || vec == dest) {
-		vec[0] += vec2[0];
-		vec[1] += vec2[1];
-		return vec;
-	}
-	
-	dest[0] = vec[0] + vec2[0];
-	dest[1] = vec[1] + vec2[1];
-	return dest;
-};
-
-vec2.scale = function(vec, val, dest) {
-	if(!dest || vec == dest) {
-		vec[0] *= val;
-		vec[1] *= val;
-		return vec;
-	}
-	
-	dest[0] = vec[0]*val;
-	dest[1] = vec[1]*val;
-	return dest;
-};
-
-vec2.normalize = function(vec, dest) {
-  if(!dest) { dest = vec; }
-  
-  var x = vec[0], y = vec[1];
-  var len = Math.sqrt(x*x + y*y);
-  
-  if (!len) {
-    dest[0] = 0;
-    dest[1] = 0;
-    return dest;
-  } else if (len == 1) {
-    dest[0] = x;
-    dest[1] = y;
-    return dest;
-  }
-  
-  len = 1 / len;
-  dest[0] = x*len;
-  dest[1] = y*len;
-  return dest;
-};
-
-vec2.dot = function(vec, vec2){
-  return vec[0]*vec2[0] + vec[1]*vec2[1];
-};
-
-vec2.multiply = function(vec, vec2, dest){
-  if(!dest) { dest = vec; }
-  
-  dest[0] = vec[0]*vec2[0];
-  dest[1] = vec[1]*vec2[1];
-  return dest;
-};
-
-/**
- * @param vec vec2 to be unprojected [x,y] -> [x,y,1]
- * @returns vec3 unprojected vector
- */
-vec2.unproject = function(vec){
-	return vec3.create([vec[0], vec[1], 1]);
-};
-
-vec2.length = function(vec){
-  return Math.sqrt(vec[0]*vec[0] + vec[1]*vec[1]);
-};
-
-vec2.perspectiveProject = function(vec){
-  var result = vec2.create(vec);
-  return vec2.scale(result, 1/vec[2]);
-};
-
-/**
- * @param vec vec3 to be projected [x,y,z] -> [x/z,y/z]
- * @returns vec2 projected vector
- */
-vec3.project = function(vec){
-	return vec2.scale(vec2.create(vec), 1/vec[2]);
-};
-
-var vec6 = {};
-vec6.scale = function(vec, val, dest){
-	if(!dest || vec == dest) {
-		vec[0] *= val;
-		vec[1] *= val;
-		vec[2] *= val;
-		vec[3] *= val;
-		vec[4] *= val;
-		vec[5] *= val;
-		return vec;
-	}
-	
-	dest[0] = vec[0]*val;
-	dest[1] = vec[1]*val;
-	dest[2] = vec[2]*val;
-	dest[3] = vec[3]*val;
-	dest[4] = vec[4]*val;
-	dest[5] = vec[5]*val;
-	return dest;
-};
-
-vec6.subtract = function(vec, vec2, dest){
-	if(!dest || vec == dest) {
-		vec[0] -= vec2[0];
-		vec[1] -= vec2[1];
-		vec[2] -= vec2[2];
-		vec[3] -= vec2[3];
-		vec[4] -= vec2[4];
-		vec[5] -= vec2[5];
-		return vec;
-	}
-	
-	dest[0] = vec[0] - vec2[0];
-	dest[1] = vec[1] - vec2[1];
-	dest[2] = vec[2] - vec2[2];
-	dest[3] = vec[3] - vec2[3];
-	dest[4] = vec[4] - vec2[4];
-	dest[5] = vec[5] - vec2[5];
-	return dest;
-};
-
-vec6.dot = function(vec, vec2){
-	return vec[0]*vec2[0] + vec[1]*vec2[1] + vec[2]*vec2[2] + vec[3]*vec2[3] + vec[4]*vec2[4] + vec[5]*vec2[5];
-};
-
-var mat6 = {};
-mat6.xVec6 = function(mat, vec, dest){
-	if(!dest) { dest = vec; }	
-	var x = vec[0], y = vec[1], z = vec[2], u = vec[3], w = vec[4], v = vec[5];
-	
-	dest[0] = mat[0]*x + mat[1]*y + mat[2]*z + mat[3]*u + mat[4]*w + mat[5]*v;
-	dest[1] = mat[6]*x + mat[7]*y + mat[8]*z + mat[9]*u + mat[10]*w + mat[11]*v;
-	dest[2] = mat[12]*x + mat[13]*y + mat[14]*z + mat[15]*u + mat[16]*w + mat[17]*v;
-	dest[3] = mat[18]*x + mat[19]*y + mat[20]*z + mat[21]*u + mat[22]*w + mat[23]*v;
-	dest[4] = mat[24]*x + mat[25]*y + mat[26]*z + mat[27]*u + mat[28]*w + mat[29]*v;
-	dest[5] = mat[30]*x + mat[31]*y + mat[32]*z + mat[33]*u + mat[34]*w + mat[35]*v;
-	
-	return dest;
-};
-
-mat3.xVec3 = function(mat, vec, dest){
-	if(!dest) { dest = vec; }	
-	var x = vec[0], y = vec[1], z = vec[2];
-	
-	dest[0] = mat[0]*x + mat[1]*y + mat[2]*z;
-	dest[1] = mat[3]*x + mat[4]*y + mat[5]*z;
-	dest[2] = mat[6]*x + mat[7]*y + mat[8]*z;
-	
-	return dest;
-};

src/html_utils.js

@@ -1,40 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define([], function() {
-    "use strict";
-
-    function createNode(htmlStr) {
-        var temp = document.createElement('div');
-        
-        temp.innerHTML = htmlStr;
-        while (temp.firstChild) {
-            return temp.firstChild;
-        }
-    }
-
-    function mergeObjects(obj1, obj2) {
-        for (var p in obj2) {
-            try {
-                if (obj2[p].constructor == Object) {
-                    obj1[p] = mergeObjects(obj1[p], obj2[p]);
-                } else {
-                    obj1[p] = obj2[p];
-                }
-            } catch(e) {
-                obj1[p] = obj2[p];
-            }
-        }
-
-        return obj1;
-    }
-
-    return {
-        createNode : function(htmlStr) {
-            return createNode(htmlStr);
-        },
-        mergeObjects : function(obj1, obj2) {
-            return mergeObjects(obj1, obj2);
-        }
-    };
-}); 

src/image_debug.js

@@ -1,49 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(function() {
-    "use strict";
-    
-    return {
-        drawRect: function(pos, size, ctx, style){
-            ctx.strokeStyle = style.color;
-            ctx.fillStyle = style.color;
-            ctx.lineWidth = 1;
-            ctx.beginPath();
-            ctx.strokeRect(pos.x, pos.y, size.x, size.y);
-        },
-        drawPath: function(path, def, ctx, style) {
-            ctx.strokeStyle = style.color;
-            ctx.fillStyle = style.color;
-            ctx.lineWidth = style.lineWidth;
-            ctx.beginPath();
-            ctx.moveTo(path[0][def.x], path[0][def.y]);
-            for (var j = 1; j < path.length; j++) {
-                ctx.lineTo(path[j][def.x], path[j][def.y]);
-            }
-            ctx.closePath();
-            ctx.stroke();
-        },
-        drawImage: function(imageData, size, ctx) {
-            var canvasData = ctx.getImageData(0, 0, size.x, size.y),
-                data = canvasData.data,
-                imageDataPos = imageData.length,
-                canvasDataPos = data.length,
-                value;
-
-            if (canvasDataPos/imageDataPos !== 4) {
-                return false;
-            }
-            while(imageDataPos--){
-                value = imageData[imageDataPos];
-                data[--canvasDataPos] = 255;
-                data[--canvasDataPos] = value;
-                data[--canvasDataPos] = value;
-                data[--canvasDataPos] = value;
-            }
-            ctx.putImageData(canvasData, 0, 0);
-            return true;
-        }
-    };
-    
-});

src/image_loader.js

@@ -1,63 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(function() {
-    "use strict";
-
-    var ImageLoader = {};
-    ImageLoader.load = function(directory, callback, offset, size, sequence) {
-        var htmlImagesSrcArray = new Array(size),
-            htmlImagesArray = new Array(htmlImagesSrcArray.length),
-            i,
-            img,
-            num;
-            
-        if (sequence === false) {
-            htmlImagesSrcArray[0] = directory;
-        } else {
-            for ( i = 0; i < htmlImagesSrcArray.length; i++) {
-                num = (offset + i);
-                htmlImagesSrcArray[i] = directory + "image-" + ("00" + num).slice(-3) + ".jpg";
-            }
-        }
-        htmlImagesArray.notLoaded = [];
-        htmlImagesArray.addImage = function(img) {
-            htmlImagesArray.notLoaded.push(img);
-        };
-        htmlImagesArray.loaded = function(loadedImg) {
-            var notloadedImgs = htmlImagesArray.notLoaded;
-            for (var x = 0; x < notloadedImgs.length; x++) {
-                if (notloadedImgs[x] == loadedImg) {
-                    notloadedImgs.splice(x, 1);
-                    for (var y = 0; y < htmlImagesSrcArray.length; y++) {
-                        var imgName = htmlImagesSrcArray[y].substr(htmlImagesSrcArray[y].lastIndexOf("/"));
-                        if (loadedImg.src.lastIndexOf(imgName) != -1) {
-                            htmlImagesArray[y] = loadedImg;
-                            break;
-                        }
-                    }
-                    break;
-                }
-            }
-            if (notloadedImgs.length === 0) {
-                console.log("Images loaded");
-                callback.apply(null, [htmlImagesArray]);
-            }
-        };
-        
-        for ( i = 0; i < htmlImagesSrcArray.length; i++) {
-            img = new Image();
-            htmlImagesArray.addImage(img);
-            addOnloadHandler(img, htmlImagesArray);
-            img.src = htmlImagesSrcArray[i];
-        }
-    };
-    
-    function addOnloadHandler(img, htmlImagesArray) {
-        img.onload = function() {
-            htmlImagesArray.loaded(this);
-        };
-    }
-
-    return (ImageLoader);
-});

src/image_wrapper.js

@@ -1,424 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define, vec2, mat2  */
-
-define([
-    "subImage",
-    "cv_utils",
-    "array_helper"
-    ], 
-    function(SubImage, CVUtils, ArrayHelper) {
-    
-    'use strict';
-
-    /**
-     * Represents a basic image combining the data and size.
-     * In addition, some methods for manipulation are contained.
-     * @param size {x,y} The size of the image in pixel
-     * @param data {Array} If given, a flat array containing the pixel data
-     * @param ArrayType {Type} If given, the desired DataType of the Array (may be typed/non-typed)
-     * @param initialize {Boolean} Indicating if the array should be initialized on creation.
-     * @returns {ImageWrapper}
-     */
-    function ImageWrapper(size, data, ArrayType, initialize) {
-        if (!data) {
-            if (ArrayType) {
-                this.data = new ArrayType(size.x * size.y);
-                if (ArrayType === Array && initialize) {
-                    ArrayHelper.init(this.data, 0);
-                }
-            } else {
-                this.data = new Uint8Array(size.x * size.y);
-                if (Uint8Array === Array && initialize) {
-                    ArrayHelper.init(this.data, 0);
-                }
-            }
-
-        } else {
-            this.data = data;
-        }
-        this.size = size;
-    }
-
-    /**
-     * tests if a position is within the image with a given offset
-     * @param imgRef {x, y} The location to test
-     * @param border Number the padding value in pixel
-     * @returns {Boolean} true if location inside the image's border, false otherwise
-     * @see cvd/image.h
-     */
-    ImageWrapper.prototype.inImageWithBorder = function(imgRef, border) {
-        return (imgRef.x >= border) && (imgRef.y >= border) && (imgRef.x < (this.size.x - border)) && (imgRef.y < (this.size.y - border));
-    };
-
-    /**
-     * Transforms an image according to the given affine-transformation matrix.
-     * @param inImg ImageWrapper a image containing the information to be extracted.
-     * @param outImg ImageWrapper the image to be filled.  The whole image out image is filled by the in image.
-     * @param M mat2 the matrix used to map point in the out matrix to those in the in matrix
-     * @param inOrig vec2 origin in the in image
-     * @param outOrig vec2 origin in the out image
-     * @returns Number the number of pixels not in the in image
-     * @see cvd/vision.h
-     */
-    ImageWrapper.transform = function(inImg, outImg, M, inOrig, outOrig) {
-        var w = outImg.size.x, h = outImg.size.y, iw = inImg.size.x, ih = inImg.size.y;
-        var across = vec2.create([M[0], M[2]]);
-        var down = vec2.create([M[1], M[3]]);
-        var defaultValue = 0;
-
-        var p0 = vec2.subtract(inOrig, mat2.xVec2(M, outOrig, vec2.create()), vec2.create());
-
-        var min_x = p0[0], min_y = p0[1];
-        var max_x = min_x, max_y = min_y;
-        var p, i, j;
-
-        var sampleFunc = ImageWrapper.sample;
-
-        if (across[0] < 0)
-            min_x += w * across[0];
-        else
-            max_x += w * across[0];
-
-        if (down[0] < 0)
-            min_x += h * down[0];
-        else
-            max_x += h * down[0];
-
-        if (across[1] < 0)
-            min_y += w * across[1];
-        else
-            max_y += w * across[1];
-
-        if (down[1] < 0)
-            min_y += h * down[1];
-        else
-            max_y += h * down[1];
-
-        var carrigeReturn = vec2.subtract(down, vec2.scale(across, w, vec2.create()), vec2.create());
-
-        if (min_x >= 0 && min_y >= 0 && max_x < iw - 1 && max_y < ih - 1) {
-            p = p0;
-            for ( i = 0; i < h; ++i, vec2.add(p, carrigeReturn))
-                for ( j = 0; j < w; ++j, vec2.add(p, across))
-                    outImg.set(j, i, sampleFunc(inImg, p[0], p[1]));
-            return 0;
-        } else {
-            var x_bound = iw - 1;
-            var y_bound = ih - 1;
-            var count = 0;
-            p = p0;
-            for ( i = 0; i < h; ++i, vec2.add(p, carrigeReturn)) {
-                for ( j = 0; j < w; ++j, vec2.add(p, across)) {
-                    if (0 <= p[0] && 0 <= p[1] && p[0] < x_bound && p[1] < y_bound) {
-                        outImg.set(j, i, sampleFunc(inImg, p[0], p[1]));
-                    } else {
-                        outImg.set(j, i, defaultValue); ++count;
-                    }
-                }
-            }
-            return count;
-        }
-    };
-
-    /**
-     * Performs bilinear sampling
-     * @param inImg Image to extract sample from
-     * @param x the x-coordinate
-     * @param y the y-coordinate
-     * @returns the sampled value
-     * @see cvd/vision.h
-     */
-    ImageWrapper.sample = function(inImg, x, y) {
-        var lx = Math.floor(x);
-        var ly = Math.floor(y);
-        var w = inImg.size.x;
-        var base = ly * inImg.size.x + lx;
-        var a = inImg.data[base + 0];
-        var b = inImg.data[base + 1];
-        var c = inImg.data[base + w];
-        var d = inImg.data[base + w + 1];
-        var e = a - b;
-        x -= lx;
-        y -= ly;
-
-        var result = Math.floor(x * (y * (e - c + d) - e) + y * (c - a) + a);
-        return result;
-    };
-
-    /**
-     * Initializes a given array. Sets each element to zero.
-     * @param array {Array} The array to initialize
-     */
-    ImageWrapper.clearArray = function(array) {
-        var l = array.length;
-        while (l--) {
-            array[l] = 0;
-        }
-    };
-
-    /**
-     * Creates a {SubImage} from the current image ({this}).
-     * @param from {ImageRef} The position where to start the {SubImage} from. (top-left corner)
-     * @param size {ImageRef} The size of the resulting image
-     * @returns {SubImage} A shared part of the original image
-     */
-    ImageWrapper.prototype.subImage = function(from, size) {
-        return new SubImage(from, size, this);
-    };
-
-    /**
-     * Creates an {ImageWrapper) and copies the needed underlying image-data area
-     * @param imageWrapper {ImageWrapper} The target {ImageWrapper} where the data should be copied
-     * @param from {ImageRef} The location where to copy from (top-left location)
-     */
-    ImageWrapper.prototype.subImageAsCopy = function(imageWrapper, from) {
-        var sizeY = imageWrapper.size.y, sizeX = imageWrapper.size.x;
-        var x, y;
-        for ( x = 0; x < sizeX; x++) {
-            for ( y = 0; y < sizeY; y++) {
-                imageWrapper.data[y * sizeX + x] = this.data[(from.y + y) * this.size.x + from.x + x];
-            }
-        }
-    };
-
-    ImageWrapper.prototype.copyTo = function(imageWrapper) {
-        var length = this.data.length, srcData = this.data, dstData = imageWrapper.data;
-
-        while (length--) {
-            dstData[length] = srcData[length];
-        }
-    };
-
-    /**
-     * Retrieves a given pixel position from the image
-     * @param x {Number} The x-position
-     * @param y {Number} The y-position
-     * @returns {Number} The grayscale value at the pixel-position
-     */
-    ImageWrapper.prototype.get = function(x, y) {
-        return this.data[y * this.size.x + x];
-    };
-
-    /**
-     * Retrieves a given pixel position from the image
-     * @param x {Number} The x-position
-     * @param y {Number} The y-position
-     * @returns {Number} The grayscale value at the pixel-position
-     */
-    ImageWrapper.prototype.getSafe = function(x, y) {
-        var i;
-        
-        if (!this.indexMapping) {
-            this.indexMapping = {
-                x : [],
-                y : []
-            };
-            for (i = 0; i < this.size.x; i++) {
-                this.indexMapping.x[i] = i;
-                this.indexMapping.x[i + this.size.x] = i;
-            }
-            for (i = 0; i < this.size.y; i++) {
-                this.indexMapping.y[i] = i;
-                this.indexMapping.y[i + this.size.y] = i;
-            }
-        }
-        return this.data[(this.indexMapping.y[y + this.size.y]) * this.size.x + this.indexMapping.x[x + this.size.x]];
-    };
-
-    /**
-     * Sets a given pixel position in the image
-     * @param x {Number} The x-position
-     * @param y {Number} The y-position
-     * @param value {Number} The grayscale value to set
-     * @returns {ImageWrapper} The Image itself (for possible chaining)
-     */
-    ImageWrapper.prototype.set = function(x, y, value) {
-        this.data[y * this.size.x + x] = value;
-        return this;
-    };
-
-    /**
-     * Sets the border of the image (1 pixel) to zero
-     */
-    ImageWrapper.prototype.zeroBorder = function() {
-        var i, width = this.size.x, height = this.size.y, data = this.data;
-        for ( i = 0; i < width; i++) {
-            data[i] = data[(height - 1) * width + i] = 0;
-        }
-        for ( i = 1; i < height - 1; i++) {
-            data[i * width] = data[i * width + (width - 1)] = 0;
-        }
-    };
-
-    /**
-     * Inverts a binary image in place
-     */
-    ImageWrapper.prototype.invert = function() {
-        var data = this.data, length = data.length;
-
-        while (length--) {
-            data[length] = data[length] ? 0 : 1;
-        }
-
-    };
-
-    ImageWrapper.prototype.convolve = function(kernel) {
-        var x, y, kx, ky, kSize = (kernel.length / 2) | 0, accu = 0;
-        for ( y = 0; y < this.size.y; y++) {
-            for ( x = 0; x < this.size.x; x++) {
-                accu = 0;
-                for ( ky = -kSize; ky <= kSize; ky++) {
-                    for ( kx = -kSize; kx <= kSize; kx++) {
-                        accu += kernel[ky+kSize][kx + kSize] * this.getSafe(x + kx, y + ky);
-                    }
-                }
-                this.data[y * this.size.x + x] = accu;
-            }
-        }
-    };
-
-    ImageWrapper.prototype.moments = function(labelcount) {
-        var data = this.data,
-            x,
-            y,
-            height = this.size.y,
-            width = this.size.x,
-            val,
-            ysq,
-            labelsum = [],
-            i,
-            label,
-            mu11,
-            mu02,
-            mu20,
-            x_,
-            y_,
-            tmp,
-            result = [],
-            PI = Math.PI,
-            PI_4 = PI / 4;
-
-        if (labelcount <= 0) {
-            return result;
-        }
-
-        for ( i = 0; i < labelcount; i++) {
-            labelsum[i] = {
-                m00 : 0,
-                m01 : 0,
-                m10 : 0,
-                m11 : 0,
-                m02 : 0,
-                m20 : 0,
-                theta : 0,
-                rad : 0
-            };
-        }
-
-        for ( y = 0; y < height; y++) {
-            ysq = y * y;
-            for ( x = 0; x < width; x++) {
-                val = data[y * width + x];
-                if (val > 0) {
-                    label = labelsum[val - 1];
-                    label.m00 += 1;
-                    label.m01 += y;
-                    label.m10 += x;
-                    label.m11 += x * y;
-                    label.m02 += ysq;
-                    label.m20 += x * x;
-                }
-            }
-        }
-
-        for ( i = 0; i < labelcount; i++) {
-            label = labelsum[i];
-            if (!isNaN(label.m00) && label.m00 !== 0) {
-                x_ = label.m10 / label.m00;
-                y_ = label.m01 / label.m00;
-                mu11 = label.m11 / label.m00 - x_ * y_;
-                mu02 = label.m02 / label.m00 - y_ * y_;
-                mu20 = label.m20 / label.m00 - x_ * x_;
-                tmp = (mu02 - mu20) / (2 * mu11);
-                tmp = 0.5 * Math.atan(tmp) + (mu11 >= 0 ? PI_4 : -PI_4 ) + PI;
-                label.theta = (tmp * 180 / PI + 90) % 180 - 90;
-                if (label.theta < 0) {
-                    label.theta += 180;
-                }
-                label.rad = tmp > PI ? tmp - PI : tmp;
-                label.vec = vec2.create([Math.cos(tmp), Math.sin(tmp)]);
-                result.push(label);
-            }
-        }
-
-        return result;
-    };
-
-    /**
-     * Displays the {ImageWrapper} in a given canvas
-     * @param canvas {Canvas} The canvas element to write to
-     * @param scale {Number} Scale which is applied to each pixel-value
-     */
-    ImageWrapper.prototype.show = function(canvas, scale) {
-        var ctx,
-            frame,
-            data,
-            current,
-            pixel,
-            x,
-            y;
-        
-        if (!scale) {
-            scale = 1.0;
-        }
-        ctx = canvas.getContext('2d');
-        canvas.width = this.size.x;
-        canvas.height = this.size.y;
-        frame = ctx.getImageData(0, 0, canvas.width, canvas.height);
-        data = frame.data;
-        current = 0;
-        for (y = 0; y < this.size.y; y++) {
-            for (x = 0; x < this.size.x; x++) {
-                pixel = y * this.size.x + x;
-                current = this.get(x, y) * scale;
-                data[pixel * 4 + 0] = current;
-                data[pixel * 4 + 1] = current;
-                data[pixel * 4 + 2] = current;
-                data[pixel * 4 + 3] = 255;
-            }
-        }
-        //frame.data = data;
-        ctx.putImageData(frame, 0, 0);
-    };
-
-    /**
-     * Displays the {SubImage} in a given canvas
-     * @param canvas {Canvas} The canvas element to write to
-     * @param scale {Number} Scale which is applied to each pixel-value
-     */
-    ImageWrapper.prototype.overlay = function(canvas, scale, from) {
-        if (!scale || scale < 0 || scale > 360) {
-            scale = 360;
-        }
-        var hsv = [0, 1, 1];
-        var rgb = [0, 0, 0];
-        var whiteRgb = [255, 255, 255];
-        var blackRgb = [0, 0, 0];
-        var result = [];
-        var ctx = canvas.getContext('2d');
-        var frame = ctx.getImageData(from.x, from.y, this.size.x, this.size.y);
-        var data = frame.data;
-        var length = this.data.length;
-        while (length--) {
-            hsv[0] = this.data[length] * scale;
-            result = hsv[0] <= 0 ? whiteRgb : hsv[0] >= 360 ? blackRgb : CVUtils.hsv2rgb(hsv, rgb);
-            data[length * 4 + 0] = result[0];
-            data[length * 4 + 1] = result[1];
-            data[length * 4 + 2] = result[2];
-            data[length * 4 + 3] = 255;
-        }
-        ctx.putImageData(frame, from.x, from.y);
-    };
-
-    return (ImageWrapper);
-}); 

src/input/camera_access.js

@@ -0,0 +1,119 @@
+import {omit, pick} from 'lodash';
+import {getUserMedia, enumerateDevices} from 'mediaDevices';
+
+const facingMatching = {
+    "user": /front/i,
+    "environment": /back/i
+};
+
+var streamRef;
+
+function waitForVideo(video) {
+    return new Promise((resolve, reject) => {
+        let attempts = 10;
+
+        function checkVideo() {
+            if (attempts > 0) {
+                if (video.videoWidth > 10 && video.videoHeight > 10) {
+                    if (ENV.development) {
+                        console.log(video.videoWidth + "px x " + video.videoHeight + "px");
+                    }
+                    resolve();
+                } else {
+                    window.setTimeout(checkVideo, 500);
+                }
+            } else {
+                reject('Unable to play video stream. Is webcam working?');
+            }
+            attempts--;
+        }
+        checkVideo();
+    });
+}
+
+/**
+ * Tries to attach the camera-stream to a given video-element
+ * and calls the callback function when the content is ready
+ * @param {Object} constraints
+ * @param {Object} video
+ */
+function initCamera(video, constraints) {
+    return getUserMedia(constraints)
+    .then((stream) => {
+        return new Promise((resolve) => {
+            streamRef = stream;
+            video.setAttribute("autoplay", true);
+            video.setAttribute('muted', true);
+            video.setAttribute('playsinline', true);
+            video.srcObject = stream;
+            video.addEventListener('loadedmetadata', () => {
+                video.play();
+                resolve();
+            });
+        });
+    })
+    .then(waitForVideo.bind(null, video));
+}
+
+function deprecatedConstraints(videoConstraints) {
+    const normalized = pick(videoConstraints, ["width", "height", "facingMode",
+            "aspectRatio", "deviceId"]);
+
+    if (typeof videoConstraints.minAspectRatio !== 'undefined' &&
+            videoConstraints.minAspectRatio > 0) {
+        normalized.aspectRatio = videoConstraints.minAspectRatio;
+        console.log("WARNING: Constraint 'minAspectRatio' is deprecated; Use 'aspectRatio' instead");
+    }
+    if (typeof videoConstraints.facing !== 'undefined') {
+        normalized.facingMode = videoConstraints.facing;
+        console.log("WARNING: Constraint 'facing' is deprecated. Use 'facingMode' instead'");
+    }
+    return normalized;
+}
+
+export function pickConstraints(videoConstraints) {
+    const normalizedConstraints = {
+        audio: false,
+        video: deprecatedConstraints(videoConstraints)
+    };
+
+    if (normalizedConstraints.video.deviceId
+            && normalizedConstraints.video.facingMode) {
+        delete normalizedConstraints.video.facingMode;
+    }
+    return Promise.resolve(normalizedConstraints);
+}
+
+function enumerateVideoDevices() {
+    return enumerateDevices()
+    .then(devices => devices.filter(device => device.kind === 'videoinput'));
+}
+
+function getActiveTrack() {
+    if (streamRef) {
+        const tracks = streamRef.getVideoTracks();
+        if (tracks && tracks.length) {
+            return tracks[0];
+        }
+    }
+}
+
+export default {
+    request: function(video, videoConstraints) {
+        return pickConstraints(videoConstraints)
+            .then(initCamera.bind(null, video));
+    },
+    release: function() {
+        var tracks = streamRef && streamRef.getVideoTracks();
+        if (tracks && tracks.length) {
+            tracks[0].stop();
+        }
+        streamRef = null;
+    },
+    enumerateVideoDevices,
+    getActiveStreamLabel: function() {
+        const track = getActiveTrack();
+        return track ? track.label : '';
+    },
+    getActiveTrack
+};

src/input/exif_helper.js

@@ -0,0 +1,146 @@
+// Scraped from https://github.com/exif-js/exif-js
+
+const ExifTags = {0x0112: "orientation"};
+export const AvailableTags = Object.keys(ExifTags).map(key => ExifTags[key]);
+
+export function findTagsInObjectURL(src, tags = AvailableTags) {
+    if (/^blob\:/i.test(src)) {
+        return objectURLToBlob(src)
+            .then(readToBuffer)
+            .then(buffer => findTagsInBuffer(buffer, tags));
+    }
+    return Promise.resolve(null);
+}
+
+export function base64ToArrayBuffer(dataUrl) {
+    const base64 = dataUrl.replace(/^data\:([^\;]+)\;base64,/gmi, ''),
+        binary = atob(base64),
+        len = binary.length,
+        buffer = new ArrayBuffer(len),
+        view = new Uint8Array(buffer);
+
+    for (let i = 0; i < len; i++) {
+        view[i] = binary.charCodeAt(i);
+    }
+    return buffer;
+}
+
+function readToBuffer(blob) {
+    return new Promise(resolve => {
+        const fileReader = new FileReader();
+        fileReader.onload = function(e) {
+            return resolve(e.target.result);
+        };
+        fileReader.readAsArrayBuffer(blob);
+    });
+}
+
+function objectURLToBlob(url) {
+    return new Promise((resolve, reject) => {
+        const http = new XMLHttpRequest();
+        http.open("GET", url, true);
+        http.responseType = "blob";
+        http.onreadystatechange = function () {
+            if (http.readyState === XMLHttpRequest.DONE && (http.status === 200 || http.status === 0)) {
+                resolve(this.response);
+            }
+        };
+        http.onerror = reject;
+        http.send();
+    });
+}
+
+export function findTagsInBuffer(file, selectedTags = AvailableTags) {
+    const dataView = new DataView(file),
+        length = file.byteLength,
+        exifTags = selectedTags.reduce((result, selectedTag) => {
+            const exifTag = Object.keys(ExifTags).filter(tag => ExifTags[tag] === selectedTag)[0];
+            if (exifTag) {
+                result[exifTag] = selectedTag;
+            }
+            return result;
+        }, {});
+    let offset = 2,
+        marker;
+
+    if ((dataView.getUint8(0) !== 0xFF) || (dataView.getUint8(1) !== 0xD8)) {
+        return false;
+    }
+
+    while (offset < length) {
+        if (dataView.getUint8(offset) !== 0xFF) {
+            return false;
+        }
+
+        marker = dataView.getUint8(offset + 1);
+        if (marker === 0xE1) {
+            return readEXIFData(dataView, offset + 4, exifTags);
+        } else {
+            offset += 2 + dataView.getUint16(offset + 2);
+        }
+    }
+}
+
+function readEXIFData(file, start, exifTags) {
+    if (getStringFromBuffer(file, start, 4) !== "Exif") {
+        return false;
+    }
+
+    const tiffOffset = start + 6;
+    let bigEnd,
+        tags;
+
+    if (file.getUint16(tiffOffset) === 0x4949) {
+        bigEnd = false;
+    } else if (file.getUint16(tiffOffset) === 0x4D4D) {
+        bigEnd = true;
+    } else {
+        return false;
+    }
+
+    if (file.getUint16(tiffOffset + 2, !bigEnd) !== 0x002A) {
+        return false;
+    }
+
+    const firstIFDOffset = file.getUint32(tiffOffset + 4, !bigEnd);
+    if (firstIFDOffset < 0x00000008) {
+        return false;
+    }
+
+    tags = readTags(file, tiffOffset, tiffOffset + firstIFDOffset, exifTags, bigEnd);
+    return tags;
+}
+
+function readTags(file, tiffStart, dirStart, strings, bigEnd) {
+    const entries = file.getUint16(dirStart, !bigEnd),
+        tags = {};
+
+    for (let i = 0; i < entries; i++) {
+        const entryOffset = dirStart + i * 12 + 2,
+            tag = strings[file.getUint16(entryOffset, !bigEnd)];
+        if (tag) {
+            tags[tag] = readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd);
+        }
+    }
+    return tags;
+}
+
+function readTagValue(file, entryOffset, tiffStart, dirStart, bigEnd) {
+    const type = file.getUint16(entryOffset + 2, !bigEnd),
+        numValues = file.getUint32(entryOffset + 4, !bigEnd);
+
+    switch (type) {
+    case 3:
+        if (numValues === 1) {
+            return file.getUint16(entryOffset + 8, !bigEnd);
+        }
+    }
+}
+
+function getStringFromBuffer(buffer, start, length) {
+    let outstr = "";
+    for (let n = start; n < start + length; n++) {
+        outstr += String.fromCharCode(buffer.getUint8(n));
+    }
+    return outstr;
+}

src/input/frame_grabber.js

@@ -0,0 +1,122 @@
+import {
+    imageRef,
+    grayAndHalfSampleFromCanvasData,
+    computeGray
+} from '../common/cv_utils';
+
+const TO_RADIANS = Math.PI / 180;
+
+function adjustCanvasSize(canvas, targetSize) {
+    if (canvas.width !== targetSize.x) {
+        if (ENV.development) {
+            console.log("WARNING: canvas-size needs to be adjusted");
+        }
+        canvas.width = targetSize.x;
+    }
+    if (canvas.height !== targetSize.y) {
+        if (ENV.development) {
+            console.log("WARNING: canvas-size needs to be adjusted");
+        }
+        canvas.height = targetSize.y;
+    }
+}
+
+var FrameGrabber = {};
+
+FrameGrabber.create = function(inputStream, canvas) {
+    var _that = {},
+        _streamConfig = inputStream.getConfig(),
+        _video_size = imageRef(inputStream.getRealWidth(), inputStream.getRealHeight()),
+        _canvasSize = inputStream.getCanvasSize(),
+        _size = imageRef(inputStream.getWidth(), inputStream.getHeight()),
+        topRight = inputStream.getTopRight(),
+        _sx = topRight.x,
+        _sy = topRight.y,
+        _canvas,
+        _ctx = null,
+        _data = null;
+
+    _canvas = canvas ? canvas : document.createElement("canvas");
+    _canvas.width = _canvasSize.x;
+    _canvas.height = _canvasSize.y;
+    _ctx = _canvas.getContext("2d");
+    _data = new Uint8Array(_size.x * _size.y);
+    if (ENV.development) {
+        console.log("FrameGrabber", JSON.stringify({
+            size: _size,
+            topRight: topRight,
+            videoSize: _video_size,
+            canvasSize: _canvasSize
+        }));
+    }
+
+    /**
+     * Uses the given array as frame-buffer
+     */
+    _that.attachData = function(data) {
+        _data = data;
+    };
+
+    /**
+     * Returns the used frame-buffer
+     */
+    _that.getData = function() {
+        return _data;
+    };
+
+    /**
+     * Fetches a frame from the input-stream and puts into the frame-buffer.
+     * The image-data is converted to gray-scale and then half-sampled if configured.
+     */
+    _that.grab = function() {
+        var doHalfSample = _streamConfig.halfSample,
+            frame = inputStream.getFrame(),
+            drawable = frame,
+            drawAngle = 0,
+            ctxData;
+        if (drawable) {
+            adjustCanvasSize(_canvas, _canvasSize);
+            if (_streamConfig.type === 'ImageStream') {
+                drawable = frame.img;
+                if (frame.tags && frame.tags.orientation) {
+                    switch (frame.tags.orientation) {
+                    case 6:
+                        drawAngle = 90 * TO_RADIANS;
+                        break;
+                    case 8:
+                        drawAngle = -90 * TO_RADIANS;
+                        break;
+                    }
+                }
+            }
+
+            if (drawAngle !== 0) {
+                _ctx.translate(_canvasSize.x / 2, _canvasSize.y / 2);
+                _ctx.rotate(drawAngle);
+                _ctx.drawImage(drawable, -_canvasSize.y / 2, -_canvasSize.x / 2, _canvasSize.y, _canvasSize.x);
+                _ctx.rotate(-drawAngle);
+                _ctx.translate(-_canvasSize.x / 2, -_canvasSize.y / 2);
+            } else {
+                _ctx.drawImage(drawable, 0, 0, _canvasSize.x, _canvasSize.y);
+            }
+
+            ctxData = _ctx.getImageData(_sx, _sy, _size.x, _size.y).data;
+            if (doHalfSample){
+                grayAndHalfSampleFromCanvasData(ctxData, _size, _data);
+            } else {
+                computeGray(ctxData, _data, _streamConfig);
+            }
+            return true;
+        } else {
+            return false;
+        }
+    };
+
+    _that.getSize = function() {
+        return _size;
+    };
+
+    return _that;
+};
+
+export default FrameGrabber;

src/input/image_loader.js

@@ -0,0 +1,71 @@
+import {findTagsInObjectURL} from './exif_helper';
+
+var ImageLoader = {};
+ImageLoader.load = function(directory, callback, offset, size, sequence) {
+    var htmlImagesSrcArray = new Array(size),
+        htmlImagesArray = new Array(htmlImagesSrcArray.length),
+        i,
+        img,
+        num;
+
+    if (sequence === false) {
+        htmlImagesSrcArray[0] = directory;
+    } else {
+        for ( i = 0; i < htmlImagesSrcArray.length; i++) {
+            num = (offset + i);
+            htmlImagesSrcArray[i] = directory + "image-" + ("00" + num).slice(-3) + ".jpg";
+        }
+    }
+    htmlImagesArray.notLoaded = [];
+    htmlImagesArray.addImage = function(image) {
+        htmlImagesArray.notLoaded.push(image);
+    };
+    htmlImagesArray.loaded = function(loadedImg) {
+        var notloadedImgs = htmlImagesArray.notLoaded;
+        for (var x = 0; x < notloadedImgs.length; x++) {
+            if (notloadedImgs[x] === loadedImg) {
+                notloadedImgs.splice(x, 1);
+                for (var y = 0; y < htmlImagesSrcArray.length; y++) {
+                    var imgName = htmlImagesSrcArray[y].substr(htmlImagesSrcArray[y].lastIndexOf("/"));
+                    if (loadedImg.src.lastIndexOf(imgName) !== -1) {
+                        htmlImagesArray[y] = {img: loadedImg};
+                        break;
+                    }
+                }
+                break;
+            }
+        }
+        if (notloadedImgs.length === 0) {
+            if (ENV.development) {
+                console.log("Images loaded");
+            }
+            if (sequence === false) {
+                findTagsInObjectURL(directory, ['orientation'])
+                    .then(tags => {
+                        htmlImagesArray[0].tags = tags;
+                        callback(htmlImagesArray);
+                    }).catch(e => {
+                        console.log(e);
+                        callback(htmlImagesArray);
+                    });
+            } else {
+                callback(htmlImagesArray);
+            }
+        }
+    };
+
+    for ( i = 0; i < htmlImagesSrcArray.length; i++) {
+        img = new Image();
+        htmlImagesArray.addImage(img);
+        addOnloadHandler(img, htmlImagesArray);
+        img.src = htmlImagesSrcArray[i];
+    }
+};
+
+function addOnloadHandler(img, htmlImagesArray) {
+    img.onload = function() {
+        htmlImagesArray.loaded(this);
+    };
+}
+
+export default (ImageLoader);

src/input/input_stream.js

@@ -0,0 +1,330 @@
+import ImageLoader from './image_loader';
+
+var InputStream = {};
+InputStream.createVideoStream = function(video) {
+    var that = {},
+        _config = null,
+        _eventNames = ['canrecord', 'ended'],
+        _eventHandlers = {},
+        _calculatedWidth,
+        _calculatedHeight,
+        _topRight = {x: 0, y: 0},
+        _canvasSize = {x: 0, y: 0};
+
+    function initSize() {
+        var width = video.videoWidth,
+            height = video.videoHeight;
+
+        _calculatedWidth =
+            _config.size ? width / height > 1 ? _config.size : Math.floor((width / height) * _config.size) : width;
+        _calculatedHeight =
+            _config.size ? width / height > 1 ? Math.floor((height / width) * _config.size) : _config.size : height;
+
+        _canvasSize.x = _calculatedWidth;
+        _canvasSize.y = _calculatedHeight;
+    }
+
+    that.getRealWidth = function() {
+        return video.videoWidth;
+    };
+
+    that.getRealHeight = function() {
+        return video.videoHeight;
+    };
+
+    that.getWidth = function() {
+        return _calculatedWidth;
+    };
+
+    that.getHeight = function() {
+        return _calculatedHeight;
+    };
+
+    that.setWidth = function(width) {
+        _calculatedWidth = width;
+    };
+
+    that.setHeight = function(height) {
+        _calculatedHeight = height;
+    };
+
+    that.setInputStream = function(config) {
+        _config = config;
+        video.src = (typeof config.src !== 'undefined') ? config.src : '';
+    };
+
+    that.ended = function() {
+        return video.ended;
+    };
+
+    that.getConfig = function() {
+        return _config;
+    };
+
+    that.setAttribute = function(name, value) {
+        video.setAttribute(name, value);
+    };
+
+    that.pause = function() {
+        video.pause();
+    };
+
+    that.play = function() {
+        video.play();
+    };
+
+    that.setCurrentTime = function(time) {
+        if (_config.type !== "LiveStream") {
+            video.currentTime = time;
+        }
+    };
+
+    that.addEventListener = function(event, f, bool) {
+        if (_eventNames.indexOf(event) !== -1) {
+            if (!_eventHandlers[event]) {
+                _eventHandlers[event] = [];
+            }
+            _eventHandlers[event].push(f);
+        } else {
+            video.addEventListener(event, f, bool);
+        }
+    };
+
+    that.clearEventHandlers = function() {
+        _eventNames.forEach(function(eventName) {
+            var handlers = _eventHandlers[eventName];
+            if (handlers && handlers.length > 0) {
+                handlers.forEach(function(handler) {
+                    video.removeEventListener(eventName, handler);
+                });
+            }
+        });
+    };
+
+    that.trigger = function(eventName, args) {
+        var j,
+            handlers = _eventHandlers[eventName];
+
+        if (eventName === 'canrecord') {
+            initSize();
+        }
+        if (handlers && handlers.length > 0) {
+            for ( j = 0; j < handlers.length; j++) {
+                handlers[j].apply(that, args);
+            }
+        }
+    };
+
+    that.setTopRight = function(topRight) {
+        _topRight.x = topRight.x;
+        _topRight.y = topRight.y;
+    };
+
+    that.getTopRight = function() {
+        return _topRight;
+    };
+
+    that.setCanvasSize = function(size) {
+        _canvasSize.x = size.x;
+        _canvasSize.y = size.y;
+    };
+
+    that.getCanvasSize = function() {
+        return _canvasSize;
+    };
+
+    that.getFrame = function() {
+        return video;
+    };
+
+    return that;
+};
+
+InputStream.createLiveStream = function(video) {
+    video.setAttribute("autoplay", true);
+    var that = InputStream.createVideoStream(video);
+
+    that.ended = function() {
+        return false;
+    };
+
+    return that;
+};
+
+InputStream.createImageStream = function() {
+    var that = {};
+    var _config = null;
+
+    var width = 0,
+        height = 0,
+        frameIdx = 0,
+        paused = true,
+        loaded = false,
+        imgArray = null,
+        size = 0,
+        offset = 1,
+        baseUrl = null,
+        ended = false,
+        calculatedWidth,
+        calculatedHeight,
+        _eventNames = ['canrecord', 'ended'],
+        _eventHandlers = {},
+        _topRight = {x: 0, y: 0},
+        _canvasSize = {x: 0, y: 0};
+
+    function loadImages() {
+        loaded = false;
+        ImageLoader.load(baseUrl, function(imgs) {
+            imgArray = imgs;
+            if (imgs[0].tags && imgs[0].tags.orientation) {
+                switch (imgs[0].tags.orientation) {
+                case 6:
+                case 8:
+                    width = imgs[0].img.height;
+                    height = imgs[0].img.width;
+                    break;
+                default:
+                    width = imgs[0].img.width;
+                    height = imgs[0].img.height;
+                }
+            } else {
+                width = imgs[0].img.width;
+                height = imgs[0].img.height;
+            }
+            calculatedWidth =
+                _config.size ? width / height > 1 ? _config.size : Math.floor((width / height) * _config.size) : width;
+            calculatedHeight =
+                _config.size ? width / height > 1 ? Math.floor((height / width) * _config.size) : _config.size : height;
+            _canvasSize.x = calculatedWidth;
+            _canvasSize.y = calculatedHeight;
+            loaded = true;
+            frameIdx = 0;
+            setTimeout(function() {
+                publishEvent("canrecord", []);
+            }, 0);
+        }, offset, size, _config.sequence);
+    }
+
+    function publishEvent(eventName, args) {
+        var j,
+            handlers = _eventHandlers[eventName];
+
+        if (handlers && handlers.length > 0) {
+            for ( j = 0; j < handlers.length; j++) {
+                handlers[j].apply(that, args);
+            }
+        }
+    }
+
+
+    that.trigger = publishEvent;
+
+    that.getWidth = function() {
+        return calculatedWidth;
+    };
+
+    that.getHeight = function() {
+        return calculatedHeight;
+    };
+
+    that.setWidth = function(newWidth) {
+        calculatedWidth = newWidth;
+    };
+
+    that.setHeight = function(newHeight) {
+        calculatedHeight = newHeight;
+    };
+
+    that.getRealWidth = function() {
+        return width;
+    };
+
+    that.getRealHeight = function() {
+        return height;
+    };
+
+    that.setInputStream = function(stream) {
+        _config = stream;
+        if (stream.sequence === false) {
+            baseUrl = stream.src;
+            size = 1;
+        } else {
+            baseUrl = stream.src;
+            size = stream.length;
+        }
+        loadImages();
+    };
+
+    that.ended = function() {
+        return ended;
+    };
+
+    that.setAttribute = function() {};
+
+    that.getConfig = function() {
+        return _config;
+    };
+
+    that.pause = function() {
+        paused = true;
+    };
+
+    that.play = function() {
+        paused = false;
+    };
+
+    that.setCurrentTime = function(time) {
+        frameIdx = time;
+    };
+
+    that.addEventListener = function(event, f) {
+        if (_eventNames.indexOf(event) !== -1) {
+            if (!_eventHandlers[event]) {
+                _eventHandlers[event] = [];
+            }
+            _eventHandlers[event].push(f);
+        }
+    };
+
+    that.setTopRight = function(topRight) {
+        _topRight.x = topRight.x;
+        _topRight.y = topRight.y;
+    };
+
+    that.getTopRight = function() {
+        return _topRight;
+    };
+
+    that.setCanvasSize = function(canvasSize) {
+        _canvasSize.x = canvasSize.x;
+        _canvasSize.y = canvasSize.y;
+    };
+
+    that.getCanvasSize = function() {
+        return _canvasSize;
+    };
+
+    that.getFrame = function() {
+        var frame;
+
+        if (!loaded){
+            return null;
+        }
+        if (!paused) {
+            frame = imgArray[frameIdx];
+            if (frameIdx < (size - 1)) {
+                frameIdx++;
+            } else {
+                setTimeout(function() {
+                    ended = true;
+                    publishEvent("ended", []);
+                }, 0);
+            }
+        }
+        return frame;
+    };
+
+    return that;
+};
+
+export default InputStream;

src/input_stream.js

@@ -1,317 +0,0 @@
-/* jshint undef: true, unused: true, browser:true, devel: true */
-/* global define */
-
-define(["image_loader"], function(ImageLoader) {
-    "use strict";
-
-    var InputStream = {};
-    InputStream.createVideoStream = function(video) {
-        var that = {},
-            _config = null,
-            _eventNames = ['canrecord', 'ended'],
-            _eventHandlers = {},
-            _calculatedWidth,
-            _calculatedHeight,
-            _topRight = {x: 0, y: 0},
-            _canvasSize = {x: 0, y: 0};
-
-        function initSize() {
-            var width = video.videoWidth,
-                height = video.videoHeight;
-
-            _calculatedWidth = _config.size ? width/height > 1 ? _config.size : Math.floor((width/height) * _config.size) : width;
-            _calculatedHeight = _config.size ? width/height > 1 ? Math.floor((height/width) * _config.size) : _config.size : height;
-
-            _canvasSize.x = _calculatedWidth;
-            _canvasSize.y = _calculatedHeight;
-        }
-
-        that.getRealWidth = function() {
-            return video.videoWidth;
-        };
-
-        that.getRealHeight = function() {
-            return video.videoHeight;
-        };
-
-        that.getWidth = function() {
-            return _calculatedWidth;
-        };
-
-        that.getHeight = function() {
-            return _calculatedHeight;
-        };
-
-        that.setWidth = function(width) {
-            _calculatedWidth = width;
-        };
-
-        that.setHeight = function(height) {
-            _calculatedHeight = height;
-        };
-
-        that.setInputStream = function(config) {
-            _config = config;
-            video.src = (typeof config.src !== 'undefined') ? config.src : '';
-        };
-
-        that.ended = function() {
-            return video.ended;
-        };
-
-        that.getConfig = function() {
-            return _config;
-        };
-
-        that.setAttribute = function(name, value) {
-            video.setAttribute(name, value);
-        };
-
-        that.pause = function() {
-            video.pause();
-        };
-
-        that.play = function() {
-            video.play();
-        };
-
-        that.setCurrentTime = function(time) {
-            if (_config.type !== "LiveStream")
-                video.currentTime = time;
-        };
-
-        that.addEventListener = function(event, f, bool) {
-            if (_eventNames.indexOf(event) !== -1) {
-                if (!_eventHandlers[event]) {
-                    _eventHandlers[event] = [];
-                }
-                _eventHandlers[event].push(f);
-            } else {
-                video.addEventListener(event, f, bool);
-            }
-        };
-
-        that.clearEventHandlers = function() {
-            _eventNames.forEach(function(eventName) {
-                var handlers = _eventHandlers[eventName];
-                if (handlers && handlers.length > 0) {
-                    handlers.forEach(function(handler) {
-                        video.removeEventListener(eventName, handler);
-                    });
-                }
-            });
-        };
-
-        that.trigger = function(eventName, args) {
-            var j,
-                handlers = _eventHandlers[eventName];
-
-            if (eventName === 'canrecord') {
-                initSize();
-            }
-            if (handlers && handlers.length > 0) {
-                for ( j = 0; j < handlers.length; j++) {
-                    handlers[j].apply(that, args);
-                }
-            }
-        };
-
-        that.setTopRight = function(topRight) {
-            _topRight.x = topRight.x;
-            _topRight.y = topRight.y;
-        };
-
-        that.getTopRight = function() {
-            return _topRight;
-        };
-
-        that.setCanvasSize = function(size) {
-            _canvasSize.x = size.x;
-            _canvasSize.y = size.y;
-        };
-
-        that.getCanvasSize = function() {
-            return _canvasSize;
-        };
-
-        that.getFrame = function() {
-            return video;
-        };
-
-        return that;
-    };
-
-    InputStream.createLiveStream = function(video) {
-        video.setAttribute("autoplay", true);
-        var that = InputStream.createVideoStream(video);
-
-        that.ended = function() {
-            return false;
-        };
-
-        return that;
-    };
-
-    InputStream.createImageStream = function() {
-        var that = {};
-        var _config = null;
-
-        var width = 0,
-            height = 0,
-            frameIdx = 0,
-            paused = true,
-            loaded = false,
-            imgArray = null,
-            size = 0,
-            offset = 1,
-            baseUrl = null,
-            ended = false,
-            calculatedWidth,
-            calculatedHeight,
-            _eventNames = ['canrecord', 'ended'],
-            _eventHandlers = {},
-            _topRight = {x: 0, y: 0},
-            _canvasSize = {x: 0, y: 0};
-
-        function loadImages() {
-            loaded = false;
-            ImageLoader.load(baseUrl, function(imgs) {
-                imgArray = imgs;
-                width = imgs[0].width;
-                height = imgs[0].height;
-                calculatedWidth = _config.size ? width/height > 1 ? _config.size : Math.floor((width/height) * _config.size) : width;
-                calculatedHeight = _config.size ? width/height > 1 ? Math.floor((height/width) * _config.size) : _config.size : height;
-                _canvasSize.x = calculatedWidth;
-                _canvasSize.y = calculatedHeight;
-                loaded = true;
-                frameIdx = 0;
-                setTimeout(function() {
-                    publishEvent("canrecord", []);
-                }, 0);
-            }, offset, size, _config.sequence);
-        }
-
-        function publishEvent(eventName, args) {
-            var j,
-                handlers = _eventHandlers[eventName];
-                
-            if (handlers && handlers.length > 0) {
-                for ( j = 0; j < handlers.length; j++) {
-                    handlers[j].apply(that, args);
-                }
-            }
-        }
-
-
-        that.trigger = publishEvent;
-
-        that.getWidth = function() {
-            return calculatedWidth;
-        };
-
-        that.getHeight = function() {
-            return calculatedHeight;
-        };
-
-        that.setWidth = function(width) {
-            calculatedWidth = width;
-        };
-
-        that.setHeight = function(height) {
-            calculatedHeight = height;
-        };
-
-        that.getRealWidth = function() {
-            return width;
-        };
-
-        that.getRealHeight = function() {
-            return height;
-        };
-
-        that.setInputStream = function(stream) {
-            _config = stream;
-            if (stream.sequence === false) {
-                baseUrl = stream.src;
-                size = 1;
-            } else {
-                baseUrl = stream.src;
-                size = stream.length;
-            }
-            loadImages();
-        };
-
-        that.ended = function() {
-            return ended;
-        };
-
-        that.setAttribute = function() {};
-
-        that.getConfig = function() {
-            return _config;
-        };
-
-        that.pause = function() {
-            paused = true;
-        };
-
-        that.play = function() {
-            paused = false;
-        };
-
-        that.setCurrentTime = function(time) {
-            frameIdx = time;
-        };
-
-        that.addEventListener = function(event, f) {
-            if (_eventNames.indexOf(event) !== -1) {
-                if (!_eventHandlers[event]) {
-                    _eventHandlers[event] = [];
-                }
-                _eventHandlers[event].push(f);
-            }
-        };
-
-        that.setTopRight = function(topRight) {
-            _topRight.x = topRight.x;
-            _topRight.y = topRight.y;
-        };
-
-        that.getTopRight = function() {
-            return _topRight;
-        };
-
-        that.setCanvasSize = function(size) {
-            _canvasSize.x = size.x;
-            _canvasSize.y = size.y;
-        };
-
-        that.getCanvasSize = function() {
-            return _canvasSize;
-        };
-
-        that.getFrame = function() {
-            var frame;
-            
-            if (!loaded){
-                return null;
-            }
-            if (!paused) {
-                frame = imgArray[frameIdx];
-                if (frameIdx < (size - 1)) {
-                    frameIdx++;
-                } else {
-                    setTimeout(function() {
-                        ended = true;
-                        publishEvent("ended", []);
-                    }, 0);
-                }
-            }
-            return frame;
-        };
-
-        return that;
-    };
-
-    return (InputStream);
-});

src/locator/barcode_locator.js

@@ -0,0 +1,607 @@
+import ImageWrapper from '../common/image_wrapper';
+import {
+    calculatePatchSize,
+    otsuThreshold,
+    hsv2rgb,
+    cluster,
+    topGeneric,
+    imageRef,
+    halfSample,
+    computeImageArea
+} from '../common/cv_utils';
+import ArrayHelper from '../common/array_helper';
+import ImageDebug from '../common/image_debug';
+import Rasterizer from './rasterizer';
+import Tracer from './tracer';
+import skeletonizer from './skeletonizer';
+const vec2 = {
+    clone: require('gl-vec2/clone'),
+    dot:  require('gl-vec2/dot'),
+    scale: require('gl-vec2/scale'),
+    transformMat2: require('gl-vec2/transformMat2')
+};
+const mat2 = {
+    copy: require('gl-mat2/copy'),
+    create: require('gl-mat2/create'),
+    invert: require('gl-mat2/invert')
+}
+
+var _config,
+    _currentImageWrapper,
+    _skelImageWrapper,
+    _subImageWrapper,
+    _labelImageWrapper,
+    _patchGrid,
+    _patchLabelGrid,
+    _imageToPatchGrid,
+    _binaryImageWrapper,
+    _patchSize,
+    _canvasContainer = {
+        ctx: {
+            binary: null
+        },
+        dom: {
+            binary: null
+        }
+    },
+    _numPatches = {x: 0, y: 0},
+    _inputImageWrapper,
+    _skeletonizer;
+
+function initBuffers() {
+    var skeletonImageData;
+
+    if (_config.halfSample) {
+        _currentImageWrapper = new ImageWrapper({
+            x: _inputImageWrapper.size.x / 2 | 0,
+            y: _inputImageWrapper.size.y / 2 | 0
+        });
+    } else {
+        _currentImageWrapper = _inputImageWrapper;
+    }
+
+    _patchSize = calculatePatchSize(_config.patchSize, _currentImageWrapper.size);
+
+    _numPatches.x = _currentImageWrapper.size.x / _patchSize.x | 0;
+    _numPatches.y = _currentImageWrapper.size.y / _patchSize.y | 0;
+
+    _binaryImageWrapper = new ImageWrapper(_currentImageWrapper.size, undefined, Uint8Array, false);
+
+    _labelImageWrapper = new ImageWrapper(_patchSize, undefined, Array, true);
+
+    skeletonImageData = new ArrayBuffer(64 * 1024);
+    _subImageWrapper = new ImageWrapper(_patchSize,
+        new Uint8Array(skeletonImageData, 0, _patchSize.x * _patchSize.y));
+    _skelImageWrapper = new ImageWrapper(_patchSize,
+        new Uint8Array(skeletonImageData, _patchSize.x * _patchSize.y * 3, _patchSize.x * _patchSize.y),
+        undefined, true);
+    _skeletonizer = skeletonizer((typeof window !== 'undefined') ? window : (typeof self !== 'undefined') ? self : global, {
+        size: _patchSize.x
+    }, skeletonImageData);
+
+    _imageToPatchGrid = new ImageWrapper({
+        x: (_currentImageWrapper.size.x / _subImageWrapper.size.x) | 0,
+        y: (_currentImageWrapper.size.y / _subImageWrapper.size.y) | 0
+    }, undefined, Array, true);
+    _patchGrid = new ImageWrapper(_imageToPatchGrid.size, undefined, undefined, true);
+    _patchLabelGrid = new ImageWrapper(_imageToPatchGrid.size, undefined, Int32Array, true);
+}
+
+function initCanvas() {
+    if (_config.useWorker || typeof document === 'undefined') {
+        return;
+    }
+    _canvasContainer.dom.binary = document.createElement("canvas");
+    _canvasContainer.dom.binary.className = "binaryBuffer";
+    if (ENV.development && _config.debug.showCanvas === true) {
+        document.querySelector("#debug").appendChild(_canvasContainer.dom.binary);
+    }
+    _canvasContainer.ctx.binary = _canvasContainer.dom.binary.getContext("2d");
+    _canvasContainer.dom.binary.width = _binaryImageWrapper.size.x;
+    _canvasContainer.dom.binary.height = _binaryImageWrapper.size.y;
+}
+
+/**
+ * Creates a bounding box which encloses all the given patches
+ * @returns {Array} The minimal bounding box
+ */
+function boxFromPatches(patches) {
+    var overAvg,
+        i,
+        j,
+        patch,
+        transMat,
+        minx =
+        _binaryImageWrapper.size.x,
+        miny = _binaryImageWrapper.size.y,
+        maxx = -_binaryImageWrapper.size.x,
+        maxy = -_binaryImageWrapper.size.y,
+        box,
+        scale;
+
+    // draw all patches which are to be taken into consideration
+    overAvg = 0;
+    for ( i = 0; i < patches.length; i++) {
+        patch = patches[i];
+        overAvg += patch.rad;
+        if (ENV.development && _config.debug.showPatches) {
+            ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary, {color: "red"});
+        }
+    }
+
+    overAvg /= patches.length;
+    overAvg = (overAvg * 180 / Math.PI + 90) % 180 - 90;
+    if (overAvg < 0) {
+        overAvg += 180;
+    }
+
+    overAvg = (180 - overAvg) * Math.PI / 180;
+    transMat = mat2.copy(mat2.create(), [Math.cos(overAvg), Math.sin(overAvg), -Math.sin(overAvg), Math.cos(overAvg)]);
+
+    // iterate over patches and rotate by angle
+    for ( i = 0; i < patches.length; i++) {
+        patch = patches[i];
+        for ( j = 0; j < 4; j++) {
+            vec2.transformMat2(patch.box[j], patch.box[j], transMat);
+        }
+
+        if (ENV.development && _config.debug.boxFromPatches.showTransformed) {
+            ImageDebug.drawPath(patch.box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#99ff00', lineWidth: 2});
+        }
+    }
+
+    // find bounding box
+    for ( i = 0; i < patches.length; i++) {
+        patch = patches[i];
+        for ( j = 0; j < 4; j++) {
+            if (patch.box[j][0] < minx) {
+                minx = patch.box[j][0];
+            }
+            if (patch.box[j][0] > maxx) {
+                maxx = patch.box[j][0];
+            }
+            if (patch.box[j][1] < miny) {
+                miny = patch.box[j][1];
+            }
+            if (patch.box[j][1] > maxy) {
+                maxy = patch.box[j][1];
+            }
+        }
+    }
+
+    box = [[minx, miny], [maxx, miny], [maxx, maxy], [minx, maxy]];
+
+    if (ENV.development && _config.debug.boxFromPatches.showTransformedBox) {
+        ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
+    }
+
+    scale = _config.halfSample ? 2 : 1;
+    // reverse rotation;
+    transMat = mat2.invert(transMat, transMat);
+    for ( j = 0; j < 4; j++) {
+        vec2.transformMat2(box[j], box[j], transMat);
+    }
+
+    if (ENV.development && _config.debug.boxFromPatches.showBB) {
+        ImageDebug.drawPath(box, {x: 0, y: 1}, _canvasContainer.ctx.binary, {color: '#ff0000', lineWidth: 2});
+    }
+
+    for ( j = 0; j < 4; j++) {
+        vec2.scale(box[j], box[j], scale);
+    }
+
+    return box;
+}
+
+/**
+ * Creates a binary image of the current image
+ */
+function binarizeImage() {
+    otsuThreshold(_currentImageWrapper, _binaryImageWrapper);
+    _binaryImageWrapper.zeroBorder();
+    if (ENV.development && _config.debug.showCanvas) {
+        _binaryImageWrapper.show(_canvasContainer.dom.binary, 255);
+    }
+}
+
+/**
+ * Iterate over the entire image
+ * extract patches
+ */
+function findPatches() {
+    var i,
+        j,
+        x,
+        y,
+        moments,
+        patchesFound = [],
+        rasterizer,
+        rasterResult,
+        patch;
+    for (i = 0; i < _numPatches.x; i++) {
+        for (j = 0; j < _numPatches.y; j++) {
+            x = _subImageWrapper.size.x * i;
+            y = _subImageWrapper.size.y * j;
+
+            // seperate parts
+            skeletonize(x, y);
+
+            // Rasterize, find individual bars
+            _skelImageWrapper.zeroBorder();
+            ArrayHelper.init(_labelImageWrapper.data, 0);
+            rasterizer = Rasterizer.create(_skelImageWrapper, _labelImageWrapper);
+            rasterResult = rasterizer.rasterize(0);
+
+            if (ENV.development && _config.debug.showLabels) {
+                _labelImageWrapper.overlay(_canvasContainer.dom.binary, Math.floor(360 / rasterResult.count),
+                    {x: x, y: y});
+            }
+
+            // calculate moments from the skeletonized patch
+            moments = _labelImageWrapper.moments(rasterResult.count);
+
+            // extract eligible patches
+            patchesFound = patchesFound.concat(describePatch(moments, [i, j], x, y));
+        }
+    }
+
+    if (ENV.development && _config.debug.showFoundPatches) {
+        for ( i = 0; i < patchesFound.length; i++) {
+            patch = patchesFound[i];
+            ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary,
+                {color: "#99ff00", lineWidth: 2});
+        }
+    }
+
+    return patchesFound;
+}
+
+/**
+ * Finds those connected areas which contain at least 6 patches
+ * and returns them ordered DESC by the number of contained patches
+ * @param {Number} maxLabel
+ */
+function findBiggestConnectedAreas(maxLabel){
+    var i,
+        sum,
+        labelHist = [],
+        topLabels = [];
+
+    for ( i = 0; i < maxLabel; i++) {
+        labelHist.push(0);
+    }
+    sum = _patchLabelGrid.data.length;
+    while (sum--) {
+        if (_patchLabelGrid.data[sum] > 0) {
+            labelHist[_patchLabelGrid.data[sum] - 1]++;
+        }
+    }
+
+    labelHist = labelHist.map(function(val, idx) {
+        return {
+            val: val,
+            label: idx + 1
+        };
+    });
+
+    labelHist.sort(function(a, b) {
+        return b.val - a.val;
+    });
+
+    // extract top areas with at least 6 patches present
+    topLabels = labelHist.filter(function(el) {
+        return el.val >= 5;
+    });
+
+    return topLabels;
+}
+
+/**
+ *
+ */
+function findBoxes(topLabels, maxLabel) {
+    var i,
+        j,
+        sum,
+        patches = [],
+        patch,
+        box,
+        boxes = [],
+        hsv = [0, 1, 1],
+        rgb = [0, 0, 0];
+
+    for ( i = 0; i < topLabels.length; i++) {
+        sum = _patchLabelGrid.data.length;
+        patches.length = 0;
+        while (sum--) {
+            if (_patchLabelGrid.data[sum] === topLabels[i].label) {
+                patch = _imageToPatchGrid.data[sum];
+                patches.push(patch);
+            }
+        }
+        box = boxFromPatches(patches);
+        if (box) {
+            boxes.push(box);
+
+            // draw patch-labels if requested
+            if (ENV.development && _config.debug.showRemainingPatchLabels) {
+                for ( j = 0; j < patches.length; j++) {
+                    patch = patches[j];
+                    hsv[0] = (topLabels[i].label / (maxLabel + 1)) * 360;
+                    hsv2rgb(hsv, rgb);
+                    ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary,
+                        {color: "rgb(" + rgb.join(",") + ")", lineWidth: 2});
+                }
+            }
+        }
+    }
+    return boxes;
+}
+
+/**
+ * Find similar moments (via cluster)
+ * @param {Object} moments
+ */
+function similarMoments(moments) {
+    var clusters = cluster(moments, 0.90);
+    var topCluster = topGeneric(clusters, 1, function(e) {
+        return e.getPoints().length;
+    });
+    var points = [], result = [];
+    if (topCluster.length === 1) {
+        points = topCluster[0].item.getPoints();
+        for (var i = 0; i < points.length; i++) {
+            result.push(points[i].point);
+        }
+    }
+    return result;
+}
+
+function skeletonize(x, y) {
+    _binaryImageWrapper.subImageAsCopy(_subImageWrapper, imageRef(x, y));
+    _skeletonizer.skeletonize();
+
+    // Show skeleton if requested
+    if (ENV.development && _config.debug.showSkeleton) {
+        _skelImageWrapper.overlay(_canvasContainer.dom.binary, 360, imageRef(x, y));
+    }
+}
+
+/**
+ * Extracts and describes those patches which seem to contain a barcode pattern
+ * @param {Array} moments
+ * @param {Object} patchPos,
+ * @param {Number} x
+ * @param {Number} y
+ * @returns {Array} list of patches
+ */
+function describePatch(moments, patchPos, x, y) {
+    var k,
+        avg,
+        eligibleMoments = [],
+        matchingMoments,
+        patch,
+        patchesFound = [],
+        minComponentWeight = Math.ceil(_patchSize.x / 3);
+
+    if (moments.length >= 2) {
+        // only collect moments which's area covers at least minComponentWeight pixels.
+        for ( k = 0; k < moments.length; k++) {
+            if (moments[k].m00 > minComponentWeight) {
+                eligibleMoments.push(moments[k]);
+            }
+        }
+
+        // if at least 2 moments are found which have at least minComponentWeights covered
+        if (eligibleMoments.length >= 2) {
+            matchingMoments = similarMoments(eligibleMoments);
+            avg = 0;
+            // determine the similarity of the moments
+            for ( k = 0; k < matchingMoments.length; k++) {
+                avg += matchingMoments[k].rad;
+            }
+
+            // Only two of the moments are allowed not to fit into the equation
+            // add the patch to the set
+            if (matchingMoments.length > 1
+                    && matchingMoments.length >= (eligibleMoments.length / 4) * 3
+                    && matchingMoments.length > moments.length / 4) {
+                avg /= matchingMoments.length;
+                patch = {
+                    index: patchPos[1] * _numPatches.x + patchPos[0],
+                    pos: {
+                        x: x,
+                        y: y
+                    },
+                    box: [
+                        vec2.clone([x, y]),
+                        vec2.clone([x + _subImageWrapper.size.x, y]),
+                        vec2.clone([x + _subImageWrapper.size.x, y + _subImageWrapper.size.y]),
+                        vec2.clone([x, y + _subImageWrapper.size.y])
+                    ],
+                    moments: matchingMoments,
+                    rad: avg,
+                    vec: vec2.clone([Math.cos(avg), Math.sin(avg)])
+                };
+                patchesFound.push(patch);
+            }
+        }
+    }
+    return patchesFound;
+}
+
+/**
+ * finds patches which are connected and share the same orientation
+ * @param {Object} patchesFound
+ */
+function rasterizeAngularSimilarity(patchesFound) {
+    var label = 0,
+        threshold = 0.95,
+        currIdx = 0,
+        j,
+        patch,
+        hsv = [0, 1, 1],
+        rgb = [0, 0, 0];
+
+    function notYetProcessed() {
+        var i;
+        for ( i = 0; i < _patchLabelGrid.data.length; i++) {
+            if (_patchLabelGrid.data[i] === 0 && _patchGrid.data[i] === 1) {
+                return i;
+            }
+        }
+        return _patchLabelGrid.length;
+    }
+
+    function trace(currentIdx) {
+        var x,
+            y,
+            currentPatch,
+            idx,
+            dir,
+            current = {
+                x: currentIdx % _patchLabelGrid.size.x,
+                y: (currentIdx / _patchLabelGrid.size.x) | 0
+            },
+            similarity;
+
+        if (currentIdx < _patchLabelGrid.data.length) {
+            currentPatch = _imageToPatchGrid.data[currentIdx];
+            // assign label
+            _patchLabelGrid.data[currentIdx] = label;
+            for ( dir = 0; dir < Tracer.searchDirections.length; dir++) {
+                y = current.y + Tracer.searchDirections[dir][0];
+                x = current.x + Tracer.searchDirections[dir][1];
+                idx = y * _patchLabelGrid.size.x + x;
+
+                // continue if patch empty
+                if (_patchGrid.data[idx] === 0) {
+                    _patchLabelGrid.data[idx] = Number.MAX_VALUE;
+                    continue;
+                }
+
+                if (_patchLabelGrid.data[idx] === 0) {
+                    similarity = Math.abs(vec2.dot(_imageToPatchGrid.data[idx].vec, currentPatch.vec));
+                    if (similarity > threshold) {
+                        trace(idx);
+                    }
+                }
+            }
+        }
+    }
+
+    // prepare for finding the right patches
+    ArrayHelper.init(_patchGrid.data, 0);
+    ArrayHelper.init(_patchLabelGrid.data, 0);
+    ArrayHelper.init(_imageToPatchGrid.data, null);
+
+    for ( j = 0; j < patchesFound.length; j++) {
+        patch = patchesFound[j];
+        _imageToPatchGrid.data[patch.index] = patch;
+        _patchGrid.data[patch.index] = 1;
+    }
+
+    // rasterize the patches found to determine area
+    _patchGrid.zeroBorder();
+
+    while (( currIdx = notYetProcessed()) < _patchLabelGrid.data.length) {
+        label++;
+        trace(currIdx);
+    }
+
+    // draw patch-labels if requested
+    if (ENV.development && _config.debug.showPatchLabels) {
+        for ( j = 0; j < _patchLabelGrid.data.length; j++) {
+            if (_patchLabelGrid.data[j] > 0 && _patchLabelGrid.data[j] <= label) {
+                patch = _imageToPatchGrid.data[j];
+                hsv[0] = (_patchLabelGrid.data[j] / (label + 1)) * 360;
+                hsv2rgb(hsv, rgb);
+                ImageDebug.drawRect(patch.pos, _subImageWrapper.size, _canvasContainer.ctx.binary,
+                    {color: "rgb(" + rgb.join(",") + ")", lineWidth: 2});
+            }
+        }
+    }
+
+    return label;
+}
+
+export default {
+    init: function(inputImageWrapper, config) {
+        _config = config;
+        _inputImageWrapper = inputImageWrapper;
+
+        initBuffers();
+        initCanvas();
+    },
+
+    locate: function() {
+        var patchesFound,
+            topLabels,
+            boxes;
+
+        if (_config.halfSample) {
+            halfSample(_inputImageWrapper, _currentImageWrapper);
+        }
+
+        binarizeImage();
+        patchesFound = findPatches();
+        // return unless 5% or more patches are found
+        if (patchesFound.length < _numPatches.x * _numPatches.y * 0.05) {
+            return null;
+        }
+
+        // rasterrize area by comparing angular similarity;
+        var maxLabel = rasterizeAngularSimilarity(patchesFound);
+        if (maxLabel < 1) {
+            return null;
+        }
+
+        // search for area with the most patches (biggest connected area)
+        topLabels = findBiggestConnectedAreas(maxLabel);
+        if (topLabels.length === 0) {
+            return null;
+        }
+
+        boxes = findBoxes(topLabels, maxLabel);
+        return boxes;
+    },
+
+    checkImageConstraints: function(inputStream, config) {
+        var patchSize,
+            width = inputStream.getWidth(),
+            height = inputStream.getHeight(),
+            halfSample = config.halfSample ? 0.5 : 1,
+            size,
+            area;
+
+        // calculate width and height based on area
+        if (inputStream.getConfig().area) {
+            area = computeImageArea(width, height, inputStream.getConfig().area);
+            inputStream.setTopRight({x: area.sx, y: area.sy});
+            inputStream.setCanvasSize({x: width, y: height});
+            width = area.sw;
+            height = area.sh;
+        }
+
+        size = {
+            x: Math.floor(width * halfSample),
+            y: Math.floor(height * halfSample)
+        };
+
+        patchSize = calculatePatchSize(config.patchSize, size);
+        if (ENV.development) {
+            console.log("Patch-Size: " + JSON.stringify(patchSize));
+        }
+
+        inputStream.setWidth(Math.floor(Math.floor(size.x / patchSize.x) * (1 / halfSample) * patchSize.x));
+        inputStream.setHeight(Math.floor(Math.floor(size.y / patchSize.y) * (1 / halfSample) * patchSize.y));
+
+        if ((inputStream.getWidth() % patchSize.x) === 0 && (inputStream.getHeight() % patchSize.y) === 0) {
+            return true;
+        }
+
+        throw new Error("Image dimensions do not comply with the current settings: Width (" +
+            width + " )and height (" + height +
+            ") must a multiple of " + patchSize.x);
+    }
+};

src/locator/rasterizer.js

@@ -0,0 +1,195 @@
+import Tracer from './tracer';
+
+/**
+ * http://www.codeproject.com/Tips/407172/Connected-Component-Labeling-and-Vectorization
+ */
+var Rasterizer = {
+    createContour2D: function() {
+        return {
+            dir: null,
+            index: null,
+            firstVertex: null,
+            insideContours: null,
+            nextpeer: null,
+            prevpeer: null
+        };
+    },
+    CONTOUR_DIR: {
+        CW_DIR: 0,
+        CCW_DIR: 1,
+        UNKNOWN_DIR: 2
+    },
+    DIR: {
+        OUTSIDE_EDGE: -32767,
+        INSIDE_EDGE: -32766
+    },
+    create: function(imageWrapper, labelWrapper) {
+        var imageData = imageWrapper.data,
+            labelData = labelWrapper.data,
+            width = imageWrapper.size.x,
+            height = imageWrapper.size.y,
+            tracer = Tracer.create(imageWrapper, labelWrapper);
+
+        return {
+            rasterize: function(depthlabel) {
+                var color,
+                    bc,
+                    lc,
+                    labelindex,
+                    cx,
+                    cy,
+                    colorMap = [],
+                    vertex,
+                    p,
+                    cc,
+                    sc,
+                    pos,
+                    connectedCount = 0,
+                    i;
+
+                for ( i = 0; i < 400; i++) {
+                    colorMap[i] = 0;
+                }
+
+                colorMap[0] = imageData[0];
+                cc = null;
+                for ( cy = 1; cy < height - 1; cy++) {
+                    labelindex = 0;
+                    bc = colorMap[0];
+                    for ( cx = 1; cx < width - 1; cx++) {
+                        pos = cy * width + cx;
+                        if (labelData[pos] === 0) {
+                            color = imageData[pos];
+                            if (color !== bc) {
+                                if (labelindex === 0) {
+                                    lc = connectedCount + 1;
+                                    colorMap[lc] = color;
+                                    bc = color;
+                                    vertex = tracer.contourTracing(cy, cx, lc, color, Rasterizer.DIR.OUTSIDE_EDGE);
+                                    if (vertex !== null) {
+                                        connectedCount++;
+                                        labelindex = lc;
+                                        p = Rasterizer.createContour2D();
+                                        p.dir = Rasterizer.CONTOUR_DIR.CW_DIR;
+                                        p.index = labelindex;
+                                        p.firstVertex = vertex;
+                                        p.nextpeer = cc;
+                                        p.insideContours = null;
+                                        if (cc !== null) {
+                                            cc.prevpeer = p;
+                                        }
+                                        cc = p;
+                                    }
+                                } else {
+                                    vertex = tracer
+                                        .contourTracing(cy, cx, Rasterizer.DIR.INSIDE_EDGE, color, labelindex);
+                                    if (vertex !== null) {
+                                        p = Rasterizer.createContour2D();
+                                        p.firstVertex = vertex;
+                                        p.insideContours = null;
+                                        if (depthlabel === 0) {
+                                            p.dir = Rasterizer.CONTOUR_DIR.CCW_DIR;
+                                        } else {
+                                            p.dir = Rasterizer.CONTOUR_DIR.CW_DIR;
+                                        }
+                                        p.index = depthlabel;
+                                        sc = cc;
+                                        while ((sc !== null) && sc.index !== labelindex) {
+                                            sc = sc.nextpeer;
+                                        }
+                                        if (sc !== null) {
+                                            p.nextpeer = sc.insideContours;
+                                            if (sc.insideContours !== null) {
+                                                sc.insideContours.prevpeer = p;
+                                            }
+                                            sc.insideContours = p;
+                                        }
+                                    }
+                                }
+                            } else {
+                                labelData[pos] = labelindex;
+                            }
+                        } else if (labelData[pos] === Rasterizer.DIR.OUTSIDE_EDGE
+                                || labelData[pos] === Rasterizer.DIR.INSIDE_EDGE) {
+                            labelindex = 0;
+                            if (labelData[pos] === Rasterizer.DIR.INSIDE_EDGE) {
+                                bc = imageData[pos];
+                            } else {
+                                bc = colorMap[0];
+                            }
+                        } else {
+                            labelindex = labelData[pos];
+                            bc = colorMap[labelindex];
+                        }
+                    }
+                }
+                sc = cc;
+                while (sc !== null) {
+                    sc.index = depthlabel;
+                    sc = sc.nextpeer;
+                }
+                return {
+                    cc: cc,
+                    count: connectedCount
+                };
+            },
+            debug: {
+                drawContour: function(canvas, firstContour) {
+                    var ctx = canvas.getContext("2d"),
+                        pq = firstContour,
+                        iq,
+                        q,
+                        p;
+
+                    ctx.strokeStyle = "red";
+                    ctx.fillStyle = "red";
+                    ctx.lineWidth = 1;
+
+                    if (pq !== null) {
+                        iq = pq.insideContours;
+                    } else {
+                        iq = null;
+                    }
+
+                    while (pq !== null) {
+                        if (iq !== null) {
+                            q = iq;
+                            iq = iq.nextpeer;
+                        } else {
+                            q = pq;
+                            pq = pq.nextpeer;
+                            if (pq !== null) {
+                                iq = pq.insideContours;
+                            } else {
+                                iq = null;
+                            }
+                        }
+
+                        switch (q.dir) {
+                        case Rasterizer.CONTOUR_DIR.CW_DIR:
+                            ctx.strokeStyle = "red";
+                            break;
+                        case Rasterizer.CONTOUR_DIR.CCW_DIR:
+                            ctx.strokeStyle = "blue";
+                            break;
+                        case Rasterizer.CONTOUR_DIR.UNKNOWN_DIR:
+                            ctx.strokeStyle = "green";
+                            break;
+                        }
+
+                        p = q.firstVertex;
+                        ctx.beginPath();
+                        ctx.moveTo(p.x, p.y);
+                        do {
+                            p = p.next;
+                            ctx.lineTo(p.x, p.y);
+                        } while (p !== q.firstVertex);
+                        ctx.stroke();
+                    }
+                }
+            }
+        };
+    }
+};
+
+export default Rasterizer;

src/locator/skeletonizer.js

@@ -0,0 +1,207 @@
+/* @preserve ASM BEGIN */
+/* eslint-disable eqeqeq*/
+function Skeletonizer(stdlib, foreign, buffer) {
+    "use asm";
+
+    var images = new stdlib.Uint8Array(buffer),
+        size = foreign.size | 0,
+        imul = stdlib.Math.imul;
+
+    function erode(inImagePtr, outImagePtr) {
+        inImagePtr = inImagePtr | 0;
+        outImagePtr = outImagePtr | 0;
+
+        var v = 0,
+            u = 0,
+            sum = 0,
+            yStart1 = 0,
+            yStart2 = 0,
+            xStart1 = 0,
+            xStart2 = 0,
+            offset = 0;
+
+        for ( v = 1; (v | 0) < ((size - 1) | 0); v = (v + 1) | 0) {
+            offset = (offset + size) | 0;
+            for ( u = 1; (u | 0) < ((size - 1) | 0); u = (u + 1) | 0) {
+                yStart1 = (offset - size) | 0;
+                yStart2 = (offset + size) | 0;
+                xStart1 = (u - 1) | 0;
+                xStart2 = (u + 1) | 0;
+                sum = ((images[(inImagePtr + yStart1 + xStart1) | 0] | 0)
+                    + (images[(inImagePtr + yStart1 + xStart2) | 0] | 0)
+                    + (images[(inImagePtr + offset + u) | 0] | 0)
+                    + (images[(inImagePtr + yStart2 + xStart1) | 0] | 0)
+                    + (images[(inImagePtr + yStart2 + xStart2) | 0] | 0)) | 0;
+                if ((sum | 0) == (5 | 0)) {
+                    images[(outImagePtr + offset + u) | 0] = 1;
+                } else {
+                    images[(outImagePtr + offset + u) | 0] = 0;
+                }
+            }
+        }
+        return;
+    }
+
+    function subtract(aImagePtr, bImagePtr, outImagePtr) {
+        aImagePtr = aImagePtr | 0;
+        bImagePtr = bImagePtr | 0;
+        outImagePtr = outImagePtr | 0;
+
+        var length = 0;
+
+        length = imul(size, size) | 0;
+
+        while ((length | 0) > 0) {
+            length = (length - 1) | 0;
+            images[(outImagePtr + length) | 0] =
+                ((images[(aImagePtr + length) | 0] | 0) - (images[(bImagePtr + length) | 0] | 0)) | 0;
+        }
+    }
+
+    function bitwiseOr(aImagePtr, bImagePtr, outImagePtr) {
+        aImagePtr = aImagePtr | 0;
+        bImagePtr = bImagePtr | 0;
+        outImagePtr = outImagePtr | 0;
+
+        var length = 0;
+
+        length = imul(size, size) | 0;
+
+        while ((length | 0) > 0) {
+            length = (length - 1) | 0;
+            images[(outImagePtr + length) | 0] =
+                ((images[(aImagePtr + length) | 0] | 0) | (images[(bImagePtr + length) | 0] | 0)) | 0;
+        }
+    }
+
+    function countNonZero(imagePtr) {
+        imagePtr = imagePtr | 0;
+
+        var sum = 0,
+            length = 0;
+
+        length = imul(size, size) | 0;
+
+        while ((length | 0) > 0) {
+            length = (length - 1) | 0;
+            sum = ((sum | 0) + (images[(imagePtr + length) | 0] | 0)) | 0;
+        }
+
+        return (sum | 0);
+    }
+
+    function init(imagePtr, value) {
+        imagePtr = imagePtr | 0;
+        value = value | 0;
+
+        var length = 0;
+
+        length = imul(size, size) | 0;
+
+        while ((length | 0) > 0) {
+            length = (length - 1) | 0;
+            images[(imagePtr + length) | 0] = value;
+        }
+    }
+
+    function dilate(inImagePtr, outImagePtr) {
+        inImagePtr = inImagePtr | 0;
+        outImagePtr = outImagePtr | 0;
+
+        var v = 0,
+            u = 0,
+            sum = 0,
+            yStart1 = 0,
+            yStart2 = 0,
+            xStart1 = 0,
+            xStart2 = 0,
+            offset = 0;
+
+        for ( v = 1; (v | 0) < ((size - 1) | 0); v = (v + 1) | 0) {
+            offset = (offset + size) | 0;
+            for ( u = 1; (u | 0) < ((size - 1) | 0); u = (u + 1) | 0) {
+                yStart1 = (offset - size) | 0;
+                yStart2 = (offset + size) | 0;
+                xStart1 = (u - 1) | 0;
+                xStart2 = (u + 1) | 0;
+                sum = ((images[(inImagePtr + yStart1 + xStart1) | 0] | 0)
+                    + (images[(inImagePtr + yStart1 + xStart2) | 0] | 0)
+                    + (images[(inImagePtr + offset + u) | 0] | 0)
+                    + (images[(inImagePtr + yStart2 + xStart1) | 0] | 0)
+                    + (images[(inImagePtr + yStart2 + xStart2) | 0] | 0)) | 0;
+                if ((sum | 0) > (0 | 0)) {
+                    images[(outImagePtr + offset + u) | 0] = 1;
+                } else {
+                    images[(outImagePtr + offset + u) | 0] = 0;
+                }
+            }
+        }
+        return;
+    }
+
+    function memcpy(srcImagePtr, dstImagePtr) {
+        srcImagePtr = srcImagePtr | 0;
+        dstImagePtr = dstImagePtr | 0;
+
+        var length = 0;
+
+        length = imul(size, size) | 0;
+
+        while ((length | 0) > 0) {
+            length = (length - 1) | 0;
+            images[(dstImagePtr + length) | 0] = (images[(srcImagePtr + length) | 0] | 0);
+        }
+    }
+
+    function zeroBorder(imagePtr) {
+        imagePtr = imagePtr | 0;
+
+        var x = 0,
+            y = 0;
+
+        for ( x = 0; (x | 0) < ((size - 1) | 0); x = (x + 1) | 0) {
+            images[(imagePtr + x) | 0] = 0;
+            images[(imagePtr + y) | 0] = 0;
+            y = ((y + size) - 1) | 0;
+            images[(imagePtr + y) | 0] = 0;
+            y = (y + 1) | 0;
+        }
+        for ( x = 0; (x | 0) < (size | 0); x = (x + 1) | 0) {
+            images[(imagePtr + y) | 0] = 0;
+            y = (y + 1) | 0;
+        }
+    }
+
+    function skeletonize() {
+        var subImagePtr = 0,
+            erodedImagePtr = 0,
+            tempImagePtr = 0,
+            skelImagePtr = 0,
+            sum = 0,
+            done = 0;
+
+        erodedImagePtr = imul(size, size) | 0;
+        tempImagePtr = (erodedImagePtr + erodedImagePtr) | 0;
+        skelImagePtr = (tempImagePtr + erodedImagePtr) | 0;
+
+        // init skel-image
+        init(skelImagePtr, 0);
+        zeroBorder(subImagePtr);
+
+        do {
+            erode(subImagePtr, erodedImagePtr);
+            dilate(erodedImagePtr, tempImagePtr);
+            subtract(subImagePtr, tempImagePtr, tempImagePtr);
+            bitwiseOr(skelImagePtr, tempImagePtr, skelImagePtr);
+            memcpy(erodedImagePtr, subImagePtr);
+            sum = countNonZero(subImagePtr) | 0;
+            done = ((sum | 0) == 0 | 0);
+        } while (!done);
+    }
+    return {
+        skeletonize: skeletonize
+    };
+}
+/* @preserve ASM END */
+export default Skeletonizer;
+/* eslint-enable eqeqeq*/