├── .gitignore
├── src
    ├── index.js
    └── components
    │   ├── ImageBarcodeReader.vue
    │   └── StreamBarcodeReader.vue
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import ImageBarcodeReader from "./components/ImageBarcodeReader.vue";
2 | import StreamBarcodeReader from "./components/StreamBarcodeReader.vue";
3 | 
4 | export { ImageBarcodeReader, StreamBarcodeReader };
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-barcode-reader",
 3 |   "version": "1.0.3",
 4 |   "description": "Vue barcodes and QR codes scanner",
 5 |   "main": "src/index.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git+https://olefirenko@github.com/olefirenko/vue-barcode-reader.git"
12 |   },
13 |   "keywords": [
14 |     "vue",
15 |     "barcode",
16 |     "qrcode",
17 |     "zxing"
18 |   ],
19 |   "author": "olefirenko <dmitriy.olefirenko@gmail.com>",
20 |   "license": "MIT",
21 |   "bugs": {
22 |     "url": "https://github.com/olefirenko/vue-barcode-reader/issues"
23 |   },
24 |   "homepage": "https://github.com/olefirenko/vue-barcode-reader#readme",
25 |   "dependencies": {
26 |     "@zxing/library": "^0.19.1"
27 |   }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/components/ImageBarcodeReader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <input @change="onChangeInput" type="file" name="image" accept="image/*" capture="environment" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import { BrowserMultiFormatReader } from "@zxing/library";
 7 | 
 8 | export default {
 9 |   name: "image-barcode-reader",
10 | 
11 |   data() {
12 |     return {
13 |       codeReader: new BrowserMultiFormatReader(),
14 |     };
15 |   },
16 | 
17 |   methods: {
18 |     onChangeInput(e) {
19 |       const files = e.target.files || e.dataTransfer.files;
20 |       if (!files.length) return;
21 | 
22 |       const reader = new FileReader();
23 |       reader.onload = this.processFile;
24 |       reader.readAsDataURL(files[0]);
25 |     },
26 | 
27 |     processFile(e) {
28 |       this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`;
29 | 
30 |       this.codeReader
31 |         .decodeFromImage("image")
32 |         .then((result) => {
33 |           this.$emit("decode", result.text);
34 |           this.$emit("result", result);
35 |         })
36 |         .catch((error) => this.$emit("error", error));
37 |     },
38 |   },
39 | };
40 | </script>
41 | 


--------------------------------------------------------------------------------
/src/components/StreamBarcodeReader.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="scanner-container">
  3 |     <div v-show="!isLoading">
  4 |       <video poster="data:image/gif,AAAA" ref="scanner"></video>
  5 |       <div class="overlay-element"></div>
  6 |       <div class="laser"></div>
  7 |     </div>
  8 |   </div>
  9 | </template>
 10 | 
 11 | <script>
 12 | import { BrowserMultiFormatReader, Exception } from "@zxing/library";
 13 | 
 14 | export default {
 15 |   name: "stream-barcode-reader",
 16 | 
 17 |   data() {
 18 |     return {
 19 |       isLoading: true,
 20 |       codeReader: new BrowserMultiFormatReader(),
 21 |       isMediaStreamAPISupported: navigator && navigator.mediaDevices && "enumerateDevices" in navigator.mediaDevices,
 22 |     };
 23 |   },
 24 | 
 25 |   mounted() {
 26 |     if (!this.isMediaStreamAPISupported) {
 27 |       throw new Exception("Media Stream API is not supported");
 28 |       return;
 29 |     }
 30 | 
 31 |     this.start();
 32 |     this.$refs.scanner.oncanplay = (event) => {
 33 |       this.isLoading = false;
 34 |       this.$emit("loaded");
 35 |     };
 36 |   },
 37 | 
 38 |   beforeUnmount() {
 39 |     this.codeReader.reset();
 40 |   },
 41 | 
 42 |   methods: {
 43 |     start() {
 44 |       this.codeReader.decodeFromVideoDevice(undefined, this.$refs.scanner, (result, err) => {
 45 |         if (result) {
 46 |           this.$emit("decode", result.text);
 47 |           this.$emit("result", result);
 48 |         }
 49 |       });
 50 |     },
 51 |   },
 52 | };
 53 | </script>
 54 | 
 55 | <style scoped>
 56 | video {
 57 |   max-width: 100%;
 58 |   max-height: 100%;
 59 | }
 60 | .scanner-container {
 61 |   position: relative;
 62 | }
 63 | 
 64 | .overlay-element {
 65 |   position: absolute;
 66 |   top: 0;
 67 |   width: 100%;
 68 |   height: 99%;
 69 |   background: rgba(30, 30, 30, 0.5);
 70 | 
 71 |   -webkit-clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 100%, 100% 100%, 100% 0%);
 72 |   clip-path: polygon(0% 0%, 0% 100%, 20% 100%, 20% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 100%, 100% 100%, 100% 0%);
 73 | }
 74 | 
 75 | .laser {
 76 |   width: 60%;
 77 |   margin-left: 20%;
 78 |   background-color: tomato;
 79 |   height: 1px;
 80 |   position: absolute;
 81 |   top: 40%;
 82 |   z-index: 2;
 83 |   box-shadow: 0 0 4px red;
 84 |   -webkit-animation: scanning 2s infinite;
 85 |   animation: scanning 2s infinite;
 86 | }
 87 | @-webkit-keyframes scanning {
 88 |   50% {
 89 |     -webkit-transform: translateY(75px);
 90 |     transform: translateY(75px);
 91 |   }
 92 | }
 93 | @keyframes scanning {
 94 |   50% {
 95 |     -webkit-transform: translateY(75px);
 96 |     transform: translateY(75px);
 97 |   }
 98 | }
 99 | </style>
100 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue Barcode and QR code scanner
  2 | 
  3 | [![npm version](https://badgen.net/npm/v/vue-barcode-reader)](https://www.npmjs.com/package/vue-barcode-reader) [![sponsored_by](https://badgen.net/badge/sponsored%20by/%F0%9F%A4%96Easy-Peasy.AI/f2a)](https://Easy-Peasy.AI/?utm_source=npm&utm_medium=badge&utm_campaign=vue_barcode_reader)
  4 | 
  5 | A Vue.js set of components to scan (or upload images) barcodes and QR codes.
  6 | 
  7 | ## Benefits
  8 | 
  9 | - Can scan both barcodes and QR codes
 10 | - Uses [ZXing](https://github.com/zxing-js/library) ("zebra crossing"), an open-source, multi-format 1D/2D barcode image processing library implemented in Java, with ports to other languages.
 11 | 
 12 | ## Demo
 13 | 
 14 | [Demo repository](https://github.com/olefirenko/vue-barcode-reader-example) | [Codesandbox](https://codesandbox.io/s/vue-barcode-reader-demo-guj3f) | [Vercel](https://vue-barcode-reader-example-2iiz1fhbf-olefirenko.vercel.app/) | [Netlify](https://stupefied-meitner-58f299.netlify.app/)
 15 | 
 16 | Or you can check the library in action on the website [parceltrackingapp.com](https://parceltrackingapp.com/en).
 17 | 
 18 | ## Installation
 19 | 
 20 | The easiest way to use Vue Barcode Reader is to install it from **npm** or **yarn**.
 21 | 
 22 | ```sh
 23 | npm install vue-barcode-reader --save
 24 | ```
 25 | 
 26 | Or
 27 | 
 28 | ```sh
 29 | yarn add vue-barcode-reader
 30 | ```
 31 | 
 32 | ### Vue 2.0 support
 33 | 
 34 | For Vue 2.0 compatible version please use the `vue-barcode-reader@0.0.3`.
 35 | 
 36 | ### TypeScript
 37 | 
 38 | There are type definitions available for those who work with TypeScript.
 39 | 
 40 | ```sh
 41 | npm install @types/vue-barcode-reader --save-dev
 42 | ```
 43 | 
 44 | Or
 45 | 
 46 | ```sh
 47 | yarn add -D @types/vue-barcode-reader
 48 | ```
 49 | 
 50 | ## Usage
 51 | 
 52 | The Vue Barcode Reader works out of the box by just including it.
 53 | 
 54 | ### Using Video Camera
 55 | 
 56 | Once a stream from the users camera is loaded, it's displayed and continuously scanned for barcodes. Results are indicated by the decode event.
 57 | 
 58 | ```js
 59 | import { StreamBarcodeReader } from "vue-barcode-reader";
 60 | ```
 61 | 
 62 | In your template you can use this syntax:
 63 | 
 64 | ```html
 65 | <StreamBarcodeReader @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
 66 | ```
 67 | 
 68 | ### Scanning from Image
 69 | 
 70 | 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.
 71 | 
 72 | ```js
 73 | import { ImageBarcodeReader } from "vue-barcode-reader";
 74 | ```
 75 | 
 76 | In your template you can use this syntax:
 77 | 
 78 | ```html
 79 | <ImageBarcodeReader @decode="onDecode" @error="onError"></ImageBarcodeReader>
 80 | ```
 81 | 
 82 | ```html
 83 | methods: { onDecode (result) { console.log(result) } }
 84 | ```
 85 | 
 86 | ## Events
 87 | 
 88 | The library emits the following events:
 89 | 
 90 | ### loaded
 91 | 
 92 | When the libraty is loaded and the camera is ready to scan
 93 | 
 94 | ### decode
 95 | 
 96 | 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.
 97 | 
 98 | ### result
 99 | 
100 | When a barcode or QR code is scanned. The result is passed as a parameter to the event handler. The result is the object with the following properties:
101 | 


--------------------------------------------------------------------------------