front camera toggle

eclipse-tractusx · Nov 22, 2023 · 646df83 · 646df83
1 parent aa50186
commit 646df83
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/src/assets/styles/components/landing/searchView.scss b/src/assets/styles/components/landing/searchView.scss
@@ -167,7 +167,7 @@
     .error {
       font-weight: bold;
       text-align: center;
-      padding: 0 0 70px 0;
+      padding: 0 0 18px 0;
     }
 
     .qr-container {

diff --git a/src/components/general/QrcodeStrem.vue b/src/components/general/QrcodeStrem.vue
@@ -25,7 +25,10 @@
     class="qrcode-stream"
     @init="onInit"
     @decode="onDecode"
-  ></qrcode-stream>
+    :camera="facingMode"
+  >
+    <div>{{ facingMode }}</div>
+  </qrcode-stream>
 </template>
 
 <script>
@@ -43,6 +46,12 @@ export default {
       decodedString: "",
     };
   },
+  props: {
+    facingMode: {
+      type: String,
+      default: "front",
+    },
+  },
   methods: {
     async onInit(promise) {
       try {

diff --git a/src/views/SearchView.vue b/src/views/SearchView.vue
@@ -56,6 +56,13 @@
           <v-row data-cy="qr-container">
             <div v-if="!qrError">
               <v-col class="qr-container" cols="12" v-if="QRtoggle">
+                <v-btn rounded v-if="multipleCameras">
+                  <v-icon
+                    icon="mdi-camera-flip-outline"
+                    @click="toggleCamera"
+                    style="color: #0f71cb"
+                  ></v-icon>
+                </v-btn>
                 <div class="stream-container">
                   <v-icon
                     size="x-large"
@@ -65,7 +72,11 @@
                     md
                     icon="mdi-close-thick"
                   ></v-icon>
-                  <QrcodeStream v-if="QRtoggle" :key="reloadReader" />
+                  <QrcodeStream
+                    :facingMode="facingMode"
+                    v-if="QRtoggle"
+                    :key="reloadReader"
+                  />
                 </div>
               </v-col>
               <v-col cols="12" v-else class="qr-container">
@@ -111,6 +122,9 @@ export default {
       isHidden: false,
       QRtoggle: false,
       reloadReader: 0,
+      facingMode: "front",
+
+      multipleCameras: true,
     };
   },
   computed: {
@@ -123,10 +137,28 @@ export default {
       LogotypeDPP,
     };
   },
-  created() {
+  mounted() {
     this.checkCameraPermission();
+    this.toggleCamera();
   },
   methods: {
+    async toggleCamera() {
+      try {
+        const devices = await navigator.mediaDevices.enumerateDevices();
+        const videoDevices = devices.filter(
+          (device) => device.kind === "videoinput"
+        );
+
+        if (videoDevices.length > 1) {
+          this.facingMode = this.facingMode === "front" ? "rear" : "front";
+        } else {
+          this.multipleCameras = false;
+          this.facingMode = "auto";
+        }
+      } catch (error) {
+        console.error("Error toggling camera:", error);
+      }
+    },
     async checkCameraPermission() {
       try {
         const permissionStatus = await navigator.permissions.query({