Added scan-to-input example

2026-08-13 13:51:37 +08:00 · 2016-05-19 21:53:48 +02:00
parent b44dd76a07
commit 6c3772eda3
13 changed files with 402 additions and 170 deletions
@@ -0,0 +1,85 @@
+<!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/fonts.css" />
+    <link rel="stylesheet" type="text/css" href="../css/styles.css" />
+    <link rel="stylesheet" type="text/css" href="../css/highlight-default.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>Scan barcode to input-field</h3>
+        <p>Click the <strong>button</strong> next to the input-field
+            to start scanning an <strong>EAN-13</strong> barcode</p>
+        <div>
+            <form>
+                <div class="input-field">
+                    <label for="isbn_input">ISBN:</label>
+                    <input id="isbn_input" class="isbn" type="text" />
+                    <button type="button" class="icon-barcode button scan">&nbsp;</button>
+                </div>
+            </form>
+        </div>
+        <p>An overlay will pop-up showing the users's back-facing
+            camera if access is granted.</p>
+        <div className="source-code">
+            <h4>Source</h4>
+            <pre>
+                <code class="javascript">
+
+var scanner = Quagga
+   .decoder({readers: ['ean_reader']})
+   .locator({patchSize: 'medium'})
+   .fromVideo({
+       target: '.overlay__content',
+       constraints: {
+           width: 800,
+           height: 600,
+           facingMode: "environment"
+       }
+   });
+
+document.querySelector('.input-field input + button.scan')
+   .addEventListener("click", function onClick(e) {
+       e.preventDefault();
+       e.target.removeEventListener("click", onClick);
+
+       // Start scanning
+       scanner.addEventListener('detected', function detected(result) {
+           // show result and stop scanner
+          document.querySelector('input.isbn').value = result.codeResult.code;
+          scanner.stop();
+          scanner.removeEventListener('detected', detected);
+       }).start();
+   });
+
+                </code>
+            </pre>
+        </div>
+    </section>
+          <footer>
+        <p>
+          &copy; Copyright by Christoph Oberhofer
+        </p>
+      </footer>
+
+    <script src="../../dist/quagga.js" type="text/javascript"></script>
+    <script src="index.js" type="text/javascript"></script>
+    <script src="../vendor/highlight.pack.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+  </body>
+</html>
@@ -0,0 +1,78 @@
+var Quagga = window.Quagga;
+var App = {
+    _scanner: null,
+    init: function() {
+        this.attachListeners();
+    },
+    activateScanner: function() {
+        var scanner = this.configureScanner('.overlay__content'),
+            onDetected = function (result) {
+                document.querySelector('input.isbn').value = result.codeResult.code;
+                stop();
+            }.bind(this),
+            stop = function() {
+                scanner.stop();  // should also clear all event-listeners?
+                scanner.removeEventListener('detected', onDetected);
+                this.hideOverlay();
+                this.attachListeners();
+            }.bind(this);
+
+        this.showOverlay(stop);
+        scanner.addEventListener('detected', onDetected).start();
+    },
+    attachListeners: function() {
+        var self = this;
+
+        document.querySelector('.input-field input + button.scan')
+            .addEventListener("click", function onClick(e) {
+                e.preventDefault();
+                e.target.removeEventListener("click", onClick);
+                self.activateScanner();
+            });
+    },
+    showOverlay: function(cancelCb) {
+        if (!this._overlay) {
+            var content = document.createElement('div'),
+                closeButton = document.createElement('div');
+
+            closeButton.appendChild(document.createTextNode('X'));
+            content.className = 'overlay__content';
+            closeButton.className = 'overlay__close';
+            this._overlay = document.createElement('div');
+            this._overlay.className = 'overlay';
+            this._overlay.appendChild(content);
+            content.appendChild(closeButton);
+            closeButton.addEventListener('click', function closeClick(e) {
+                e.target.removeEventListener('click', closeClick);
+                cancelCb();
+            });
+            document.body.appendChild(this._overlay);
+        } else {
+            var closeButton = document.querySelector('.overlay__close');
+            closeButton.addEventListener('click', cancelCb);
+        }
+        this._overlay.style.display = "block";
+    },
+    hideOverlay: function() {
+        if (this._overlay) {
+            this._overlay.style.display = "none";
+        }
+    },
+    configureScanner: function(selector) {
+        if (!this._scanner) {
+            this._scanner = Quagga
+                .decoder({readers: ['ean_reader']})
+                .locator({patchSize: 'medium'})
+                .fromVideo({
+                    target: selector,
+                    constraints: {
+                        width: 800,
+                        height: 600,
+                        facingMode: "environment"
+                    }
+                });
+        }
+        return this._scanner;
+    }
+};
+App.init();