@teckel/vue-barcode-reader
Advanced tools
@teckel/vue-barcode-reader - npm Package Compare versions
Comparing version 1.1.6 to 1.1.7
| { | ||
| "name": "@teckel/vue-barcode-reader", | ||
| "version": "1.1.6", | ||
| "version": "1.1.7", | ||
| "description": "Vue barcode and QR code scanner", | ||
@@ -5,0 +5,0 @@ "main": "src/index.js", |
@@ -1,16 +0,18 @@ | ||
| # Vue Barcode and QR code scanner | ||
| # Vue 3 Barcode and QR Code Scanner | ||
| A Vue.js set of components to scan (or upload images) barcodes and QR codes. | ||
| A Vue.js set of components to scan barcodes and QR codes (or upload images). | ||
| ## Enhancements | ||
| * Fixes ZXing library version issue causing scanning to be very slow. | ||
| > Offers the following bug fixes, features & improvements over the original (abandoned?) package by [olefirenko](https://github.com/olefirenko/vue-barcode-reader): | ||
| * Fixes ZXing library version issue which greatly increases scanning speed. | ||
| * On startup, the library searches all available rear-facing cameras to find the most ideal camera for barcode scanning, preferably one with torch (flash) and autofocus. It also saves this ideal camera to local storage for faster startup on repeat scans. | ||
| * Adds option to activate the torch (camera flash), which can yield higher barcode scanning speed and accuracy. | ||
| * Adds option to activate the torch (camera flash), which can yield higher barcode scanning speed and accuracy (Android only). | ||
| * Adds option to cycle through the available cameras (if more than one camera is available). | ||
| * Adds option to set orientation to landscape mode, this can also increase the scanning speed and accuracy as there's more pixels in the landscape orientation. | ||
| * Adds option to set orientation to landscape mode, this can also increase the scanning speed and accuracy as there's more horizontal pixels in the landscape orientation. | ||
| * Adds option to control the camera zoom (if camera device reports the user is allowed to set the zoom). | ||
| * Adds option to switch between autofocus and manual focus mode (defaults to autofocus mode if available). | ||
| * Adds option to set the focus distance (if in manual focus mode and camera device supports the feature). | ||
| * Adds option to only select from rear-facing cameras (you probably want only rear-facing cameras when scanning barcodes). | ||
| * Adds option to only select from rear-facing cameras (you probably only want rear-facing cameras when scanning barcodes). | ||
| * Adds option to control the time between decode scans (defaults to 500ms). | ||
@@ -29,3 +31,3 @@ | ||
| The easiest way to use Vue Barcode Reader is to install it from **npm** or **yarn**. | ||
| The easiest way to use Vue Barcode Reader is to install it with **npm** or **yarn**. | ||
@@ -42,6 +44,2 @@ ```sh | ||
| ### Vue 2.0 support | ||
| For Vue 2.0 compatible version please use the `vue-barcode-reader@0.0.3`. | ||
| ## Usage | ||
@@ -51,14 +49,26 @@ | ||
| ### Using Video Camera | ||
| ### Scanning from 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. | ||
| Composition API example: | ||
| ```js | ||
| import { StreamBarcodeReader } from "@teckel/vue-barcode-reader"; | ||
| ``` | ||
| <script setup> | ||
| import { ref } from 'vue' | ||
| import { StreamBarcodeReader } from '@teckel/vue-barcode-reader' | ||
| In your template you can use this syntax: | ||
| const decodedText = ref('') | ||
| ```html | ||
| <StreamBarcodeReader | ||
| const onDecode = (result) => { | ||
| decodedText = result | ||
| } | ||
| const onLoaded = () => { | ||
| console.log('loaded') | ||
| } | ||
| </script> | ||
| <template> | ||
| <StreamBarcodeReader | ||
| torch | ||
@@ -68,11 +78,40 @@ no-front-cameras | ||
| @loaded="onLoaded" | ||
| /> | ||
| /> | ||
| <h2>Decoded value: {{ decodedText }}</h2> | ||
| </template> | ||
| ``` | ||
| Options API example: | ||
| ```js | ||
| methods: { | ||
| onDecode (result) { | ||
| console.log(result) | ||
| <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> | ||
| ``` | ||
@@ -85,3 +124,3 @@ | ||
| ```js | ||
| import { ImageBarcodeReader } from "@teckel/vue-barcode-reader"; | ||
| import { ImageBarcodeReader } from '@teckel/vue-barcode-reader' | ||
| ``` | ||
@@ -93,4 +132,4 @@ | ||
| <ImageBarcodeReader | ||
| @decode="onDecode" | ||
| @error="onError" | ||
| @decode="onDecode" | ||
| @error="onError" | ||
| /> | ||
@@ -97,0 +136,0 @@ ``` |
Sorry, the diff of this file is not supported yet
New alerts
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
Fixed alerts
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
Improved metrics
- Total package byte prevSize
- increased by4.13%
21109
- Number of lines in readme file
- increased by18.48%
250
No dependency changes