Vue3 Barcode and QR code scanner
![npm version](https://badgen.net/npm/v/vue-barcode-reader)
A Vue.js set of components to scan barcodes and QR codes.
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.
Demo
Codesandbox
Repository
Installation
The easiest way to use Vue Barcode Reader is to install it from npm or yarn.
npm install vue3-barcode-qrcode-reader --save
Or
yarn add vue3-barcode-qrcode-reader
Vue 2.0 support
For Vue 2.0 compatible version please use the vue-barcode-reader.
Usage
The Vue3 Barcode and QR code 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.
import { StreamQrcodeBarcodeReader, IconCameraVue } from 'vue3-barcode-qrcode-reader'
In your template you can use this syntax:
<StreamQrcodeBarcodeReader
capture="shoot"
@loaded="onLoaded"
@onloading="onLoading"
@result="onResult"
/>
Implementation with slot
<StreamQrcodeBarcodeReader
capture="shoot"
@onloading="onLoading"
@result="onResult"
class="rounded-2xl"
>
<template #actions="{ onCanPlay, isReset, onReset }">
<button class="bg-green-300 px-6 py-1 rounded-md" @click="onCanPlay">Stream</button>
<button v-if="isReset" class="bg-blue-300 px-6 py-1 rounded-md ms-2" @click="onReset()">
Reset
</button>
</template>
<template #action-stop="{ onCanStop }">
<div class="container-btn-stop">
<button class="bg-pink-300 px-6 py-1 rounded-md" @click="onCanStop()">Stop</button>
</div>
</template>
<template #action-facemode="{ onChangeFacemode }">
<div class="container-btn-facemode">
<button
class="bg-red-300 w-10 h-10 p-2 inline-flex justify-center items-center rounded-full"
@click="onChangeFacemode"
>
<IconCameraVue />
</button>
</div>
</template>
</StreamQrcodeBarcodeReader>
Implementation use Ref component
Script
<script setup lang="ts">
import { ref } from 'vue'
import { type Result, StreamQrcodeBarcodeReader } from 'vue3-barcode-qrcode-reader'
const decode = ref<Result | undefined>(undefined)
const isLoading = ref<boolean>(false)
function onResult(data: Result | undefined): void {
decode.value = data
}
function onLoading(loading: boolean) {
isLoading.value = loading
}
const refCamera = ref<InstanceType<typeof StreamQrcodeBarcodeReader> | null>(null)
function handleOnCanPlay() {
refCamera.value?.onCanPlay()
}
function handleOnReset() {
refCamera.value?.onReset()
}
function handleFacemode() {
refCamera.value?.onChangeFacemode()
}
function handleOnCanStop() {
refCamera.value?.onCanStop()
}
</script>
HTML
<template>
<div class="flex justify-center items-center mt-10">
<template v-if="isLoading">
<button class="bg-yellow-300 px-6 py-1 rounded-md me-4" @click="handleFacemode">
Facemode
</button>
<button class="bg-red-300 px-6 py-1 rounded-md" @click="handleOnCanStop">Stop</button>
</template>
<template v-else>
<button class="bg-green-300 px-6 py-1 rounded-md" @click="handleOnCanPlay">Stream</button>
<button v-if="decode" class="bg-blue-300 px-6 py-1 rounded-md" @click="handleOnReset">
Reset
</button>
</template>
</div>
<div class="flex flex-col items-center justify-center mt-6">
<pre>Result:{{ decode }}</pre>
<div class="phone mt-6">
<div class="notch-container">
<div class="notch"></div>
</div>
<div class="content">
<template v-if="!isLoading">
<h1 class="text-xl mb-2">Reader Barcode & QRCode</h1>
<h2 class="text-base text-red-500 capitalize mb-4">mode: shoot</h2>
</template>
<StreamQrcodeBarcodeReader
ref="refCamera"
capture="shoot"
show-on-stream
@onloading="onLoading"
@result="onResult"
/>
</div>
</div>
</div>
</template>
Props
Parameter | value | Type | Description |
---|
show-on-stream | true or false | Boolean | Props for show or hide button stream if you want implementation use Ref component or maybe another case |
capture | "shoot" or "stream" | emun | Props capture |
shoot
When the barcode or QR code is successfully scanned, the scanning process will stop.
stream
When the barcode or QR code is successfully scanned, the scanning process will not stop.
Slot
Parameter | value | Type | Description |
---|
#actions | {onCanPlay, isReset, onReset } | func & boolean & func | onCanPlay func for start stream camera & isReset state for handle show or hide button reset & onReset func for handle reset value Result |
#action-stop | {onCanStop} | func | function for hanlde stop stream camera |
#action-facemode | {onChangeFacemode} | func | function for hanlde switch camera on mobile |
Events
The library emits the following events:
Parameter | type |
---|
loaded | function |
onloading | function(payload) |
result | function(payload) |
loaded
When the libraty is loaded and the camera is ready to scan
onloading
for get value loading from component.
.js
const isLoading = ref(false)
function onLoading(loading) {
isLoading.value = loading
}
.ts
const isLoading = ref<boolean>(false)
function onLoading(loading: boolean) {
isLoading.value = loading
}
result
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:
{
"text": "9578545203541",
"rawBytes": null,
"numBits": 0,
"resultPoints": [
{
"x": 29.5,
"y": 1016
},
{
"x": 394.5,
"y": 1016
}
],
"format": 7,
"timestamp": 1700195512963,
"resultMetadata": null
}
If you want to implement it in your code, you can follow this example:
.js
const resultScan = ref(undefined)
function onResult(result) {
resultScan.value = result
}
.ts
import type { Result } from 'vue-barcode-reader'
const resultScan = ref<Result | undefined>(undefined)
function onResult(result: Result | undefined) {
resultScan.value = result
}
<p>{{ resultScan }}</p>