fix:摄像头测试

src/views/wpm_bx/QRCodeScanner.vue

@@ -0,0 +1,89 @@
+
+<template>
+  <div style="position: relative">
+    <h1>扫描二维码</h1>
+    <video ref="videoElement" width="500" autoplay></video>
+    <canvas ref="canvasElement" style="display:none;position: absolute;left: 510px;"></canvas>
+    <div class="result">
+      <el-button @click="scanQRCode">识别二维码</el-button>
+      <h3>扫描结果：</h3>
+      <p>{{ scannedResult }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import jsQR from 'jsqr';
+
+export default {
+  data() {
+    return {
+      scannedResult: null, // 存储扫描到的二维码数据
+      videoStream: null, // 视频流对象
+    };
+  },
+  mounted() {
+    this.startScanning();
+  },
+  methods: {
+    // 启动摄像头并开始扫描
+    async startScanning() {
+      try {
+        alert("启动摄像头");
+        // 请求用户的摄像头权限并获取视频流
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: { facingMode: 'environment' }, // 使用后置摄像头
+        });
+
+        this.videoStream = stream;
+        this.$refs.videoElement.srcObject = stream;
+        alert("准备就绪");
+        setTimeout(() => {
+          this.scanQRCode();
+        },1000)
+      } catch (error) {
+        console.error('无法访问摄像头:', error);
+      }
+    },
+
+    // 从视频流中提取每一帧图像并识别二维码
+    scanQRCode() {
+      alert("解析二维码");
+      let videoElement = this.$refs.videoElement;
+      let canvas = this.$refs.canvasElement;
+      let context = canvas.getContext('2d');
+      let widths = videoElement.videoWidth;
+      let heights = videoElement.videoHeight;
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+      context.drawImage(videoElement, 0, 0, widths, heights);
+      // 获取当前帧的图像数据
+      let imageData = context.getImageData(0, 0, widths,heights);
+      // 使用 jsQR 库识别二维码
+      console.log("imageData", imageData);
+      let qrCode = jsQR(imageData.data, widths,heights);
+      console.log("qrCode", qrCode);
+      if (qrCode) {
+        this.scannedResult = qrCode.data; // 显示扫描到的二维码内容
+      } else {
+        this.scannedResult = null; // 如果未识别到二维码，则清空结果
+      }
+    },
+  },
+  beforeUnmount() {
+    // 在组件销毁时，停止视频流
+    if (this.videoStream) {
+      const tracks = this.videoStream.getTracks();
+      tracks.forEach(track => track.stop());
+    }
+  },
+};
+</script>
+
+<style scoped>
+.result {
+  margin-top: 10px;
+  font-size: 16px;
+  color: green;
+}
+</style>