qrcode-reader-vue3

The library provides three main components for different scanning scenarios:

• QrcodeStream: Accesses the device camera for continuous scanning.
• QrcodeDropZone: Renders an empty region where users can drag-and-drop images to be decoded.
• QrcodeCapture: A standard file upload field that scans all selected files instantly.

All components are responsive and come with minimal default styling.

By default, qrcode-reader-vue3 caches the last decoded QR code content to prevent a flood of detect events. An event is only emitted when the decoded content changes.

To force the reader to recognize the same QR code again, you can exploit the fact that the internal cache is reset whenever the paused prop is toggled. By briefly setting paused to true and then back to false, you clear the cache and allow the component to emit a new event for the same content.

To use the library in a Vue 3 project, install it using npm:

npm install --save qrcode-reader-vue3

The QrcodeStream component displays a camera stream and continuously scans for QR codes. It uses the browser's Stream API and BarcodeDetector API.

Browser Support Requirements:

• Chrome/Edge/Firefox: Supported, but Chrome requires HTTPS or localhost.
• Safari: Requires HTTPS even on localhost.
  • PWA mode: iOS 13.4+
  • Other iOS browsers (Chrome/Firefox for iOS): iOS 14.3+
  • WkWebView in native apps: iOS 14.3+
• Internet Explorer: Not supported.

Basic Usage:

<qrcode-stream @detect="onDetect"></qrcode-stream>

methods: {
  onDetect (detectedCodes) {
    // detectedCodes is an array of DetectedBarcode objects
  }
}

To allow users to toggle between the front and rear cameras on their device, you can implement a camera switching mechanism. While the specific implementation details depend on the underlying camera API, the pattern involves providing a way for the user to select a different video source (e.g., switching from environment to user facing modes).

<!-- Example pattern for switching cameras -->
<template>
  <button @click="switchCamera">Switch Camera</button>
  <qrcode-reader :constraints="cameraConstraints" />
</template>\n
<script setup>
import { ref } from 'vue'

const cameraConstraints = ref({ facingMode: 'environment' })

const switchCamera = () => {
  cameraConstraints.value.facingMode = 
    cameraConstraints.value.facingMode === 'environment' ? 'user' : 'environment'
}
</script>

You can include the library via a CDN by adding the UMD script tag. Ensure it is included after the Vue.js script tag:

<script src="./vue.js"></script>
<script src="./QrcodeReaderVue3.umd.min.js"></script>

When using this method, all components are automatically registered globally. Use kebab-case in your templates:

<qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>

The QrcodeCapture component renders a file picker input element. When clicked, it opens a file dialog. On supporting mobile devices, it can trigger the camera to take a picture. The component automatically scans selected images and emits the detect event when QR codes or barcodes are found.

Note: The decode event was removed in v5.0.0; use detect instead.

<qrcode-capture @detect="onDetect"></qrcode-capture>

To control the device's camera flashlight in low-light conditions, use the torch prop on the QR code reader component.

Important Considerations:

• Detection: Support for the torch feature can only be detected after the camera has already been started.
• Compatibility: Support is inconsistent across different devices and web browsers. You should implement logic to handle cases where the torch is unavailable.

<template>
  <!-- Example usage of the torch prop -->
  <QrReader 
    :torch="true" 
    @scan="onScan"
  />
</template>

To make all components available throughout your application, register the plugin globally in your main entry file:

import Vue from "vue";
import QrcodeReaderVue3 from "qrcode-reader-vue3";

Vue.use(QrcodeReaderVue3);

There is a delay between mounting the QR code reader component and the camera stream becoming visible. To provide a better user experience, listen for the camera-on event to determine when the stream is active and hide your loading indicator.

// Example logic for handling the loading state
<template>
  <div>
    <div v-if="!isCameraReady" class="loader">Loading Camera...</div>
    <QrCodeReaderReader 
      @camera-on="isCameraReady = true"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isCameraReady = ref(false)
</script>