Add QR code scanner dependency

nuxt.config.js

@@ -68,6 +68,7 @@ export default {
     { src: "~/plugins/rich-editor", ssr: false },
     { src: "~/plugins/translation-directive" },
     { src: "~/plugins/vue-pdf", ssr: false },
+    { src: "~/plugins/vue-qr-code", ssr: false },
   ],
   /*
    ** Nuxt.js dev-modules

package.json

@@ -47,6 +47,7 @@
     "sharp": "^0.25.2",
     "vue": "^2.6.11",
     "vue-pdf": "^4.1.0",
+    "vue-qrcode-reader": "^2.3.13",
     "vue-router": "^3.1.6",
     "vue-typer": "^1.2.0",
     "vuex": "^3.3.0"

pages/company/panel/resumes.vue

@@ -50,6 +50,7 @@
               <v-btn
                 v-ripple
                 :class="$style.scanQrBtn"
+                :to="{ name: 'PageCompanyScanQrCode' }"
                 class="secondary--text d-none d-md-flex"
                 color="primary"
                 depressed
@@ -160,6 +161,7 @@
       <v-btn
         v-ripple
         :class="$style.scanQrBtn"
+        :to="{ name: 'PageCompanyScanQrCode' }"
         block
         class="secondary--text"
         color="primary"

pages/company/panel/scan.vue

@@ -0,0 +1,57 @@
+<template>
+  <client-only>
+    <div>
+      <p>
+        Last result: <b>{{ decodedContent }}</b>
+      </p>
+
+      <p class="error">
+        {{ errorMessage }}
+      </p>
+
+      <qrcode-stream @decode="onDecode" @init="onInit" />
+    </div>
+  </client-only>
+</template>
+
+<script>
+  export default {
+    name: "PageCompanyScanQrCode",
+
+    data() {
+      return {
+        decodedContent: "",
+        errorMessage: "",
+      };
+    },
+
+    methods: {
+      onDecode(content) {
+        this.decodedContent = content;
+      },
+
+      onInit(promise) {
+        promise
+          .then(() => {
+            console.log("Successfully initilized! Ready for scanning now!");
+          })
+          .catch((error) => {
+            if ("NotAllowedError" === error.name) {
+              this.errorMessage = "Hey! I need access to your camera";
+            } else if ("NotFoundError" === error.name) {
+              this.errorMessage = "Do you even have a camera on your device?";
+            } else if ("NotSupportedError" === error.name) {
+              this.errorMessage = "Seems like this page is served in non-secure context (HTTPS, localhost or file://)";
+            } else if ("NotReadableError" === error.name) {
+              this.errorMessage = "Couldn't access your camera. Is it already in use?";
+            } else if ("OverconstrainedError" === error.name) {
+              this.errorMessage = "Constraints don't match any installed camera. Did you asked for the front camera although there is none?";
+            } else {
+              this.errorMessage = `UNKNOWN ERROR: ${ error.message }`;
+            }
+          })
+        ;
+      },
+    },
+  };
+</script>

plugins/vue-qr-code.js

@@ -0,0 +1,4 @@
+import Vue from "vue";
+import VueQrcodeReader from "vue-qrcode-reader";
+
+Vue.use(VueQrcodeReader);

yarn.lock

@@ -2666,6 +2666,11 @@ caller-path@^2.0.0:
   dependencies:
     caller-callsite "^2.0.0"
 
+callforth@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/callforth/-/callforth-0.3.1.tgz#d40f610c7dd47d0011fd84bac32b3fe11cff1785"
+  integrity sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA==
+
 callsites@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
@@ -3272,6 +3277,11 @@ core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^3.6.5:
+  version "3.6.5"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
+  integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
+
 [email protected], core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -9365,6 +9375,13 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rtcpeerconnection-shim@^1.2.15:
+  version "1.2.15"
+  resolved "https://registry.yarnpkg.com/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz#e7cc189a81b435324c4949aa3dfb51888684b243"
+  integrity sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==
+  dependencies:
+    sdp "^2.6.0"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -9485,6 +9502,11 @@ scss-tokenizer@^0.2.3:
     js-base64 "^2.1.8"
     source-map "^0.4.2"
 
+sdp@^2.12.0, sdp@^2.6.0:
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/sdp/-/sdp-2.12.0.tgz#338a106af7560c86e4523f858349680350d53b22"
+  integrity sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw==
+
 semver-compare@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/semver-compare/-/semver-compare-1.0.0.tgz#0dee216a1c941ab37e9efb1788f6afc5ff5537fc"
@@ -11101,6 +11123,16 @@ vue-pdf@^4.1.0:
     vue-resize-sensor "^2.0.0"
     worker-loader "^2.0.0"
 
+vue-qrcode-reader@^2.3.13:
+  version "2.3.13"
+  resolved "https://registry.yarnpkg.com/vue-qrcode-reader/-/vue-qrcode-reader-2.3.13.tgz#9d1503aaf952bda6cbe251a24e935dadaf70f5cd"
+  integrity sha512-NwenssSFVhawJUtl5JdEKEcRNEzYSwL9QRUrtKIyl//OVwk8Ha9jgUS8O8xlBwyfIXAc6pEHuPue+qFJpwDqrg==
+  dependencies:
+    callforth "^0.3.1"
+    core-js "^3.6.5"
+    vue "^2.6.11"
+    webrtc-adapter "7.7.0"
+
 vue-resize-sensor@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/vue-resize-sensor/-/vue-resize-sensor-2.0.0.tgz#3a587fd6802e1688709cf2c5aadae7a0075952bf"
@@ -11311,6 +11343,14 @@ webpackbar@^4.0.0:
     text-table "^0.2.0"
     wrap-ansi "^6.0.0"
 
+[email protected]:
+  version "7.7.0"
+  resolved "https://registry.yarnpkg.com/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz#e56ff25f925177ac553a7c49323ca4108d2b5f4d"
+  integrity sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==
+  dependencies:
+    rtcpeerconnection-shim "^1.2.15"
+    sdp "^2.12.0"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"