Merge pull request #7 from hypersign-protocol/experimentalQr

Experimental qr

Author: Vishwas1

package-lock.json

@@ -15,6 +15,7 @@
     "bootstrap-vue": "^2.23.1",
     "core-js": "^3.8.3",
     "gh-pages": "^6.0.0",
+    "jsqr": "^1.4.0",
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "vue": "^2.6.14",

package.json

@@ -15,10 +15,11 @@ export default {
     MainPage,
   },
   methods: {
-    ...mapActions(["setSession"]),
+    ...mapActions(["setSession","setJWT"]),
   },
-  created() {
-    this.setSession();
+  async created() {
+   await this.setJWT()
+    await this.setSession();
   },
 };
 </script>

src/App.vue

@@ -86,7 +86,9 @@
       </div>
     </div>
     <MessageBox :msg="toastMessage" :type="toastType" v-if="isToast" />
-    <div class="card-footer"><PoweredBy /></div>
+    <div class="card-footer">
+      <PoweredBy />
+    </div>
   </div>
 </template>
 
@@ -111,11 +113,13 @@ export default {
       toastMessage: "",
       toastType: "success",
       isToast: false,
+      width: 0,
+      height: 0,
     };
   },
   methods: {
     ...mapActions(["addharQRVerify", "verifyImage"]),
-    ...mapMutations(["nextStep"]),
+    ...mapMutations(["nextStep", "setImage"]),
     toggleCamera() {
       if (this.isCameraOpen) {
         this.isCameraOpen = false;
@@ -133,14 +137,30 @@ export default {
 
       const constraints = (window.constraints = {
         audio: false,
-        video: true,
+        video: {
+          facingMode: "user",
+          width: {
+            min: 640,
+            ideal: 1280,
+            max: 1920,
+          },
+          height: {
+            min: 480,
+            ideal: 720,
+            max: 1080,
+          },
+        },
       });
 
       navigator.mediaDevices
         .getUserMedia(constraints)
         .then((stream) => {
           this.isLoading = false;
           this.$refs.camera.srcObject = stream;
+
+          const track = stream.getVideoTracks()[0];
+          this.width = track.getSettings().width;
+          this.height = track.getSettings().height;
         })
         .catch((error) => {
           console.error(error);
@@ -170,18 +190,26 @@ export default {
       }
 
       this.isPhotoTaken = !this.isPhotoTaken;
-
+      const canvas = this.$refs.canvas;
       const context = this.$refs.canvas.getContext("2d");
-      context.drawImage(this.$refs.camera, 10, 10, 230, 230);
+      const video = this.$refs.camera;
+
+      if (this.isPhotoTaken) {
+        const size = Math.min(this.width, this.height);
+        const x = (this.width - size) / 2;
+        const y = (this.height - size) / 2;
+        context.drawImage(video, x, y, size, size, 5, 7, canvas.width - 10, canvas.height);
+
+        const imageData = this.$refs.canvas.toDataURL();
+        this.setImage(imageData);
+      }
     },
 
     downloadImage() {
-      const download = document.getElementById("downloadPhoto");
-      const canvas = document
-        .getElementById("photoTaken")
-        .toDataURL("image/jpeg")
-        .replace("image/jpeg", "image/octet-stream");
-      download.setAttribute("href", canvas);
+      const link = document.createElement("a");
+      link.download = "photo.png";
+      link.href = this.$refs.canvas.toDataURL();
+      link.click();
     },
     wait() {
       return new Promise((resolve) => {
@@ -191,20 +219,41 @@ export default {
       });
     },
     async submit() {
+      const that = this;
       try {
         this.isLoadingPage = true;
 
-        await this.wait();
+        // await this.wait();
 
         const result = await this.verifyImage();
         if (result) {
+
           this.stopCameraStream();
-          this.nextStep();
+          this.isLoadingPage = false;
+          if (result.verified) {
+
+            that.toast("Match Found : " + result.verified + "  " + result.userImageScore + " %")
+            await that.wait()
+            this.isLoadingPage = false;
+
+            this.nextStep();
+          } else {
+            that.toast("Match Not Found : " + result.verified + "  " + result.userImageScore + " %", "error")
+
+            await that.wait()
+            this.isLoadingPage = false;
+            this.toggleCamera()
+          }
+
+
         }
       } catch (e) {
-        console.error(e);
+
+
+        this.isLoadingPage = false;
         this.stopCameraStream();
-        this.toast(e.message, "error");
+        this.toast(e, "error");
+        this.toggleCamera();
       }
     },
     toast(msg, type = "success") {
@@ -295,9 +344,11 @@ export default {
     0% {
       opacity: 1;
     }
+
     50% {
       opacity: 0.4;
     }
+
     100% {
       opacity: 1;
     }

src/components/AppClickPic.vue

@@ -132,10 +132,10 @@ export default {
         // TODO: go for verification
         const result = await this.getFinalResult();
         await this.wait(2000);
-        if (result) {
-          this.setFinalResult(result);
+        if (result && result.credentialSubject) {
+          this.setFinalResult(result.credentialSubject);
           this.isLoadingPage = false;
-          if (result.verified === true) {
+          if (result.credentialSubject.verified === true) {
             this.nextStep(4);
           } else {
             this.nextStep(5);