SoFunction
Updated on 2025-04-13

Vue calls the camera to scan the barcode function to implement the code

The following is a sample page code based on , which is used to call the camera and scan the barcode. We will usejsQRLibrary to parse QR codes (or barcodes), which is a lightweight JavaScript library.

Implementation steps:

  • Installation dependencies: Need to be introducedjsQRLibrary.
  • Call the camera:passGet the camera video stream.
  • Analyze the barcode:usejsQRAnalyze the video frame.

Code implementation

1. Installation dependencies

Install in the projectjsQR：

npm install jsqr

2. Vue page code

Here is the complete Vue page code:

<template>
  <div class="scanner-container">
    <h2>Barcode scanning</h2>
    <video ref="video" autoplay playsinline></video>
    <canvas ref="canvas" style="display: none;"></canvas>
    <p v-if="barcode">Scan results: {{ barcode }}</p>
    <button @click="startScanner" :disabled="isScanning">Start scanning</button>
    <button @click="stopScanner" :disabled="!isScanning">Stop scanning</button>
  </div>
</template>
<script>
import jsQR from "jsqr";
export default {
  data() {
    return {
      isScanning: false,
      barcode: null,
      videoStream: null,
    };
  },
  methods: {
    async startScanner() {
      try {
        // Request access to the camera         = await ({
          video: { facingMode: "environment" }, // Use the rear camera        });
        this.$ = ;
        // Wait for the video metadata to load        await new Promise((resolve) => {
          this.$ = resolve;
        });
         = true;
        (); // Start scanning      } catch (error) {
        ("Camera not accessible:", error);
        alert("The camera cannot be accessed, please check the permission settings!");
      }
    },
    stopScanner() {
      if () {
        const tracks = ();
        ((track) => ());
         = null;
         = false;
      }
    },
    scanBarcode() {
      if (!) return;
      const video = this.$;
      const canvas = this.$;
      const context = ("2d", { willReadFrequently: true }); // Add this option      // Set the size of the canvas is consistent with the video       = ;
       = ;
      // Draw video frames to canvas      (video, 0, 0, , );
      // Get image data      const imageData = (0, 0, , );
      // Use jsQR to parse barcodes      const code = jsQR(, , );
      if (code) {
         = ; // Save the scan results        (); // Stop scanning      } else {
        // Continue to scan the next frame        requestAnimationFrame();
      }
    },
  },
  beforeDestroy() {
    (); // Stop the camera when leaving the page  },
};
</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>

Function description

Start scanning：

  • After clicking the "Start Scan" button, the page requests access to the device camera and displays a live video stream.
  • usejsQREach frame of video is parsed until the barcode is successfully identified.

Stop scanning：

  • After clicking the "Stop Scan" button, the camera will be turned off and the scanning will stop.

Scan results display：

  • When the barcode is successfully parsed, the scan results will be displayed on the page and the scanning will automatically stop.

Things to note

Browser compatibility：

  • Need to supportgetUserMediaruns in modern browsers (such as Chrome, Edge).
  • HTTPS Only in the environment can the camera be used normally.

Permissions issues：

  • Users need to grant camera access, otherwise it will not work properly.

Performance optimization：

  • If the scanning speed is slow, you can adjust itcanvasresolution to improve performance.

This is the article about Vue calling the camera to scan barcode. For more information about Vue calling and scanning barcode, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!