![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@teckel/vue-barcode-reader
Advanced tools
Readme
A Vue.js set of components to scan (or upload images) barcodes and QR codes.
The easiest way to use Vue Barcode Reader is to install it from npm or yarn.
npm install @teckel/vue-barcode-reader --save
Or
yarn add @teckel/vue-barcode-reader
For Vue 2.0 compatible version please use the vue-barcode-reader@0.0.3
.
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.
import { StreamBarcodeReader } from "@teckel/vue-barcode-reader";
In your template you can use this syntax:
<StreamBarcodeReader
torch
no-front-cameras
@decode="onDecode"
@loaded="onLoaded"
/>
methods: {
onDecode (result) {
console.log(result)
}
}
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).
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 decice.
hasFocusDistance
Returns false
or object containing min
, max
, step
set from the supported camera decice.
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 libraty 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:
FAQs
Vue barcode and QR code scanner
The npm package @teckel/vue-barcode-reader receives a total of 62 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 1 open source maintainer 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.