Add barcode, MRZ and VIN scanning to Capacitor and Ionic apps on Android and iOS. Install the barkoder-capacitor plugin from npm, control the scanner from TypeScript, and test it on your own barcodes with a free 30-day trial.
barkoder-capacitor is a Capacitor barcode plugin published on npm. It opens the native barKoder scanner over an element in your page and sends results back to JavaScript. The docs show an Angular example, and official GitHub examples cover Vue and React.
Add the plugin and sync your native projects:
npm install barkoder-capacitor
npx cap sync
The plugin builds for Android and iOS and requires @capacitor/core 6.0.0 or later. Without a license it still scans, but results come back marked (Unlicensed) and only partly readable, so request a trial key before you measure anything.
Start your free trialIonic on Capacitor: install barkoder-capacitor as shown. It is the same ionic barcode scanner for Ionic Angular, React and Vue projects.
Ionic on Cordova: use the barkoder-cordova plugin. Ionic Angular projects can call it through the @awesome-cordova-plugins/barkoder wrapper.
Plain Cordova: the cordova barcode scanner plugin installs with one command:
cordova plugin add barkoder-cordova
This Angular example is copied from the barkoder-capacitor README and the Capacitor general example. React and Vue apps call the same Barkoder methods.
import { Barkoder, BarkoderResult, BarcodeType } from 'barkoder-capacitor'
@ViewChild('barkoderView') barkoderViewRef!: ElementRef;
constructor() {
Barkoder.addListener('barkoderResultEvent', (data: any) => {
console.log('barkoderResultEvent was fired');
const barkoderResult = new BarkoderResult(data);
if (barkoderResult) {
barkoderResult.decoderResults.forEach((result, index) => {
console.log(`Result ${index + 1}: ${result.textualData}`);
});
}
});
}
ngAfterViewInit() {
Barkoder.registerWithLicenseKey({ licenseKey: "YOUR_LICENSE_KEY" });
setTimeout(() => {
const boundingRect = this.barkoderViewRef.nativeElement.getBoundingClientRect() as DOMRect;
Barkoder.initialize({
width: Math.round(boundingRect.width),
height: Math.round(boundingRect.height),
x: Math.round(boundingRect.x),
y: Math.round(boundingRect.y),
});
this.setBarkoderSettings();
this.setActiveBarcodeTypes();
}, 200);
}
setActiveBarcodeTypes() {
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.qr, enabled: true });
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.code128, enabled: true });
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.ean13, enabled: true });
}
setBarkoderSettings() {
Barkoder.setRegionOfInterestVisible({value: true});
Barkoder.setRegionOfInterest({ left: 5, top: 5, width: 90, height: 90 });
Barkoder.setImageResultEnabled({ enabled: true});
Barkoder.setBarcodeThumbnailOnResultEnabled({ enabled: true});
}
startScanning() {
Barkoder.startScanning();
}
<div id="barkoderView" #barkoderView >
#barkoderView {
height: 400px;
}
Prefer a complete project? See the Vue starter example and the React full demo app on GitHub.
Each mode is a few calls on the same Barkoder object. The snippets come from the Capacitor examples in the barKoder docs.
Scan item after item without restarting the scanner. The duplicate threshold decides what happens with repeats: -1 reads each barcode once, 0 reads it again with no delay, and a value above 0 waits that many seconds. Use this setup when you need a Capacitor continuous scanning SDK for receiving, counting or picking.
Barkoder.setCloseSessionOnResultEnabled({enabled: false});
Barkoder.setThresholdBetweenDuplicatesScans({value: 0}); // it can take values -1, or n > 0
Batch MultiScan reads several barcodes of any type at once, which makes the plugin a Capacitor multiscan SDK for shelves, cartons and pallets. The example allows up to 200 results, caches codes for 3 seconds and sets decoding speed and resolution to normal, as the docs recommend.
Barkoder.setCloseSessionOnResultEnabled({enabled: false});
Barkoder.setMaximumResultsCount({value: 200});
Barkoder.setMulticodeCachingDuration({value: 3000});
Barkoder.setMulticodeCachingEnabled({enabled :true});
// For best result decoding speed should be normal, and barkoder resolution should be normal
Barkoder.setDecodingSpeed({value: DecodingSpeed.normal});
Barkoder.setBarkoderResolution({value: BarkoderResolution.normal});
One line turns the plugin into a Capacitor MRZ scanner plugin. It reads the machine-readable zone of travel and identity documents and returns data such as name, nationality, passport number and expiration date.
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.idDocument, enabled: true });
A VIN can be printed in four barcode types. The Capacitor VIN scanning SDK setup enables them with VIN restrictions, slow decoding and high resolution. A separate example adds OCR VIN support, which reads the printed characters when the barcode can't be decoded.
Barkoder.setEnableVINRestrictions({value: true});
Direct Part Marking puts a Data Matrix code straight onto metal or plastic, without a label. As a Capacitor DPM barcode scanner, the plugin enables Data Matrix with DPM mode, slow decoding, FHD resolution and a small region of interest.
Barkoder.setBarcodeTypeEnabled({ type: BarcodeType.datamatrix, enabled: true });
Barkoder.setDatamatrixDpmModeEnabled({ enabled: true });
Barkoder.setDecodingSpeed({ value: DecodingSpeed.slow });
Barkoder.setBarkoderResolution({ value: BarkoderResolution.FHD });
Barkoder.setRegionOfInterest({ left: 40, top: 40, width: 20, height: 10 });
Barkoder.setRegionOfInterestVisible({ value: true });
barkoder-capacitor wraps the native Android and iOS SDKs, so your web code gets the same decoding as a native app.
1D barcodes
Codabar, Code 11, Code 25, Code 32, Code 39, Code 93, Code 128, GS1 DataBar, GS1 Composite, EAN-8, EAN-13, Interleaved 2 of 5, ITF-14, MSI Plessey, Postal Barcodes, Telepen, UPC-A, UPC-E and more.
2D barcodes
Aztec Code, Aztec Compact, Data Matrix, DotCode, MaxiCode, PDF417, Micro PDF417, QR Code and Micro QR Code.
See all supported barcode types →Scanning in a browser or PWA instead? The Capacitor plugin targets native builds. For the browser, use the Web Barcode Scanner SDK (WASM). For other cross-platform stacks, see the cross-platform barcode SDK overview.
Free plugins such as @capacitor/barcode-scanner and @capacitor-mlkit/barcode-scanning cover many apps. Here is how to decide when to use a commercial SDK instead.
Still on @capacitor-community/barcode-scanner (last release in May 2023) or phonegap-plugin-barcodescanner (deprecated on npm)? Plan the move while you are testing, and compare on the same samples and devices.
The engine behind barkoder-capacitor also ships as native, web, desktop and cross-platform SDKs, so the same decoding runs in every app you build.
Direct SDKs for mobile, browser, desktop and server environments.
Official integrations for teams building one application across platforms.
Teams that needed the same scanning results on every device they support.
Verified credentials
Certified information security management built around internationally recognized controls.
Official Solution Provider supporting standards-based barcode and data-capture workflows.
Solution Provider listing covering barcode, mobile application and 2D barcode capabilities.
Discover the barKoder Web SDK listing and connect through Microsoft Marketplace.
Registered Independent Software Vendor in Zebra's PartnerConnect ecosystem.
Install the free barKoder demo app, or open the web demo, and scan your own barcodes before you integrate the SDK.
iPhone and iPad
Scan with your camera, or point it at the QR code to open the App Store.
Android phones and tablets
Scan with your camera, or point it at the QR code to open Google Play.
Any modern browser
Runs the Web SDK in your browser, on desktop or mobile, with nothing to install.
Test with known samples. Print or display the testing sheet and scan each 1D and 2D barcode with the demo app. The data sheet summarizes the SDK for your team.
Yes. Ionic apps that run on Capacitor install barkoder-capacitor like any other Capacitor plugin, whether the UI is Angular, React or Vue. Ionic apps that still run on Cordova use barkoder-cordova, and Ionic Angular projects can call it through the @awesome-cordova-plugins/barkoder wrapper.
Install barkoder-cordova with cordova plugin add barkoder-cordova. The Cordova Barcode Scanner Plugin page and the Cordova installation guide cover setup, with Angular, React, Vue and vanilla JavaScript examples.
barkoder-capacitor requires @capacitor/core 6.0.0 or later. Check the barkoder-capacitor package on npm for the current release.
No. The plugin targets Android and iOS builds. To scan in a browser or a PWA, use the Web Barcode Scanner SDK (WASM), which runs on browsers that support WebAssembly.
The ML Kit plugin is free and reads common formats well in good conditions. barKoder is a commercial SDK built for damaged, blurred and engraved barcodes, MRZ and VIN scanning, Batch MultiScan, AR overlays and on-device document parsers. Test both on the same samples, then check barKoder pricing.
Yes. Enable the idDocument type to read the MRZ on passports, ID cards and visas. For the PDF417 barcode on South African driving licenses, the SA driving license parser example shows the Capacitor calls, including the options for South African ID cards and vehicle license discs.
Only for the license check. The SDK checks the license key with the barKoder licensing server when the app initializes it. All scanning runs on the device, and each device must reach the licensing server at least once every 30 days to keep returning licensed results.
Get a key on the trial page or in the barKoder portal. A trial license lasts 30 days and can be deployed to up to 25 devices, and it is meant for development and staging. Without a license the SDK still scans, but results come back marked (Unlicensed) and only partly readable.
Install barkoder-capacitor and test it on your own barcodes and devices with a free 30-day trial, or talk to an SDK expert about your project.
