Vue 3 Barcodes and QR Codes Scanner
npm install @teckel/vue-barcode-readerA Vue.js set of components to scan barcodes and QR codes (or upload images).
> 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).
* 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.
The easiest way to use Vue Barcode Reader is to install it with npm or yarn.
``sh`
npm install @teckel/vue-barcode-reader --save
Or
`sh`
yarn add @teckel/vue-barcode-reader
The Vue Barcode Reader works out of the box by just including it.
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:
`js
no-front-cameras
@decode="onDecode"
@loaded="onLoaded"
/>
Decoded value: {{ decodedText }}
`
Options API example:
`js
no-front-cameras
@decode="onDecode"
@loaded="onLoaded"
/>
Decoded value: {{ decodedText }}
`
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.
`js`
import { ImageBarcodeReader } from '@teckel/vue-barcode-reader'
In your template you can use this syntax:
`html`
@error="onError"
/>
> 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.
Activate the torch (flash). Can be set with simply torch or controlled via :torch="torch".
Set the zoom value (min/max/step available in hasZoom emitted value).
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).
Defaults to true, but setting :autofocus="false" turns off autofocus (manual focus).
> 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).
Only selects from rear-facing cameras. This only works if the device reports the camera's orientation.
Select the index of the camera device to use (get the camera device array from the videoDevices emitted value).
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).
Returns true or false if camera device reports it's capable of activating the torch (flash).
Returns true or false if camera device reports it's capable of autofocus mode.
Returns false or object containing min, max, step set from the supported camera device.
Returns false or object containing min, max, step set from the supported camera device.
Returns an array of camera devices available to the browser (can be used to select the desired camera device via device-index prop).
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).
When the library is loaded and the camera is ready to scan
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.
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:
`json`
{
"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