快捷導(dǎo)航

Vue?調(diào)用攝像頭掃描條碼功能實(shí)現(xiàn)代碼

更新時間：2025年03月19日 12:09:10 作者：JxHillMan

本文介紹了如何使用Vue.js和jsQR庫來實(shí)現(xiàn)調(diào)用攝像頭并掃描條碼的功能,通過安裝依賴、獲取攝像頭視頻流、解析條碼等步驟,實(shí)現(xiàn)了從開始掃描到停止掃描的完整流程,同時,還強(qiáng)調(diào)了瀏覽器兼容性、HTTPS環(huán)境、權(quán)限問題和性能優(yōu)化的重要性,感興趣的朋友一起看看吧

實(shí)現(xiàn)步驟：

安裝依賴：需要引入 jsQR 庫。
調(diào)用攝像頭：通過 navigator.mediaDevices.getUserMedia 獲取攝像頭視頻流。
解析條碼：使用 jsQR 對視頻幀進(jìn)行解析。

代碼實(shí)現(xiàn)

1. 安裝依賴

在項(xiàng)目中安裝 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">掃描結(jié)果: {{ 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;
        // 等待視頻元數(shù)據(jù)加載完成
        await new Promise((resolve) => {
          this.$refs.video.onloadedmetadata = resolve;
        });
        this.isScanning = true;
        this.scanBarcode(); // 開始掃描
      } catch (error) {
        console.error("無法訪問攝像頭:", error);
        alert("無法訪問攝像頭，請檢查權(quán)限設(shè)置！");
      }
    },
    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 }); // 添加此選項(xiàng)
      // 設(shè)置 canvas 尺寸與視頻一致
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      // 繪制視頻幀到 canvas
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
      // 獲取圖像數(shù)據(jù)
      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; // 保存掃描結(jié)果
        this.stopScanner(); // 停止掃描
      } else {
        // 繼續(xù)掃描下一幀
        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>