proof of concept qr code gen and scan

Author: ariovistus

aurelia_project/aurelia.json

@@ -19,7 +19,7 @@
       }
     ],
     "options": {
-      "minify": "stage & prod",
+      "minify": false,
       "sourcemaps": "dev & stage"
     },
     "bundles": [
@@ -137,6 +137,32 @@
           "name": "urijs",
           "path": "../node_modules/urijs",
           "main": "./src/URI"
+          },
+          "qrcode-generator",
+          {
+              "name": "zxing",
+              "path": "../node_modules/instascan/src",
+              "main": "zxing"
+          },
+          {
+              "name": "visibilityjs",
+              "path": "../node_modules/visibilityjs/lib",
+              "main": "visibility.timers"
+          },
+          {
+              "name": "fs",
+              "path": "../node_modules/uniq/",
+              "main": "uniq"
+          },
+          {
+              "name": "path",
+              "path": "../node_modules/prr/",
+              "main": "prr"
+          },
+          {
+              "name": "crypto",
+              "path": "../node_modules/ms/",
+              "main": "index"
           }
         ]
       }

aurelia_project/tasks/build.ts

@@ -15,6 +15,7 @@ gulp.task('generate-service-worker', function (callback) {
   var baseUrl = project.baseUrl[env] || project.baseUrl['default'] || "/";
 
   swPrecache.write(path.join('sw.js'), {
+    maximumFileSizeToCacheInBytes: 5097152,
     staticFileGlobs: [
       'index.html',
       rootDir + '/**/*.{js,html,css}',

custom_typings/zxing.d.ts

@@ -0,0 +1,2 @@
+declare module 'zxing' {
+}

package.json

@@ -20,12 +20,18 @@
     "bootstrap": "^4.0.0-beta.3",
     "d3v4": "^4.2.2",
     "dexie": "^2.0.1",
+    "instascan": "^1.0.0",
     "javascript-natural-sort": "^0.7.1",
     "lodash": "^4.17.4",
+    "ms": "^2.1.1",
     "numeral": "^2.0.6",
+    "prr": "^1.0.1",
+    "qrcode-generator": "^1.4.1",
     "requirejs": "^2.3.2",
     "text": "github:requirejs/text#latest",
+    "uniq": "^1.0.1",
     "urijs": "^1.19.1",
+    "visibilityjs": "^2.0.2",
     "whatwg-fetch": "^2.0.3"
   },
   "peerDependencies": {},

src/app.html

@@ -17,6 +17,10 @@
             <li class='nav-item'>
               <a class="nav-link" route-href="route: graphtest">Graph Test</a>
             </li>
+
+            <li class='nav-item'>
+              <a class="nav-link" route-href="route: qrtest">QR Code Test</a>
+            </li>
         </ul>
       </div>
     </header>

src/app.ts

@@ -103,6 +103,11 @@ export class App {
         name: "graphtest", moduleId: PLATFORM.moduleName("graphtest"), 
         nav: true, title: "graph test", adminRoute: false,
       },
+      {
+        route: ["qrtest"],
+        name: "qrtest", moduleId: PLATFORM.moduleName("qrcodes/test"), 
+        nav: true, title: "qrcode test", adminRoute: false,
+      },
     ];
 
     config.map(routes);

src/qrcodes/display-dialog.html

@@ -0,0 +1,18 @@
+<template>
+
+  <ux-dialog>
+    <ux-dialog-header>
+        <button class='btn btn-danger btn-sm float-right' click.delegate='controller.cancel()'>
+          X
+        </button>
+    </ux-dialog-header>
+    <ux-dialog-body>
+      <button click.delegate='click()'>zoop</button>
+      <div element.ref="qrCodeElement"></div>
+    </ux-dialog-body>
+    <!--
+    <ux-dialog-footer>
+    </ux-dialog-footer>
+    -->
+  </ux-dialog>
+</template>

src/qrcodes/display-dialog.ts

@@ -0,0 +1,32 @@
+import { autoinject } from "aurelia-framework";
+import { QrCodeDisplayInput } from "./display-input";
+import * as qrcode from "qrcode-generator";
+import { DialogController } from "aurelia-dialog";
+
+@autoinject
+export class QrCodeDisplayDialog {
+    qrCodeElement: Element;
+
+    constructor(public controller: DialogController) {
+
+    }
+
+    activate(model: QrCodeDisplayInput) {
+
+    }
+
+    click() {
+        // I think qrcode-generator is generating Model 2 qr codes? http://www.qrcode.com/en/codes/model12.html
+        var qrType : TypeNumber = 25; 
+        var errorCorrection : ErrorCorrectionLevel = 'M';
+        var mode: Mode = "Byte";
+        var cellSize = 4; // default is 2
+        var margin = 10; // default is cellSize * 4
+        var data = "tacostacos";
+
+        var x = qrcode(qrType, errorCorrection);
+        x.addData(data, mode);
+        x.make();
+        this.qrCodeElement.innerHTML = x.createImgTag(cellSize, margin);
+    }
+}

src/qrcodes/display-input.ts

@@ -0,0 +1,3 @@
+export interface QrCodeDisplayInput {
+    data: string;
+}

src/qrcodes/instascan/camera.ts

@@ -0,0 +1,62 @@
+
+export function cameraName(label) {
+  var clean = label.replace(/\s*\([0-9a-f]+(:[0-9a-f]+)?\)\s*$/, '');
+  return clean || label || null;
+}
+
+export class Camera {
+  id: any;
+  name: string;
+  private _streamPromise: Promise<MediaStream>;
+  private _stream: MediaStream;
+
+  constructor(id, name) {
+    this.id = id;
+    this.name = name;
+    this._stream = null;
+  }
+
+  start(): Promise<MediaStream> {
+    var constraints = {
+      audio: false,
+      video: {
+        mandatory: {
+          sourceId: this.id,
+          minWidth: 600,
+          maxWidth: 800,
+          minAspectRatio: 1.6
+        },
+        optional: []
+      }
+    };
+
+    this._streamPromise = navigator.mediaDevices.getUserMedia(<MediaStreamConstraints>constraints);
+
+    return this._streamPromise.then(stream => {
+      this._stream = stream;
+      return stream;
+    });
+  }
+
+  stop() {
+    if (!this._stream) {
+      return;
+    }
+
+    for (let stream of this._stream.getVideoTracks()) {
+      stream.stop();
+    }
+
+    this._stream = null;
+  }
+
+  static getCameras(): Promise<any> {
+    var devicesPromise = navigator.mediaDevices.enumerateDevices();
+
+    return devicesPromise.then(devices => {
+      return devices
+        .filter(d => d.kind === 'videoinput')
+        .map(d => new Camera(d.deviceId, cameraName(d.label)));
+    });
+  }
+}