@teckel/vue-barcode-reader
Advanced tools
Comparing version 1.1.2 to 1.1.3
{ | ||
"name": "@teckel/vue-barcode-reader", | ||
"version": "1.1.2", | ||
"version": "1.1.3", | ||
"description": "Vue barcode and QR code scanner", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
# Vue Barcode and QR code scanner | ||
[![npm version](https://badgen.net/npm/v/@teckel/vue-barcode-reader)](https://www.npmjs.com/package/@teckel/vue-barcode-reader) | ||
A Vue.js set of components to scan (or upload images) barcodes and QR codes. | ||
## Enhancements in this fork | ||
## Enhancements | ||
@@ -21,4 +19,4 @@ * Fixes ZXing library version issue causing scanning to be very slow. | ||
- Can scan both barcodes and QR codes | ||
- 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. | ||
* Can scan both barcodes and QR codes | ||
* 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. | ||
@@ -62,5 +60,18 @@ ## Demo | ||
```html | ||
<StreamBarcodeReader @decode="onDecode" @loaded="onLoaded" torch></StreamBarcodeReader> | ||
<StreamBarcodeReader | ||
torch | ||
no-front-cameras | ||
@decode="onDecode" | ||
@loaded="onLoaded" | ||
/> | ||
``` | ||
```js | ||
methods: { | ||
onDecode (result) { | ||
console.log(result) | ||
} | ||
} | ||
``` | ||
### Scanning from Image | ||
@@ -71,3 +82,3 @@ | ||
```js | ||
import { ImageBarcodeReader } from "vue-barcode-reader"; | ||
import { ImageBarcodeReader } from "@teckel/vue-barcode-reader"; | ||
``` | ||
@@ -78,10 +89,8 @@ | ||
```html | ||
<ImageBarcodeReader @decode="onDecode" @error="onError"></ImageBarcodeReader> | ||
<ImageBarcodeReader | ||
@decode="onDecode" | ||
@error="onError" | ||
/> | ||
``` | ||
```html | ||
methods: { onDecode (result) { console.log(result) } } | ||
``` | ||
## Props | ||
@@ -91,75 +100,73 @@ | ||
### torch | ||
### `torch` | ||
Activate the torch (flash). Can be set with simply `torch` or controlled via `:torch="torch"`. | ||
### zoom | ||
### `zoom` | ||
Set the zoom value (min/max/step available in `hasZoom` emitted value). | ||
### landscape | ||
### `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 | ||
### `autofocus` | ||
Defaults to `true`, but setting `:autofocus="false"` turns off autofocus (manual focus). | ||
### focusDistance | ||
### `focus-distance` | ||
> Must have `:autofocus="false"` (turning off autofocus and turning on manual focus) for focusDistance to work. | ||
> 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). | ||
### noFrontCameras | ||
### `no-front-cameras` | ||
Only selects from rear-facing cameras. This only works if the device reports the camera's orientation. | ||
### deviceIndex | ||
### `device-index` | ||
Select the index of the camera device to use (get the camera device array from the `videoDevices` emitted value). | ||
## Emitted values | ||
### hasTorch | ||
### `hasTorch` | ||
Returns `true` or `false` if camera device reports it's capable of activating the torch (flash). | ||
### hasAutofocus | ||
### `hasAutofocus` | ||
Returns `true` or `false` if camera device reports it's capable of autofocus mode. | ||
### hasZoom | ||
### `hasZoom` | ||
Returns `false` or object containing `min`, `max`, `step` set from the supported camera decice. | ||
### hasFocusDistance | ||
### `hasFocusDistance` | ||
Returns `false` or object containing `min`, `max`, `step` set from the supported camera decice. | ||
### videoDevices | ||
### `videoDevices` | ||
Returns an array of camera devices available to the browser (can be used to select the desired camera device via `deviceIndex` prop). | ||
Returns an array of camera devices available to the browser (can be used to select the desired camera device via `device-index` prop). | ||
### cameraDetails | ||
### `cameraDetails` | ||
Dump of the camera device details (useful for debugging). | ||
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). | ||
## Events | ||
### loaded | ||
### `loaded` | ||
When the libraty is loaded and the camera is ready to scan | ||
### decode | ||
### `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 | ||
### `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: | ||
``` | ||
```json | ||
{ | ||
@@ -184,1 +191,20 @@ "text": "038000199349", | ||
``` | ||
Barcode formats: | ||
* 0 AZTEC, | ||
* 1 CODABAR, | ||
* 2 CODE_39, | ||
* 3 CODE_93, | ||
* 4 CODE_128, | ||
* 5 DATA_MATRIX, | ||
* 6 EAN_8, | ||
* 7 EAN_13, | ||
* 8 ITF, | ||
* 9 MAXICODE, | ||
* 10 PDF_417, | ||
* 11 QR_CODE, | ||
* 12 RSS_14, | ||
* 13 RSS_EXPANDED, | ||
* 14 UPC_A, | ||
* 15 UPC_E, | ||
* 16 UPC_EAN_EXTENSION |
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
19690
205