Added scan-to-input example

2026-08-13 05:31: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>