![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@teckel/vue-barcode-reader
Advanced tools
A 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
The easiest way to use Vue Barcode Reader is to install it with npm or yarn.
npm install @teckel/vue-barcode-reader --save
Or
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:
<script setup>
import { ref } from 'vue'
import { StreamBarcodeReader } from '@teckel/vue-barcode-reader'
const decodedText = ref('')
const onDecode = (result) => {
decodedText = result
}
const onLoaded = () => {
console.log('loaded')
}
</script>
<template>
<StreamBarcodeReader
torch
no-front-cameras
@decode="onDecode"
@loaded="onLoaded"
/>
<h2>Decoded value: {{ decodedText }}</h2>
</template>
Options API example:
<template>
<StreamBarcodeReader
torch
no-front-cameras
@decode="onDecode"
@loaded="onLoaded"
/>
<h2>Decoded value: {{ decodedText }}</h2>
</template>
<script>
import { StreamBarcodeReader } from '@teckel/vue-barcode-reader'
export default {
components: { StreamBarcodeReader },
data() {
return {
decodedText: '',
}
},
methods: {
onDecode(result) {
this.decodedText = result
},
onLoaded() {
console.log('loaded')
},
}
}
</script>
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.
import { ImageBarcodeReader } from '@teckel/vue-barcode-reader'
In your template you can use this syntax:
<ImageBarcodeReader
@decode="onDecode"
@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.
torch
Activate the torch (flash). Can be set with simply torch
or controlled via :torch="torch"
.
zoom
Set the zoom value (min/max/step available in hasZoom
emitted value).
landscape
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).
autofocus
Defaults to true
, but setting :autofocus="false"
turns off autofocus (manual focus).
focus-distance
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).
no-front-cameras
Only selects from rear-facing cameras. This only works if the device reports the camera's orientation.
device-index
Select the index of the camera device to use (get the camera device array from the videoDevices
emitted value).
msBetweenDecoding
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).
hasTorch
Returns true
or false
if camera device reports it's capable of activating the torch (flash).
hasAutofocus
Returns true
or false
if camera device reports it's capable of autofocus mode.
hasZoom
Returns false
or object containing min
, max
, step
set from the supported camera device.
hasFocusDistance
Returns false
or object containing min
, max
, step
set from the supported camera device.
videoDevices
Returns an array of camera devices available to the browser (can be used to select the desired camera device via device-index
prop).
cameraDetails
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).
loaded
When the library is loaded and the camera is ready to scan
decode
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.
result
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:
{
"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
):
FAQs
Vue 3 Barcodes and QR Codes Scanner
The npm package @teckel/vue-barcode-reader receives a total of 84 weekly downloads. As such, @teckel/vue-barcode-reader popularity was classified as not popular.
We found that @teckel/vue-barcode-reader demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.