gxgx

src/components/sweepPage.vue

@@ -4,9 +4,11 @@
       class="ku-scanner"
       ref="QrcodeStreamRef"
       v-if="show"
+      :constraints="{ facingMode: { ideal: 'environment' } }"
       :camera="camera"
       :torch="torchActive"
       :zoom="1"
+      :key="cameraKey"
       @decode="onDecode"
       @init="onInit"
     >
@@ -21,7 +23,27 @@
       </div>
     </QrcodeStream>
     <span class="closeBtn" @click="close">
-      <svg t="1733477770331" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4265" width="64" height="64"><path d="M623.807 528.693a113.756 113.756 0 0 0-0.139-33.126l252.787-252.692c26.245-26.236 26.245-68.772 0-95.006-26.248-26.236-68.798-26.236-95.043 0L528.281 400.902c-5.296-0.762-10.708-1.164-16.216-1.164s-10.92 0.402-16.216 1.164l-253.13-253.031c-26.245-26.236-68.796-26.236-95.043 0-26.245 26.234-26.245 68.77 0 95.006l252.789 252.692a113.726 113.726 0 0 0-0.14 33.124L147.676 781.247c-26.245 26.236-26.245 68.77 0 95.006 26.248 26.236 68.798 26.236 95.043 0L494.85 624.218c5.613 0.859 11.362 1.305 17.215 1.305s11.602-0.446 17.215-1.305l252.13 252.035c26.245 26.236 68.796 26.236 95.043 0 26.245-26.236 26.245-68.77 0-95.006L623.807 528.693z" fill="#000000" p-id="4266"></path><path d="M512.063 444.326c37.407 0 67.73 30.327 67.73 67.736 0 37.41-30.323 67.735-67.73 67.735-37.405 0-67.728-30.325-67.728-67.735 0.001-37.408 30.323-67.736 67.728-67.736z" fill="#000000" p-id="4267"></path></svg>
+      <svg
+        t="1733477770331"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="4265"
+        width="64"
+        height="64"
+      >
+        <path
+          d="M623.807 528.693a113.756 113.756 0 0 0-0.139-33.126l252.787-252.692c26.245-26.236 26.245-68.772 0-95.006-26.248-26.236-68.798-26.236-95.043 0L528.281 400.902c-5.296-0.762-10.708-1.164-16.216-1.164s-10.92 0.402-16.216 1.164l-253.13-253.031c-26.245-26.236-68.796-26.236-95.043 0-26.245 26.234-26.245 68.77 0 95.006l252.789 252.692a113.726 113.726 0 0 0-0.14 33.124L147.676 781.247c-26.245 26.236-26.245 68.77 0 95.006 26.248 26.236 68.798 26.236 95.043 0L494.85 624.218c5.613 0.859 11.362 1.305 17.215 1.305s11.602-0.446 17.215-1.305l252.13 252.035c26.245 26.236 68.796 26.236 95.043 0 26.245-26.236 26.245-68.77 0-95.006L623.807 528.693z"
+          fill="#000000"
+          p-id="4266"
+        ></path>
+        <path
+          d="M512.063 444.326c37.407 0 67.73 30.327 67.73 67.736 0 37.41-30.323 67.735-67.73 67.735-37.405 0-67.728-30.325-67.728-67.735 0.001-37.408 30.323-67.736 67.728-67.736z"
+          fill="#000000"
+          p-id="4267"
+        ></path>
+      </svg>
     </span>
   </div>
 </template>
@@ -38,8 +60,7 @@ export default {
       camera: 'auto', //front auto environment
       torchActive: false,
       flag: 0,
-      paused: true,
-      timer: null
+      paused: true
       // constraints:{
       // 	width:300,
       // 	height:300
@@ -48,16 +69,23 @@ export default {
   },
   methods: {
     open() {
+      this.cameraKey = new Date().getTime()
       this.show = true
       // setTimeout(()=>{
       //   this.$emit('success', "功能测试2503261429")
       // },1000)
-      this.$nextTick(()=>{
-        this.$refs.QrcodeStreamRef.init()
-      })
+    },
+    stopCamera() {
+      const video = document.querySelector('video')
+      if (video && video.srcObject) {
+        const stream = video.srcObject
+        const tracks = stream.getTracks()
+        tracks.forEach(track => track.stop())
+        video.srcObject = null
+      }
     },
     close() {
-      clearInterval(this.timer)
+      this.stopCamera();
       this.show = false
     },
     onDecode(result) {
@@ -68,10 +96,10 @@ export default {
       try {
         const { capabilities } = await promise
         const TORCH_IS_SUPPORTED = !!capabilities.torch
-        console.log('TORCH_IS_SUPPORTED',TORCH_IS_SUPPORTED)
+        console.log('TORCH_IS_SUPPORTED', TORCH_IS_SUPPORTED)
         await promise
       } catch (error) {
-        this.$emit('error',error)
+        this.$emit('error', error)
         this.close()
       }
     }
@@ -99,17 +127,14 @@ export default {
   background-color: #ffffff80;
   right: 20px;
   z-index: 9992;
-	box-sizing: border-box;
-	padding:10px;
-	svg{
-		width: 100%;
-		height: 100%;
-
-	}
+  box-sizing: border-box;
+  padding: 10px;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 }
 
-
-
 .ku-scanner {
   width: 100%;
   height: 100%;
@@ -117,18 +142,17 @@ export default {
   right: 0;
   top: 0;
   z-index: 9991;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   .ku-scanner-content {
-
     background-size: 3rem 3rem;
     background-position: -1rem -1rem;
     width: 100%;
     height: 100%;
     position: relative;
     background-color: rgba(18, 18, 18, 0);
-		margin: auto;
+    margin: auto;
     // 提示信息
     .ku-scanner-tooltip {
       width: 100%;