Vue 调用摄像头扫描条码

以下是一个基于 Vue.js 的页面代码示例，用于调用摄像头并扫描条码。我们将使用 jsQR 库来解析二维码（或条形码），这是一个轻量级的 JavaScript 库。

实现步骤：

1. 安装依赖：需要引入 jsQR 库。
2. 调用摄像头：通过 navigator.mediaDevices.getUserMedia 获取摄像头视频流。
3. 解析条码：使用 jsQR 对视频帧进行解析。

代码实现

1. 安装依赖

在项目中安装 jsQR：

npm install jsqr

2. Vue 页面代码

以下是完整的 Vue 页面代码：

<template>
  <div class="scanner-container">
    <h2>条码扫描</h2>
    <video ref="video" autoplay playsinline></video>
    <canvas ref="canvas" style="display: none;"></canvas>
    <p v-if="barcode">扫描结果: {{ barcode }}</p>
    <button @click="startScanner" :disabled="isScanning">开始扫描</button>
    <button @click="stopScanner" :disabled="!isScanning">停止扫描</button>
  </div>
</template>

<script>
import jsQR from "jsqr";

export default {
  data() {
    return {
      isScanning: false,
      barcode: null,
      videoStream: null,
    };
  },
  methods: {
    async startScanner() {
      try {
        // 请求访问摄像头
        this.videoStream = await navigator.mediaDevices.getUserMedia({
          video: { facingMode: "environment" }, // 使用后置摄像头
        });
        this.$refs.video.srcObject = this.videoStream;

        // 等待视频元数据加载完成
        await new Promise((resolve) => {
          this.$refs.video.onloadedmetadata = resolve;
        });

        this.isScanning = true;
        this.scanBarcode(); // 开始扫描
      } catch (error) {
        console.error("无法访问摄像头:", error);
        alert("无法访问摄像头，请检查权限设置！");
      }
    },

    stopScanner() {
      if (this.videoStream) {
        const tracks = this.videoStream.getTracks();
        tracks.forEach((track) => track.stop());
        this.videoStream = null;
        this.isScanning = false;
      }
    },
    scanBarcode() {
      if (!this.isScanning) return;

      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext("2d", { willReadFrequently: true }); // 添加此选项

      // 设置 canvas 尺寸与视频一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;

      // 绘制视频帧到 canvas
      context.drawImage(video, 0, 0, canvas.width, canvas.height);

      // 获取图像数据
      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);

      // 使用 jsQR 解析条码
      const code = jsQR(imageData.data, imageData.width, imageData.height);
      if (code) {
        this.barcode = code.data; // 保存扫描结果
        this.stopScanner(); // 停止扫描
      } else {
        // 继续扫描下一帧
        requestAnimationFrame(this.scanBarcode);
      }
    },
  },
  beforeDestroy() {
    this.stopScanner(); // 离开页面时停止摄像头
  },
};
</script>

<style scoped>
.scanner-container {
  text-align: center;
  margin-top: 20px;
}

video {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  border: 1px solid #ccc;
}

button {
  margin: 10px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

功能说明

1. 开始扫描：
   • 点击“开始扫描”按钮后，页面会请求访问设备摄像头，并显示实时视频流。
   • 使用 jsQR 对每一帧视频进行解析，直到成功识别条码。
2. 停止扫描：
   • 点击“停止扫描”按钮后，摄像头会被关闭，扫描停止。
3. 扫描结果显示：
   • 当成功解析条码后，扫描结果会显示在页面上，并自动停止扫描。

注意事项

1. 浏览器兼容性：
   • 需要在支持 getUserMedia 的现代浏览器中运行（如 Chrome、Edge）。
   • HTTPS 环境下才能正常使用摄像头。
2. 权限问题：
   • 用户需授予摄像头访问权限，否则无法正常工作。
3. 性能优化：
   • 如果扫描速度较慢，可以调整 canvas 的分辨率以提高性能。