vue-zxing-scanner

Vue Barcode and QR code scanner

Benefits

• Can scan both barcodes and 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.

Install

1npm i vue-zxing-scanner

Usage

The Vue Zxing Scanner works out of the box by just including it.

Using 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.

1import Vue from "vue";
2import VueZxingScanner from "vue-zxing-scanner";
3Vue.use(VueZxingScanner);

In your template you can use this syntax:

1<div style="width:300px">
2  <v-zxing
3    @decode="onDecode"
4    @loaded="onLoaded"
5  />
6</div>

1methods: {
2  onDecode (result) {
3    console.log(result)
4  }
5}

Scanning from Image

TODO

Credit

https://github.com/olefirenko/vue-barcode-reader