DOCSEARCHbyAlgolia
Submit Docs

vue-qrcode-reader

repository·master·Indexed 25 days ago

https://github.com/gruhn/vue-qrcode-reader

A set of Vue.js components for detecting and decoding QR codes and various barcode formats in the browser. It provides three main components: QrcodeStream for live camera scanning, QrcodeDropZone for drag-and-drop image decoding, and QrcodeCapture for file upload scanning. The library supports custom barcode formats via the formats prop and provides events for detection results and camera lifecycle management.

Tokens
6.8K
Snippets
17
Records
55
Agent score
80%

What's inside vue-qrcode-reader

  1. Overview of vue-qrcode-reader components

    master

    vue-qrcode-reader provides Vue.js components for detecting QR codes and various other barcode formats in the browser. It offers three main components:

    • QrcodeStream: Continuously scans frames from a live camera stream.
    • QrcodeDropZone: An empty region for drag-and-drop image decoding.
    • QrcodeCapture: A file upload field that scans selected files instantly.

    All components are responsive and provide minimal default styling, allowing them to fit easily into your existing layouts.

  3. Use the QrcodeDropZone component

    master

    The QrcodeDropZone component allows users to drag-and-drop image files from their desktop or images embedded in web pages into the component's area. The component scans the dropped images and emits the detect event when a barcode is recognized.

    Note on Height: The component renders a wrapper div. Its height is determined by its content; if no content is provided in the default slot, the component will have zero height.

    <qrcode-drop-zone>
  <b>put anything here</b>
</qrcode-drop-zone>

  4. Switch between front and rear cameras

    master
    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 your component logic, the goal is to provide a way for users to select a different camera source for the qrcode-reader.

  7. Pause and validate scanned QR codes

    master
    To prevent rapid-fire scanning of multiple codes, you can implement a 'pause and validate' pattern. This involves pausing the camera stream (or logically ignoring new frames) so that the user can process the last successfully scanned QR code one at a time. While the stream is effectively paused, the last received frame remains visible on the screen, providing a seamless visual experience that looks like a frozen stream rather than a broken one.

  8. Use the torch (flashlight) prop

    master

    In low-light environments, you can control the device's flashlight using the torch prop.

    Important considerations:

    • Detection: Support for the torch cannot be detected until after the camera has already started.
    • Compatibility: Support is inconsistent across different devices and web browsers.

  9. Decode QR codes via file upload with Upload component

    master

    In addition to the QrcodeCapture component (which uses the camera), vue-qrcode-reader provides an Upload component. This component allows users to scan QR codes by selecting or uploading an image file.

    Key characteristics:

    • Client-side processing: No files are actually uploaded to a server; all decoding happens locally in the browser.
    • Mobile behavior: On mobile devices with compatible browsers, selecting the upload option may trigger the device's camera directly instead of a standard file dialog, allowing users to take a photo for immediate decoding.

  10. Implement fullscreen mode with QrcodeStream

    master
    The QrcodeStream component is designed to always cover the entire space available to its parent container. To achieve a fullscreen effect, wrap the QrcodeStream component in a container element that is styled to occupy the entire screen (e.g., using CSS to set width: 100vw and height: 100vh).

  11. Handle camera initialization and errors

    master

    Use the camera-on and error events to manage the camera lifecycle and provide user feedback.

    • camera-on: Emitted when the camera starts streaming. It resolves a promise with MediaTrackCapabilities. Use this to hide loading indicators.
    • error: Emitted when camera initialization fails (e.g., permission denied, no camera found, or not served over HTTPS).
    <qrcode-stream @camera-on="onReady" @error="onError"></qrcode-stream>
    methods: {
  onReady(capabilities) {
    // hide loading indicator
    // capabilities can be used to check for torch support
  },
  onError(error) {
    if (error.name === 'NotAllowedError') {
      // user denied camera access permission
    } else if (error.name === 'NotFoundError') {
      // no suitable camera device installed
    } else if (error.name === 'NotSupportedError') {
      // page is not served over HTTPS (or localhost)
    } else if (error.name === 'NotReadableError') {
      // maybe camera is already in use
    } else if (error.name === 'OverconstrainedError') {
      // requested a camera (e.g. front) that doesn't exist
    } else if (error.name === 'StreamApiNotSupportedError') {
      // browser lacks required features
    }
  }
}
    <qrcode-stream @camera-on="onReady" @error="onError"></qrcode-stream>

```javascript
methods: {
  onReady(capabilities) {
    // hide loading indicator
  },
  onError(error) {
    if (error.name === 'NotAllowedError') {
      // user denied camera access permission
    } else if (error.name === 'NotFoundError') {
      // no suitable camera device installed
    } else if (error.name === 'NotSupportedError') {
      // page is not served over HTTPS (or localhost)
    } else if (error.name === 'NotReadableError') {
      // maybe camera is already in use
    } else if (error.name === 'OverconstrainedError') {
      // requested a camera (e.g. front) that doesn't exist
    } else if (error.name === 'StreamApiNotSupportedError') {
      // browser lacks required features
    }
  }
}

  12. Install vue-qrcode-reader without NPM

    master

    You can include the library via a UMD script tag. Ensure you include it after Vue.

    Include this file: https://unpkg.com/vue-qrcode-reader/dist/vue-qrcode-reader.umd.js

    All components are automatically registered globally. Use kebab-case to reference them in your templates:

    <qrcode-stream></qrcode-stream>
<qrcode-drop-zone></qrcode-drop-zone>
<qrcode-capture></qrcode-capture>
    <script src="./vue.js"></script>
<script src="./vue-qrcode-reader.umd.js"></script>