build: remove cyclic dependencies

* restrucutre code to get rid of cyclic dependencies * add cyclic dependecy check to tslint * add aztec example Signed-off-by: Ant Kennedy <[email protected]>
jneuhaus20 · Sep 10, 2019 · b63636d · b63636d
1 parent a37e81e
commit b63636d
Show file tree

Hide file tree

Showing 30 changed files with 1,193 additions and 627 deletions.
diff --git a/docs/examples/aztec-camera/index.html b/docs/examples/aztec-camera/index.html
@@ -0,0 +1,116 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="author" content="ZXing for JS">
+
+  <title>ZXing TypeScript | Decoding from camera stream</title>
+
+  <link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic">
+  <link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/[email protected]/normalize.css">
+  <link rel="preload" as="style" onload="this.rel='stylesheet';this.onload=null" href="https://unpkg.com/[email protected]/dist/milligram.min.css">
+</head>
+
+<body>
+
+  <main class="wrapper" style="padding-top:2em">
+
+    <section class="container" id="demo-content">
+      <h1 class="title">Scan QR Code from Video Camera</h1>
+
+      <p>
+        <a class="button-small button-outline" href="../../index.html">HOME 🏡</a>
+      </p>
+
+      <p>This example shows how to scan a QR code with ZXing javascript library from the device video camera. If more
+        than one video input devices are available (for example front and back camera) the example shows how to read
+        them and use a select to change the input device.</p>
+
+      <div>
+        <a class="button" id="startButton">Start</a>
+        <a class="button" id="resetButton">Reset</a>
+      </div>
+
+      <div>
+        <video id="video" width="300" height="200" style="border: 1px solid gray"></video>
+      </div>
+
+      <div id="sourceSelectPanel" style="display:none">
+        <label for="sourceSelect">Change video source:</label>
+        <select id="sourceSelect" style="max-width:400px">
+        </select>
+      </div>
+
+      <label>Result:</label>
+      <blockquote>
+        <p id="result"></p>
+      </blockquote>
+
+      <p>See the <a href="https://github.com/zxing-js/library/tree/master/docs/examples/qr-camera/">source code</a> for
+        this example.</p>
+    </section>
+
+    <footer class="footer">
+      <section class="container">
+        <p>ZXing TypeScript Demo. Licensed under the <a target="_blank"
+            href="https://github.com/zxing-js/library#license" title="MIT">MIT</a>.</p>
+      </section>
+    </footer>
+
+  </main>
+
+  <script type="text/javascript" src="../../../umd/index.min.js"></script>
+  <script type="text/javascript">
+    window.addEventListener('load', function () {
+      let selectedDeviceId;
+      const codeReader = new ZXing.BrowserAztecCodeReader();
+      console.log('ZXing code reader initialized')
+      codeReader.getVideoInputDevices()
+        .then((videoInputDevices) => {
+          const sourceSelect = document.getElementById('sourceSelect')
+          selectedDeviceId = videoInputDevices[0].deviceId
+          if (videoInputDevices.length >= 1) {
+            videoInputDevices.forEach((element) => {
+              const sourceOption = document.createElement('option')
+              sourceOption.text = element.label
+              sourceOption.value = element.deviceId
+              sourceSelect.appendChild(sourceOption)
+            })
+
+            sourceSelect.onchange = () => {
+              selectedDeviceId = sourceSelect.value;
+            };
+
+            const sourceSelectPanel = document.getElementById('sourceSelectPanel')
+            sourceSelectPanel.style.display = 'block'
+          }
+
+          document.getElementById('startButton').addEventListener('click', () => {
+            codeReader.decodeFromInputVideoDevice(selectedDeviceId, 'video').then((result) => {
+              console.log(result)
+              document.getElementById('result').textContent = result.text
+            }).catch((err) => {
+              console.error(err)
+              document.getElementById('result').textContent = err
+            })
+            console.log(`Started continous decode from camera with id ${selectedDeviceId}`)
+          })
+
+          document.getElementById('resetButton').addEventListener('click', () => {
+            codeReader.reset()
+            document.getElementById('result').textContent = '';
+            console.log('Reset.')
+          })
+
+        })
+        .catch((err) => {
+          console.error(err)
+        })
+    })
+  </script>
+
+</body>
+
+</html>
diff --git a/docs/index.html b/docs/index.html
@@ -49,6 +49,9 @@ <h3>Scanning Examples</h3>
                         <li>
                             <a href="examples/qr-camera">Scan QR Code from Video Camera</a>
                         </li>
+                        <li>
+                            <a href="examples/aztec-camera">Scan Aztec Code from Video Camera</a>
+                        </li>
                         <li>
                             <a href="examples/qr-image">Scan QR Code from Image</a>
                         </li>
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,6 +49,9 @@ <h3>Scanning Examples</h3> @@
                             <li>
                                 <a href="examples/qr-camera">Scan QR Code from Video Camera</a>
                             </li>
+                            <li>
+                                <a href="examples/aztec-camera">Scan Aztec Code from Video Camera</a>
+                            </li>
                             <li>
                                 <a href="examples/qr-image">Scan QR Code from Image</a>
                             </li>
@@ Expand Down @@