Gathering detailed insights and metrics for @blue-performance/capacitor-barcode-scanner
Gathering detailed insights and metrics for @blue-performance/capacitor-barcode-scanner
Installations
npm install @blue-performance/capacitor-barcode-scannerDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Node Version
16.15.1
NPM Version
8.19.0
Score
72.9
Supply Chain
99.4
Quality
75.7
Maintenance
100
Vulnerability
99.6
License
Releases
Unable to fetch releases
Languages
6
Java
Swift
TypeScript
Objective-C
Ruby
JavaScript
Java (42.25%)
Swift (40.91%)
TypeScript (12.03%)
Objective-C (2.4%)
Ruby (1.63%)
JavaScript (0.78%)
Developer
BluePerformance
Download Statistics
Total Downloads
1,888
Last Day
5
Last Week
6
Last Month
17
Last Year
369
GitHub Statistics
MIT License
2 Stars
92 Commits
1 Watchers
4 Branches
16 Contributors
Updated on Jul 25, 2023
Bundle Size
982.00 B
Minified
534.00 B
Minified + Gzipped
Maintainers
1
Package Meta Information
Latest Version
3.0.11
Package Id
@blue-performance/capacitor-barcode-scanner@3.0.11
Unpacked Size
111.18 kB
Size
24.42 kB
File Count
28
NPM Version
8.19.0
Node Version
16.15.1
Published on
Mar 30, 2023
Total Downloads
Cumulative downloads
Total Downloads
1,888
Last Day
0%
5
Compared to previous day
Last Week
500%
6
Compared to previous week
Last Month
-80.5%
17
Compared to previous month
Last Year
-41%
369
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Barcode Scanner
@blue-performance/capacitor-barcode-scanner
A fast and efficient (QR) barcode scanner for Capacitor.
Table of Contents
About
Supported use cases
- Scanning QR Codes
- Taking photos
Supported barcodes
On iOS this library makes use of Apple's own AVFoundation. This means this list of barcodes should be supported.
On Android this library uses zxing-android-embedded which uses zxing under the hood. That means this list of barcodes is supported.
Note on supported Capacitor versions
v3.x supports Capacitor v4.x
v2.x supports Capacitor v3.x
v1.x supports Capacitor v2.x
All releases of this package can be found on npm and on GitHub Releases
Installation
1npm install @blue-performance/capacitor-barcode-scanner 2npx cap sync
iOS
For iOS you need to set a usage description in your info.plist file.
This can be done by either adding it to the Source Code directly or by using Xcode Property List inspector.
Adding it to the source code directly
- Open up the Info.plist (in Xcode right-click > Open As > Source Code)
- With
<dict></dict>change the following
1<dict> 2+ <key>NSCameraUsageDescription</key> 3+ <string>To be able to scan barcodes</string> 4</dict>
NOTE: "To be able to scan barcodes" can be substituted for anything you like.
Adding it by using Xcode Property List inspector
- Open up the Info.plist in Xcode (right-click > Open As > Property List)
- Next to "Information Property List" click on the tiny
+button. - Under
key, type "Privacy - Camera Usage Description" - Under
value, type "To be able to scan barcodes"
NOTE: "To be able to scan barcodes" can be substituted for anything you like.
More info here: https://developer.apple.com/documentation/bundleresources/information_property_list/nscamerausagedescription
Android
Within your AndroidManifest.xml file, change the following:
1<?xml version="1.0" encoding="utf-8"?> 2<manifest 3 xmlns:android="http://schemas.android.com/apk/res/android" 4+ xmlns:tools="http://schemas.android.com/tools" 5 package="com.example"> 6 7 <application 8+ android:hardwareAccelerated="true" 9 > 10 </application> 11 12+ <uses-permission android:name="android.permission.CAMERA" /> 13 14+ <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" /> 15</manifest>
Usage
The complete API reference can be found here.
Scanning a (QR) barcode can be as simple as:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner';
2
3const startScan = async () => {
4 // Check camera permission
5 // This is just a simple example, check out the better checks below
6 await BarcodeScanner.checkPermission({ force: true });
7
8 // make background of WebView transparent
9 // note: if you are using ionic this might not be enough, check below
10 BarcodeScanner.hideBackground();
11
12 const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
13
14 // if the result has content
15 if (result.hasContent) {
16 console.log(result.content); // log the raw scanned content
17 }
18};Opacity of the WebView
hideBackground() will make the <html> element transparent by adding background: 'transparent'; to the style attribute.
If you are using Ionic you need to set some css variables as well, check here
If you still cannot see the camera view, check here
Stopping a scan
After startScan() is resolved, the Scanner View will be automatically destroyed to save battery. But if you want to cancel the scan before startScan() is resolved (AKA no code has been recognized yet), you will have to call stopScan() manually. Example:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner';
2
3const stopScan = () => {
4 BarcodeScanner.showBackground();
5 BarcodeScanner.stopScan();
6};It is also important to think about cases where a users hits some sort of a back button (either hardware or software). It is advised to call stopScan() in these types of situations as well.
In Vue.js you could do something like this in a specific view where you use the scanner:
1<script> 2import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 3 4export default { 5 methods: { 6 stopScan() { 7 BarcodeScanner.showBackground(); 8 BarcodeScanner.stopScan(); 9 }, 10 }, 11 12 deactivated() { 13 this.stopScan(); 14 }, 15 16 beforeDestroy() { 17 this.stopScan(); 18 }, 19}; 20</script>
Preparing a scan
To boost performance and responsiveness (by just a bit), a prepare() method is available. If you know your script will call startScan() sometime very soon, you can call prepare() to make startScan() work even faster.
For example:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 2 3const prepare = () => { 4 BarcodeScanner.prepare(); 5}; 6 7const startScan = async () => { 8 BarcodeScanner.hideBackground(); 9 const result = await BarcodeScanner.startScan(); 10 if (result.hasContent) { 11 console.log(result.content); 12 } 13}; 14 15const stopScan = () => { 16 BarcodeScanner.showBackground(); 17 BarcodeScanner.stopScan(); 18}; 19 20const askUser = () => { 21 prepare(); 22 23 const c = confirm('Do you want to scan a barcode?'); 24 25 if (c) { 26 startScan(); 27 } else { 28 stopScan(); 29 } 30}; 31 32askUser();
This is fully optional and would work the same as:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 2 3const startScan = async () => { 4 BarcodeScanner.hideBackground(); 5 const result = await BarcodeScanner.startScan(); 6 if (result.hasContent) { 7 console.log(result.content); 8 } 9}; 10 11const askUser = () => { 12 const c = confirm('Do you want to scan a barcode?'); 13 14 if (c) { 15 startScan(); 16 } 17}; 18 19askUser();
The latter will just appear a little slower to the user.
Permissions
This plugin does not automatically handle permissions. But the plugin does have a utility method to check and request the permission. You will have to request the permission from JavaScript. A simple example follows:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 2 3const checkPermission = async () => { 4 // check or request permission 5 const status = await BarcodeScanner.checkPermission({ force: true }); 6 7 if (status.granted) { 8 // the user granted permission 9 return true; 10 } 11 12 return false; 13};
A more detailed and more UX-optimized example:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 2 3const didUserGrantPermission = async () => { 4 // check if user already granted permission 5 const status = await BarcodeScanner.checkPermission({ force: false }); 6 7 if (status.granted) { 8 // user granted permission 9 return true; 10 } 11 12 if (status.denied) { 13 // user denied permission 14 return false; 15 } 16 17 if (status.asked) { 18 // system requested the user for permission during this call 19 // only possible when force set to true 20 } 21 22 if (status.neverAsked) { 23 // user has not been requested this permission before 24 // it is advised to show the user some sort of prompt 25 // this way you will not waste your only chance to ask for the permission 26 const c = confirm('We need your permission to use your camera to be able to scan barcodes'); 27 if (!c) { 28 return false; 29 } 30 } 31 32 if (status.restricted || status.unknown) { 33 // ios only 34 // probably means the permission has been denied 35 return false; 36 } 37 38 // user has not denied permission 39 // but the user also has not yet granted the permission 40 // so request it 41 const statusRequest = await BarcodeScanner.checkPermission({ force: true }); 42 43 if (statusRequest.asked) { 44 // system requested the user for permission during this call 45 // only possible when force set to true 46 } 47 48 if (statusRequest.granted) { 49 // the user did grant the permission now 50 return true; 51 } 52 53 // user did not grant the permission, so he must have declined the request 54 return false; 55}; 56 57didUserGrantPermission();
If a user denied the permission for good, status.denied will be set to true. On Android this will happen only when the user checks the box never ask again. To get the permission anyway you will have to redirect the user to the settings of the app. This can be done simply be doing the following:
1import { BarcodeScanner } from '@blue-performance/capacitor-barcode-scanner'; 2 3const checkPermission = async () => { 4 const status = await BarcodeScanner.checkPermission(); 5 6 if (status.denied) { 7 // the user denied permission for good 8 // redirect user to app settings if they want to grant it anyway 9 const c = confirm('If you want to grant permission for using your camera, enable it in the app settings.'); 10 if (c) { 11 BarcodeScanner.openAppSettings(); 12 } 13 } 14};
Target only specific barcodes
You can setup the scanner to only recognize specific types of barcodes like this:
1import { BarcodeScanner, SupportedFormat } from '@blue-performance/capacitor-barcode-scanner'; 2 3BarcodeScanner.startScan({ targetedFormats: [SupportedFormat.QR_CODE] }); // this will now only target QR-codes
If targetedFormats is not specified or left empty, all types of barcodes will be targeted.
Targeting only specific types can have the following benefits:
- Improved performance (since the decoder only has to look for the specified barcodes)
- Improved User Experience (since scanning a barcode that is not supported by your case, will not work)
The following types are supported:
| Category | Type | Android | iOS |
|---|---|---|---|
| 1D Product | |||
| UPC_A | ✔ | ✔** | |
| UPC_E | ✔ | ✔ | |
| UPC_EAN_EXTENSION | ✔ | ✖ | |
| EAN_8 | ✔ | ✔ | |
| EAN_13 | ✔ | ✔ | |
| 1D Industrial | |||
| CODE_39 | ✔ | ✔ | |
| CODE_39_MOD_43 | ✖ | ✔ | |
| CODE_93 | ✔ | ✔ | |
| CODE_128 | ✔ | ✔ | |
| CODABAR | ✔ | ✖ | |
| ITF | ✔ | ✔ | |
| ITF_14 | ✖ | ✔ | |
| 2D | |||
| AZTEC | ✔ | ✔ | |
| DATA_MATRIX | ✔ | ✔ | |
| MAXICODE | ✔ | ✖ | |
| PDF_417 | ✔ | ✔ | |
| QR_CODE | ✔ | ✔ | |
| RSS_14 | ✔ | ✖ | |
| RSS_EXPANDED | ✔ | ✖ |
** UPC_A is supported on iOS, but according to the offical Apple docs it is part of EAN_13. So you should specify EAN_13 to be able to scan this. If you want to distinguish them from one another, you should manually do so after getting the result.
Troubleshooting
Ionic CSS variables
Ionic will add additional CSS variables which will prevent the scanner from showing up. To fix this issue add the following snippet at the end of your global css.
1body.scanner-active { 2 --background: transparent; 3 --ion-background-color: transparent; 4}
Once this is done, you need to add this class to the body before using the scanner.
1document.querySelector('body').classList.add('scanner-active');
After your done with your scanning work, you can simply remove this class.
1document.querySelector('body').classList.remove('scanner-active');
I have a Error: Plugin BarcodeScanner does not respond to method call error message on iOS
In Xcode click on Product > Clean Build Folder and try to build again.
I have a Cannot resolve symbol BarcodeScanner error message in Android Studio
In Android Studio click File > Sync Project with Gradle Files and try to build again.
The scanner view does not show up
If you cannot see the scanner in your viewport, please follow these steps:
- Check if camera permissions are granted properly
- Check if the scanner element does appear inside the DOM, somewhere within the
bodytag - Check if some DOM elements are rendered on top of the scanner
I do not find the scanner in the DOM
This should appear in the DOM when running the BarcodeScanner.startScan() method.
1<body> 2 <!-- ... --> 3 <div style="position: absolute; left: 0px; top: -2px; height: 1px; overflow: hidden; visibility: hidden; width: 1px;"> 4 <span 5 style="position: absolute; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;" 6 >BESbswy</span 7 > 8 </div> 9 <!-- ... --> 10</body>
If it does not, it may be a bug due to the component being loaded to deep inside the DOM tree.
You can try to see if the plugin is working properly by adding the following in your app.component.ts file.
1BarcodeScanner.hideBackground(); 2const result = await BarcodeScanner.startScan();
It doesn't appear
It could mean that you have missed a step by the plugin configuration.
I did the configuration correctly
please open an issue
TODO
A non-exhaustive list of todos:
- Support for switching between cameras
- Support for web
No vulnerabilities found.
No security vulnerabilities found.