@capacitor-community/barcode-scanner
Capacitor community plugin for something awesome.
| Maintainer | GitHub | Social |
|---|---|---|
| tafelnl | tafelnl |
npm install git+https://github.com/DutchConcepts/capacitor-barcode-scanner.git#v1.0.0-alpha.2
npx cap syncOn 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
- Open up the Info.plist (in Xcode right-click > Open As > Source Code)
- With
<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
- 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
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 handle permissions (yet). Your app will not crash when you call this API without having the right permission granted. But it will not be able to start up the camera. So you will have to take care of permissions yourself.
A non-exhaustive list of todos:
- Support for switching between cameras
- Support for toggling the flashlight
- Support for web
- Support for different types of barcodes (it now only support 'normal' or inverted QR-codes)
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent