first test implementation of qr-code-scanner

2019-04-15 21:45:38 +02:00 · 2019-04-15 21:45:38 +02:00 · 377f28a564
commit 377f28a564
parent 789c04a8e8
7 changed files with 128 additions and 9 deletions
--- a/frontend/package-lock.json
+++ b/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==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
        }
      }
    },
@ -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==",
-      "dev": true
+      "integrity": "sha512-klh/kDpwX8hryYL14M9w/xei6vrv6sE8gTHDG7/T/+SEovB/G4ejwcfE/CBzO6Edsu+OETZMZ3wcX/EjUkrl5A=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
    },
    "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",
--- a/frontend/package.json
+++ b/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",
--- a/frontend/quasar.conf.js
+++ b/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: [
--- a/frontend/src/boot/qr-scanner.js
+++ b/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);
+}
--- a/frontend/src/components/qr-scanner.vue
+++ b/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>
--- a/frontend/src/pages/qr-code-test.vue
+++ b/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>
--- a/frontend/src/router/routes.js
+++ b/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"),