Merge pull request #89 from davincho/master

Option for specifying an entry point for the video-element.

README.md

@@ -120,11 +120,15 @@ 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"]

package.json

@@ -12,6 +12,7 @@
     "chai": "^3.4.1",
     "core-js": "^1.2.1",
     "grunt": "^0.4.5",
+    "grunt-cli": "0.1.13",
     "grunt-contrib-nodeunit": "^0.4.1",
     "grunt-karma": "^0.12.1",
     "isparta-loader": "^1.0.0",
@@ -21,7 +22,6 @@
     "karma-coverage": "^0.5.2",
     "karma-mocha": "~0.2.0",
     "karma-phantomjs-launcher": "^0.2.1",
-    "karma-sinon-chai": "^1.1.0",
     "karma-sinon": "^1.0.4",
     "karma-sinon-chai": "~0.2.0",
     "karma-source-map-support": "^1.1.0",

src/quagga.js

@@ -47,7 +47,7 @@ function initInputStream(cb) {
     } else if (_config.inputStream.type === "ImageStream") {
         _inputStream = InputStream.createImageStream();
     } else if (_config.inputStream.type === "LiveStream") {
-        var $viewport = document.querySelector("#interactive.viewport");
+        var $viewport = getViewPort();
         if ($viewport) {
             video = $viewport.querySelector("video");
             if (!video) {
@@ -71,9 +71,21 @@ function initInputStream(cb) {
     _inputStream.addEventListener("canrecord", canRecord.bind(undefined, cb));
 }
 
+function getViewPort() {
+    var target = _config.inputStream.target;
+    // Check if target is already a DOM element
+    if(target && target.nodeName && target.nodeType === 1) {
+        return target;
+    } else {
+        // Use '#interactive.viewport' as a fallback selector (backwards compatibility)
+        var selector = typeof target === 'string' ? target : '#interactive.viewport';
+        return document.querySelector(selector);
+    }
+}
+
 function canRecord(cb) {
     BarcodeLocator.checkImageConstraints(_inputStream, _config.locator);
-    initCanvas();
+    initCanvas(_config);
     _framegrabber = FrameGrabber.create(_inputStream, _canvasContainer.dom.image);
 
     if (_config.numOfWorkers > 0) {
@@ -94,7 +106,7 @@ function ready(cb){
 
 function initCanvas() {
     if (typeof document !== "undefined") {
-        var $viewport = document.querySelector("#interactive.viewport");
+        var $viewport = getViewPort();
         _canvasContainer.dom.image = document.querySelector("canvas.imgBuffer");
         if (!_canvasContainer.dom.image) {
             _canvasContainer.dom.image = document.createElement("canvas");