Fixed file-input example

example/file-input/index.html

@@ -39,7 +39,6 @@
             <ul>
                 <li>Use static image as source</li>
                 <li>Configuring EAN-Reader</li>
-                <li>Use custom mount-point (Query-Selector)</li>
             </ul>
         </p>
         <div class="source-code">
@@ -53,21 +52,23 @@ var App = {
     init: function() {
         this.attachListeners();
     },
-    decode: function(src) {
+    decode: function(file) {
-        Quagga
+        Quagga.fromImage({
-            .decoder({readers: ['ean_reader']})
+            constraints: {src: file, width: 800, height: 800},
-            .locator({patchSize: 'medium'})
+            decoder: {readers: ['ean_reader']},
-            .fromImage(src, {size: 800})
+        })
-            .toPromise()
+        .then(function(scanner) {
-            .then(function(result) {
+            return scanner.detect();
-                document.querySelector('input.isbn').value = result.codeResult.code;
+        })
-            })
+        .then(function(result) {
-            .catch(function() {
+            document.querySelector('input.isbn').value = result.codeResult.code;
-                document.querySelector('input.isbn').value = "Not Found";
+        })
-            })
+        .catch(function() {
-            .then(function() {
+            document.querySelector('input.isbn').value = "Not Found";
-                this.attachListeners();
+        })
-            }.bind(this));
+        .then(function() {
+            this.attachListeners();
+        }.bind(this));
     },
     attachListeners: function() {
         var self = this,
@@ -84,7 +85,7 @@ var App = {
             e.preventDefault();
             fileInput.removeEventListener("change", onChange);
             if (e.target.files && e.target.files.length) {
-                self.decode(URL.createObjectURL(e.target.files[0]));
+                self.decode(e.target.files[0]);
             }
         });
     }

example/file-input/index.js

@@ -5,20 +5,23 @@ var App = {
         this.attachListeners();
     },
     decode: function(file) {
-        Quagga
+        Quagga.fromImage({
-            .decoder({readers: ['ean_reader']})
+            constraints: {src: file, width: 800, height: 800},
-            .locator({patchSize: 'medium'})
+            decoder: {readers: ['ean_reader']},
-            .fromSource(file, {size: 800})
+        })
-            .toPromise()
+        .then(function(scanner) {
-            .then(function(result) {
+            return scanner.detect();
-                document.querySelector('input.isbn').value = result.codeResult.code;
+        })
-            })
+        .then(function(result) {
-            .catch(function() {
+            document.querySelector('input.isbn').value = result.codeResult.code;
-                document.querySelector('input.isbn').value = "Not Found";
+        })
-            })
+        .catch(function(e) {
-            .then(function() {
+            console.error(e);
-                this.attachListeners();
+            document.querySelector('input.isbn').value = "Not Found";
-            }.bind(this));
+        })
+        .then(function() {
+            this.attachListeners();
+        }.bind(this));
     },
     attachListeners: function() {
         var self = this,

src/input/PixelCapture.js

@@ -32,7 +32,11 @@ function adjustCanvasSize(input, canvas) {
 
 function getOrCreateCanvas(source, target) {
     const $viewport = getViewport(target);
-    let $canvas = $viewport.querySelector("canvas.imgBuffer");
+    let $canvas = null;
+    if ($viewport) {
+        $canvas = $viewport.querySelector("canvas.imgBuffer");
+    }
+
     if (!$canvas) {
         $canvas = document.createElement("canvas");
         $canvas.className = "imgBuffer";

src/scanner.js

@@ -47,16 +47,20 @@ function createScanner(pixelCapturer) {
     const source = pixelCapturer ? pixelCapturer.getSource() : {};
 
     function updateViewportStyle(target) {
-        const $video = source.getDrawable();
+        const $drawable = source.getDrawable();
         const $viewport = getViewport(target);
 
+        if (!$viewport) {
+            return;
+        }
+
         const {viewport} = source.getDimensions();
         const zoom = Math.floor((((2 * viewport.x) + viewport.width) / viewport.width) * 100) / 100;
         const videoWidth = zoom * viewport.width;
         const translate = ((viewport.x / videoWidth) * (-100)).toFixed(5);
 
-        $video.style.width = `${zoom * 100}%`;
+        $drawable.style.width = `${zoom * 100}%`;
-        $video.style.transform = `translate(${translate}%, ${translate}%)`;
+        $drawable.style.transform = `translate(${translate}%, ${translate}%)`;
         $viewport.style.paddingBottom = `${(viewport.height * 100 / viewport.width).toFixed(5)}%`;
         $viewport.style.overflow = "hidden";
         $viewport.style.height = 0;