Vue 3 Barcode and QR Code Camera Scanner and Image Reader

A Vue.js set of components to scan barcodes and QR codes (or upload images).

Enhancements

The following bug fixes, features & improvements over the abandoned package by olefirenko

• Uses latest version of the ZXing library which greatly increases scanning speed and compatibility.
• On startup, searches all available rear-facing cameras to find the most ideal camera for barcode scanning, preferably one with torch (flash) and autofocus. Also saves this ideal camera to local storage for faster startup on repeat scans.
• Adds option to activate the torch (camera flash), which can yield higher barcode scanning speed and accuracy (Android only).
• Adds option to cycle through the available cameras (if more than one camera is available).
• Adds option to set orientation to landscape mode, this can also increase the scanning speed and accuracy as there's more horizontal pixels in the landscape orientation.
• Adds option to control the camera zoom (if camera device reports the user is allowed to set the zoom).
• Adds option to switch between autofocus and manual focus mode (defaults to autofocus mode if available).
• Adds option to set the focus distance (if in manual focus mode and camera device supports the feature).
• Adds option to only select from rear-facing cameras (you probably only want rear-facing cameras when scanning barcodes).
• Adds option to control the time between decode scans (defaults to 500ms).

Benefits

• Scans multiple 1D barcode formats and 2D QR Codes.
• Uses ZXing ("zebra crossing"), an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.

Demo

Demo | Demo repository

Installation

The easiest way to use Vue Barcode Reader is to install it with npm or yarn.

npm install @teckel/vue-barcode-reader --save

Or

yarn add @teckel/vue-barcode-reader

Usage

The Vue Barcode Reader works out of the box by just including it.

Scanning from Video Camera

Once a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.

Composition API example:

<script setup>
import { ref } from 'vue'
import { StreamBarcodeReader } from '@teckel/vue-barcode-reader'

const decodedText = ref('')

const onDecode = (result) => {
  decodedText = result
}

const onLoaded = () => {
  console.log('loaded')
}
</script>

<template>
  <StreamBarcodeReader
    torch
    no-front-cameras
    @decode="onDecode"
    @loaded="onLoaded"
  />
  <h2>Decoded value: {{ decodedText }}</h2>
</template>

Options API example:

<template>
  <StreamBarcodeReader
    torch
    no-front-cameras
    @decode="onDecode"
    @loaded="onLoaded"
  />
  <h2>Decoded value: {{ decodedText }}</h2>
</template>

<script>
import { StreamBarcodeReader } from '@teckel/vue-barcode-reader'

export default {
  components: { StreamBarcodeReader },
  data() {
    return {
      decodedText: '',
    }
  },
  methods: {
    onDecode(result) {
      this.decodedText = result
    },
    onLoaded() {
      console.log('loaded')
    },
  }
}
</script>

Scanning from Image

The component renders to a simple file picker input element. Clicking opens a file dialog. On supporting mobile devices the camera is started to take a picture. The selected images are directly scanned and positive results are indicated by the decode event.

import { ImageBarcodeReader } from '@teckel/vue-barcode-reader'

In your template you can use this syntax:

<ImageBarcodeReader
  @decode="onDecode"
  @error="onError"
/>

Props

Props will only work if the camera reports that the feature is supported. Some camera devices and some platforms either don't allow setting constraints or don't report the feature exists. Chrome on Android work quite well, while (as expected) iOS and Safari don't support most/all features.

torch

Activate the torch (flash). Can be set with simply torch or controlled via :torch="torch".

zoom

Set the zoom value (min/max/step available in hasZoom emitted value).

landscape

Set the browser to landscape orientation. In order to set landscape mode, the browser will first switch to fullscreen mode (this is required to force landscape mode).

autofocus

Defaults to true, but setting :autofocus="false" turns off autofocus (manual focus).

focus-distance

Must have :autofocus="false" (turning off autofocus and turning on manual focus) for focus-distance to work.

Set the focus distance (min/max/step available in hasFocusDistance emitted value).

no-front-cameras

Only selects from rear-facing cameras. This only works if the device reports the camera's orientation.

device-index

Select the index of the camera device to use (get the camera device array from the videoDevices emitted value).

msBetweenDecoding

Set the time between decode scans (defaults to 500ms). This is useful if you want to limit the number of scans per second (for example, if you're scanning a barcode on a moving object, you may want to limit the number of scans per second).

Emitted values

hasTorch

Returns true or false if camera device reports it's capable of activating the torch (flash).

hasAutofocus

Returns true or false if camera device reports it's capable of autofocus mode.

hasZoom

Returns false or object containing min, max, step set from the supported camera device.

hasFocusDistance

Returns false or object containing min, max, step set from the supported camera device.

videoDevices

Returns an array of camera devices available to the browser (can be used to select the desired camera device via device-index prop).

cameraDetails

Object dump of the library processing to select the ideal camera, switch cameras, and apply constraints (useful for debugging or could be used for enhanced features).

Events

loaded

When the library is loaded and the camera is ready to scan

decode

When a barcode or QR code is scanned. The result is passed as a parameter to the event handler. The result is the text encoded in the barcode or QR code.

result

When a barcode or QR code is scanned. The result is passed as a parameter to the event handler. Below is an example result object from the UPC code of a box of Kellogg's Frosted Mini-Wheats:

{
    "text": "038000199349",
    "rawBytes": null,
    "numBits": 0,
    "resultPoints": [
        {
            "x": 189,
            "y": 240
        },
        {
            "x": 445.5,
            "y": 240
        }
    ],
    "format": 14,
    "timestamp": 1690401753332,
    "resultMetadata": null
}

Barcode formats (from above JSON object format):

• 0 Aztec
• 1 Codabar
• 2 Code 39
• 3 Code 93
• 4 Code 128
• 5 Data Matrix
• 6 EAN-8
• 7 EAN-13
• 8 ITF
• ~~9 MaxiCode~~ (not supported)
• 10 PDF 417
• 11 QR Code
• 12 RSS-14
• ~~13 RSS-Expanded~~ (not supported)
• 14 UPC-A
• 15 UPC-E
• 16 UPC-EAN Extension