first test implementation of qr-code-scanner

frontend/package-lock.json

@@ -1669,7 +1669,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -1678,8 +1677,7 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
-          "dev": true
         }
       }
     },
@@ -2660,8 +2658,7 @@
     "core-js": {
       "version": "2.6.5",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.5.tgz",
-      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A==",
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
-      "dev": true
     },
     "core-util-is": {
       "version": "1.0.2",
@@ -5919,6 +5916,11 @@
       "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
       "dev": true
     },
+    "jsqr": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.2.0.tgz",
+      "integrity": "sha512-wKcQS9QC2VHGk7aphWCp1RrFyC0CM6fMgC5prZZ2KV/Lk6OKNoCod9IR6bao+yx3KPY0gZFC5dc+h+KFzCI0Wg=="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -6052,8 +6054,7 @@
     "lodash": {
       "version": "4.17.11",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==",
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
-      "dev": true
     },
     "lodash._reinterpolate": {
       "version": "3.0.0",
@@ -8192,6 +8193,14 @@
         "inherits": "^2.0.1"
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "rtlcss": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.4.0.tgz",
@@ -8289,6 +8298,11 @@
         "ajv-keywords": "^3.1.0"
       }
     },
+    "sdp": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.9.0.tgz",
+      "integrity": "sha512-XAVZQO4qsfzVTHorF49zCpkdxiGmPNjA8ps8RcJGtGP3QJ/A8I9/SVg/QnkAFDMXIyGbHZBBFwYBw6WdnhT96w=="
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -9713,6 +9727,17 @@
         "vue-style-loader": "^4.1.0"
       }
     },
+    "vue-qrcode-reader": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-1.4.2.tgz",
+      "integrity": "sha512-V1+ObiYXrz2EbAnWv6nNxSRvzWXqch9WDlrxBH/i9GEypE5XklWRvOHiNeB0kQBVdv7f8G43BUWAwVNBfZvIQg==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "jsqr": "^1.1.0",
+        "lodash": "^4.17.11",
+        "webrtc-adapter": "^6.2.1"
+      }
+    },
     "vue-router": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.4.tgz",
@@ -9995,6 +10020,15 @@
         }
       }
     },
+    "webrtc-adapter": {
+      "version": "6.4.8",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-6.4.8.tgz",
+      "integrity": "sha512-YM8yl545c/JhYcjGHgaCoA7jRK/KZuMwEDFeP2AcP0Auv5awEd+gZE0hXy9z7Ed3p9HvAXp8jdbe+4ESb1zxAw==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.14",
+        "sdp": "^2.9.0"
+      }
+    },
     "websocket-driver": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",

frontend/package.json

@@ -16,7 +16,8 @@
     "@quasar/extras": "^1.1.1",
     "ajv": "6.8.1",
     "axios": "^0.18.0",
-    "quasar": "^1.0.0-beta.17"
+    "quasar": "^1.0.0-beta.17",
+    "vue-qrcode-reader": "^1.4.2"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0-beta.17",

frontend/quasar.conf.js

@@ -5,7 +5,8 @@ module.exports = function (ctx) {
     // app boot file (/src/boot)
     // --> boot files are part of "main.js"
     boot: [
-      'axios'
+      'axios',
+      'qr-scanner'
     ],
 
     css: [

frontend/src/boot/qr-scanner.js

@@ -0,0 +1,7 @@
+import VueQrcodeReader from "vue-qrcode-reader";
+// import qrscanner from "../components/qr-scanner";
+
+// "async" is optional
+export default async ({ Vue }) => {
+  Vue.use(VueQrcodeReader);
+}

frontend/src/components/qr-scanner.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+
+    <qrcode-drop-zone @decode="onDecode" @init="logErrors">
+      <qrcode-stream @decode="onDecode" @init="onInit" />
+    </qrcode-drop-zone>
+
+    <qrcode-capture v-if="noStreamApiSupport" @decode="onDecode" />
+    <p class="decode-result">Last result: <b>{{ result }}</b></p>
+  </div>
+</template>
+<script>
+//import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
+
+export default {
+  name: 'qrscanner',
+  data () {
+    return {
+      result: '',
+      noStreamApiSupport: false
+    }
+  },
+
+  methods: {
+    onDecode (result) {
+      this.result = result
+    },
+
+    logErrors (promise) {
+      promise.catch(console.error)
+    },
+
+    async onInit (promise) {
+      try {
+        await promise
+      } catch (error) {
+        if (error.name === 'StreamApiNotSupportedError') {
+          this.noStreamApiSupport = true
+        }
+      }
+    }
+  },
+
+  // components: {
+  //   QrcodeStream,
+  //   QrcodeDropZone,
+  //   QrcodeCapture
+  // }
+}
+</script>
+
+<style>
+</style>

frontend/src/pages/qr-code-test.vue

@@ -0,0 +1,18 @@
+<template>
+<!--  <q-page padding>-->
+    <qrscanner />
+<!--  </q-page>-->
+</template>
+
+<script>
+import qrscanner from '../components/qr-scanner'
+export default {
+  // name: 'PageName',
+  components: {
+    qrscanner
+  }
+}
+</script>
+
+<style>
+</style>

frontend/src/router/routes.js

@@ -15,6 +15,11 @@ const routes = [
     component: () => import("layouts/MyLayout.vue"),
     children: [{ path: "", component: () => import("pages/Cache.vue") }]
   },
+  {
+    path: "/qr-code-test/",
+    component: () => import("layouts/MyLayout.vue"),
+    children: [{ path: "", component: () => import("pages/qr-code-test.vue") }]
+  },
   {
     path: "/cache/:id",
     component: () => import("layouts/MyLayout.vue"),