mrow

3b8ef228 · Stephen D · 3b8ef228 · 3b8ef228 · 8e6a036b · 3b8ef228
Commit 3b8ef228 authored 2 weeks ago by Stephen D
--- a/app.js
+++ b/app.js
+import jsQR from "./jsQR/";
+
+var video = document.createElement("video");
+var canvasElement = document.getElementById("canvas");
+var canvas = canvasElement.getContext("2d");
+var loadingMessage = document.getElementById("loadingMessage");
+var outputContainer = document.getElementById("output");
+var outputMessage = document.getElementById("outputMessage");
+var outputData = document.getElementById("outputData");
+
+const latencyDiv = document.getElementById("latency");
+const latencyScan = document.getElementById("scan");
+
+function drawLine(begin, end, color) {
+  canvas.beginPath();
+  canvas.moveTo(begin.x, begin.y);
+  canvas.lineTo(end.x, end.y);
+  canvas.lineWidth = 4;
+  canvas.strokeStyle = color;
+  canvas.stroke();
+}
+
+// Use facingMode: environment to attemt to get the front camera on phones
+navigator.mediaDevices
+  .getUserMedia({ video: { facingMode: "environment" } })
+  .then(function (stream) {
+    video.srcObject = stream;
+    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
+    video.play();
+    requestAnimationFrame(tick);
+  });
+
+function tick() {
+  loadingMessage.innerText = "⌛ Loading video...";
+  if (video.readyState === video.HAVE_ENOUGH_DATA) {
+    loadingMessage.hidden = true;
+    canvasElement.hidden = false;
+    outputContainer.hidden = false;
+
+    canvasElement.height = video.videoHeight;
+    canvasElement.width = video.videoWidth;
+    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+    var imageData = canvas.getImageData(
+      0,
+      0,
+      canvasElement.width,
+      canvasElement.height,
+    );
+
+    const start = window.performance.now();
+    var code = jsQR(imageData.data, imageData.width, imageData.height, {
+      inversionAttempts: "dontInvert",
+    });
+    const end = window.performance.now();
+    const delta = end - start;
+
+    latencyDiv.innerText = `Frame latency: ${delta}ms`;
+
+    if (code) {
+      latencyScan.innerText = `Scan latency: ${delta}ms`;
+
+      drawLine(
+        code.location.topLeftCorner,
+        code.location.topRightCorner,
+        "#FF3B58",
+      );
+      drawLine(
+        code.location.topRightCorner,
+        code.location.bottomRightCorner,
+        "#FF3B58",
+      );
+      drawLine(
+        code.location.bottomRightCorner,
+        code.location.bottomLeftCorner,
+        "#FF3B58",
+      );
+      drawLine(
+        code.location.bottomLeftCorner,
+        code.location.topLeftCorner,
+        "#FF3B58",
+      );
+      outputMessage.hidden = true;
+      outputData.parentElement.hidden = false;
+      outputData.innerText = code.data;
+    } else {
+      outputMessage.hidden = false;
+      outputData.parentElement.hidden = true;
+    }
+  }
+  requestAnimationFrame(tick);
+}
--- a/index.html
+++ b/index.html
+<html>
+  <body>
+    <h1>jsQR Demo</h1>
+    <a id="githubLink" href="https://github.com/cozmo/jsQR">View documentation on Github</a>
+    <p>Pure JavaScript QR code decoding library.</p>
+    <div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
+    <canvas id="canvas" hidden></canvas>
+    <div id="output" hidden>
+      <div id="outputMessage">No QR code detected.</div>
+      <div hidden><b>Data:</b> <span id="outputData"></span></div>
+      <div id="latency"></div>
+      <div id="scan"></div>
+    </div>
+  </body>
+  <head>
+    <script type="module" src="app.js"></script>
+  </head>
+</html>
--- a/jsQR @ 8e6a036b
+++ b/jsQR @ 8e6a036b
+Subproject commit 8e6a036beafa7053dd44b1b76ac578d22b1b3311
--- a/package.json
+++ b/package.json
+{
+  "name": "QontrolleR",
+  "version": "1.0.0",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel index.html",
+    "build": "parcel build index.html"
+  },
+  "dependencies": {
+    "parcel": "^2.13.3"
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock