Skip to content

Commit 895dfb5

Browse files
olefirenkoolefirenko
authored
Merge pull request #43 from olefirenko/feature/emit-whole-result-object
Emit whole result object
2 parents 211035c + ca3c4e6 commit 895dfb5

File tree

3 files changed

+108
-124
lines changed

3 files changed

+108
-124
lines changed

‎README.md‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
# Vue Barcode and QR code scanner
22

3-
> ⚠️ Hello everyone! My name is Dmytro and I am from 🇺🇦 Ukraine. People in Ukraine **ARE DYING RIGHT NOW** because of 🇷🇺 Russia Agression! Please help Ukraine. Donate if you can to: [UKRAINE’S DEFENDERS](https://war.ukraine.ua/donate/), [CHARITABLE FOUNDATION "COME BACK ALIVE"](https://savelife.in.ua/en/donate/). Help to stop Russian aggression 🙏! #StandWithUkraine
4-
> [🇺🇦 IT Army of Ukraine](https://t.me/itarmyofukraine2022)
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%96kopiAI.com/f2a)](https://kopiai.com/?utm_source=npm&utm_medium=badge&utm_campaign=vue_barcode_reader)
54

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

@@ -83,3 +82,19 @@ In your template you can use this syntax:
8382
```html
8483
methods: { onDecode (result) { console.log(result) } }
8584
```
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:

‎src/components/ImageBarcodeReader.vue‎

Lines changed: 26 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,40 @@
11
<template>
2-
<input
3-
@change="onChangeInput"
4-
type="file"
5-
name="image"
6-
accept="image/*"
7-
capture="environment"
8-
/>
2+
<input @change="onChangeInput" type="file" name="image" accept="image/*" capture="environment" />
93
</template>
104

115
<script>
126
import { BrowserMultiFormatReader } from "@zxing/library";
137
148
export default {
15-
name: "image-barcode-reader",
9+
name: "image-barcode-reader",
1610
17-
data() {
18-
return {
19-
codeReader: new BrowserMultiFormatReader()
20-
};
21-
},
11+
data() {
12+
return {
13+
codeReader: new BrowserMultiFormatReader(),
14+
};
15+
},
2216
23-
methods: {
24-
onChangeInput(e) {
25-
const files = e.target.files || e.dataTransfer.files;
26-
if (!files.length) return;
17+
methods: {
18+
onChangeInput(e) {
19+
const files = e.target.files || e.dataTransfer.files;
20+
if (!files.length) return;
2721
28-
const reader = new FileReader();
29-
reader.onload = this.processFile;
30-
reader.readAsDataURL(files[0]);
31-
},
22+
const reader = new FileReader();
23+
reader.onload = this.processFile;
24+
reader.readAsDataURL(files[0]);
25+
},
3226
33-
processFile(e) {
34-
this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`;
27+
processFile(e) {
28+
this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`;
3529
36-
this.codeReader
37-
.decodeFromImage("image")
38-
.then(result => this.$emit("decode", result.text))
39-
.catch(error => this.$emit("error", error));
40-
}
41-
}
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+
},
4239
};
4340
</script>

‎src/components/StreamBarcodeReader.vue‎

Lines changed: 65 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,99 @@
11
<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>
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>
87
</div>
8+
</div>
99
</template>
1010

1111
<script>
1212
import { BrowserMultiFormatReader, Exception } from "@zxing/library";
1313
1414
export default {
15-
name: "stream-barcode-reader",
15+
name: "stream-barcode-reader",
1616
17-
data() {
18-
return {
19-
isLoading: true,
20-
codeReader: new BrowserMultiFormatReader(),
21-
isMediaStreamAPISupported:
22-
navigator &&
23-
navigator.mediaDevices &&
24-
"enumerateDevices" in navigator.mediaDevices
25-
};
26-
},
17+
data() {
18+
return {
19+
isLoading: true,
20+
codeReader: new BrowserMultiFormatReader(),
21+
isMediaStreamAPISupported: navigator && navigator.mediaDevices && "enumerateDevices" in navigator.mediaDevices,
22+
};
23+
},
2724
28-
mounted() {
29-
if (!this.isMediaStreamAPISupported) {
30-
throw new Exception("Media Stream API is not supported");
31-
return;
32-
}
25+
mounted() {
26+
if (!this.isMediaStreamAPISupported) {
27+
throw new Exception("Media Stream API is not supported");
28+
return;
29+
}
3330
34-
this.start();
35-
this.$refs.scanner.oncanplay = event => {
36-
this.isLoading = false;
37-
this.$emit("loaded");
38-
};
39-
},
31+
this.start();
32+
this.$refs.scanner.oncanplay = (event) => {
33+
this.isLoading = false;
34+
this.$emit("loaded");
35+
};
36+
},
4037
41-
beforeUnmount() {
42-
this.codeReader.reset();
43-
},
38+
beforeUnmount() {
39+
this.codeReader.reset();
40+
},
4441
45-
methods: {
46-
start() {
47-
this.codeReader.decodeFromVideoDevice(
48-
undefined,
49-
this.$refs.scanner,
50-
(result, err) => {
51-
if (result) {
52-
this.$emit("decode", result.text);
53-
}
54-
}
55-
);
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);
5648
}
57-
}
49+
});
50+
},
51+
},
5852
};
5953
</script>
6054

6155
<style scoped>
6256
video {
63-
max-width: 100%;
64-
max-height: 100%;
57+
max-width: 100%;
58+
max-height: 100%;
6559
}
6660
.scanner-container {
67-
position: relative;
61+
position: relative;
6862
}
6963
7064
.overlay-element {
71-
position: absolute;
72-
top: 0;
73-
width: 100%;
74-
height: 99%;
75-
background: rgba(30, 30, 30, 0.5);
65+
position: absolute;
66+
top: 0;
67+
width: 100%;
68+
height: 99%;
69+
background: rgba(30, 30, 30, 0.5);
7670
77-
-webkit-clip-path: polygon(
78-
0% 0%,
79-
0% 100%,
80-
20% 100%,
81-
20% 20%,
82-
80% 20%,
83-
80% 80%,
84-
20% 80%,
85-
20% 100%,
86-
100% 100%,
87-
100% 0%
88-
);
89-
clip-path: polygon(
90-
0% 0%,
91-
0% 100%,
92-
20% 100%,
93-
20% 20%,
94-
80% 20%,
95-
80% 80%,
96-
20% 80%,
97-
20% 100%,
98-
100% 100%,
99-
100% 0%
100-
);
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%);
10173
}
10274
10375
.laser {
104-
width: 60%;
105-
margin-left: 20%;
106-
background-color: tomato;
107-
height: 1px;
108-
position: absolute;
109-
top: 40%;
110-
z-index: 2;
111-
box-shadow: 0 0 4px red;
112-
-webkit-animation: scanning 2s infinite;
113-
animation: scanning 2s infinite;
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;
11486
}
11587
@-webkit-keyframes scanning {
116-
50% {
117-
-webkit-transform: translateY(75px);
118-
transform: translateY(75px);
119-
}
88+
50% {
89+
-webkit-transform: translateY(75px);
90+
transform: translateY(75px);
91+
}
12092
}
12193
@keyframes scanning {
122-
50% {
123-
-webkit-transform: translateY(75px);
124-
transform: translateY(75px);
125-
}
94+
50% {
95+
-webkit-transform: translateY(75px);
96+
transform: translateY(75px);
97+
}
12698
}
12799
</style>

0 commit comments

Comments
 (0)