@openit/capacitor-community-barcode-scanner
Advanced tools
A fast and efficient (QR) barcode scanner for Capacitor - forked for OpenIT
@capacitor-community/barcode-scanner
A fast and efficient (QR) barcode scanner for Capacitor.
| Maintainer | GitHub | Social |
|---|---|---|
| tafelnl | tafelnl |
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.
npm install @capacitor-community/barcode-scanner
npx cap sync
On iOS, no further steps are needed.
On Android, register the plugin in your main activity:
import com.dutchconcepts.capacitor.barcodescanner.BarcodeScanner;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// Initializes the Bridge
this.init(
savedInstanceState,
new ArrayList<Class<? extends Plugin>>() {
{
// Additional plugins you've installed go here
// Ex: add(TotallyAwesomePlugin.class);
add(BarcodeScanner.class);
}
}
);
}
}
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
<dict></dict> change the following<dict>
+ <key>NSCameraUsageDescription</key>
+ <string>To be able to scan barcodes</string>
</dict>
NOTE: "To be able to scan barcodes" can be substituted for anything you like.
Adding it by using Xcode Property List inspector
+ button.key, type "Privacy - Camera Usage Description"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
Within your AndroidManifest.xml file, change the following:
<?xml version="1.0" encoding="utf-8"?>
<manifest
xmlns:android="http://schemas.android.com/apk/res/android"
+ xmlns:tools="http://schemas.android.com/tools"
package="com.example">
<application
+ android:hardwareAccelerated="true"
>
</application>
+ <uses-permission android:name="android.permission.CAMERA" />
+ <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>
Scanning a (QR) barcode can be as simple as:
import { Plugins } from '@capacitor/core';
const startScan = async () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.hideBackground(); // make background of WebView transparent
const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
// if the result has content
if (result.hasContent) {
console.log(result.content); // log the raw scanned content
}
};
Because of the fact that the Scanner View will be rendered behind the WebView, you will have to call hideBackground() to make the WebView and the <html> element transparent. Every other element that needs transparency, you will have to handle yourself.
The <html> element is made transparent by adding background: 'transparent'; to the style="" attribute. So in theory it is possible that this is overwritten by some CSS property in your setup. Because this plugins does not aim to fix every single scenario out there, you will have to think of a workaround for this yourself, if this applies to you (probably not).
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:
import { Plugins } from '@capacitor/core';
const stopScan = () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
};
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:
<script>
import { Plugins } from '@capacitor/core';
export default {
methods: {
stopScan() {
const { BarcodeScanner } = Plugins;
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
},
},
deactivated() {
this.stopScan();
},
beforeDestroy() {
this.stopScan();
},
};
</script>
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:
import { Plugins } from '@capacitor/core';
const prepare = () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.prepare();
};
const startScan = async () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();
if (result.hasContent) {
console.log(result.content);
}
};
const stopScan = () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.showBackground();
BarcodeScanner.stopScan();
};
const askUser = () => {
prepare();
const c = confirm('Do you want to scan a barcode?');
if (c) {
startScan();
} else {
stopScan();
}
};
askUser();
This is fully optional and would work the same as:
const startScan = async () => {
const { BarcodeScanner } = Plugins;
BarcodeScanner.hideBackground();
const result = await BarcodeScanner.startScan();
if (result.hasContent) {
console.log(result.content);
}
};
const askUser = () => {
const c = confirm('Do you want to scan a barcode?');
if (c) {
startScan();
}
};
askUser();
The latter will just appear a little slower to the user.
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:
const checkPermission = async () => {
const { BarcodeScanner } = Plugins;
// check or request permission
const status = await BarcodeScanner.checkPermission({ force: true });
if (status.granted) {
// the user granted permission
return true;
}
return false;
};
A more detailed and more UX-optimized example:
const didUserGrantPermission = async () => {
const { BarcodeScanner } = Plugins;
// check if user already granted permission
const status = await BarcodeScanner.checkPermission({ force: false });
if (status.granted) {
// user granted permission
return true;
}
if (status.denied) {
// user denied permission
return false;
}
if (status.asked) {
// system requested the user for permission during this call
// only possible when force set to true
}
if (status.neverAsked) {
// user has not been requested this permission before
// it is advised to show the user some sort of prompt
// this way you will not waste your only chance to ask for the permission
const c = confirm(
'We need your permission to use your camera to be able to scan barcodes',
);
if (!c) {
return false;
}
}
if (status.restricted || status.unknown) {
// ios only
// probably means the permission has been denied
return false;
}
// user has not denied permission
// but the user also has not yet granted the permission
// so request it
const statusRequest = await BarcodeScanner.checkPermission({ force: true });
if (statusRequest.asked) {
// system requested the user for permission during this call
// only possible when force set to true
}
if (statusRequest.granted) {
// the user did grant the permission now
return true;
}
// user did not grant the permission, so he must have declined the request
return false;
};
didUserGrantPermission();
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:
const checkPermission = async () => {
const { BarcodeScanner } = Plugins;
const status = await BarcodeScanner.checkPermission();
if (status.denied) {
// the user denied permission for good
// redirect user to app settings if they want to grant it anyway
const c = confirm(
'If you want to grant permission for using your camera, enable it in the app settings.',
);
if (c) {
BarcodeScanner.openAppSettings();
}
}
};
You can setup the scanner to only recognize specific types of barcodes like this:
BarcodeScanner.startScan({ targetedFormats: ['QR_CODE'] })
If targetedFormats is not specified or left empty, all types of barcodes will be targeted.
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.
Error: Plugin BarcodeScanner does not respond to method call error message on iOSIn Xcode click on Product > Clean Build Folder and try to build again.
Cannot resolve symbol BarcodeScanner error message in Android StudioIn Android Studio click File > Sync Project with Gradle Files and try to build again.
A non-exhaustive list of todos:
FAQs
A fast and efficient (QR) barcode scanner for Capacitor - Forked for OpenIT
The npm package @openit/capacitor-community-barcode-scanner receives a total of 12 weekly downloads. As such, @openit/capacitor-community-barcode-scanner popularity was classified as not popular.
We found that @openit/capacitor-community-barcode-scanner demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.