QR code, Scanning and Optical Character Recognition (OCR) in Ionic 4

Sanchit Gupta
Mar 11, 2019 · 9 min read
Image for post
Image for post

1. Barcode Scanner

Image for post
Image for post
A shopper scanning barcode to know more about product
ionic cordova plugin add phonegap-plugin-barcodescannernpm install @ionic-native/barcode-scanner
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';constructor(private barcodeScanner: BarcodeScanner) { }
this.barcodeScanner.scan().then(barcodeData => {
console.log('Barcode data', barcodeData);
}).catch(err => {
console.log('Error', err);
});
preferFrontCamera : true, // iOS and Android
showFlipCameraButton : true, // iOS and Android
showTorchButton : true, // iOS and Android
torchOn: true, // Android, launch with the torch switched on (if available)
saveHistory: true, // Android, save scan history (default false)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS and Android
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
<string>To scan barcodes</string>
</edit-config>

2. BlinkId

Image for post
Image for post
blinkID
ionic cordova plugin add blinkid-cordovanpm install @ionic-native/blinkid
import { BlinkId, RecognizerResultState } from '@ionic-native/blinkid/ngx';constructor(private blinkId: BlinkId) { }
const overlaySettings = new this.blinkId.DocumentOverlaySettings();const usdlRecognizer = new this.blinkId.UsdlRecognizer();
const usdlSuccessFrameGrabber = new this.blinkId.SuccessFrameGrabberRecognizer(usdlRecognizer);
const barcodeRecognizer = new this.blinkId.BarcodeRecognizer();
barcodeRecognizer.scanPdf417 = true;
const recognizerCollection = new this.blinkId.RecognizerCollection([
usdlSuccessFrameGrabber,
barcodeRecognizer,
]);
const canceled = await this.blinkId.scanWithCamera(
overlaySettings,
recognizerCollection,
{ ios: IOS_LICENSE_KEY, android: ANDROID_LICENSE_KEY },
);
if (!canceled) {
if (usdlRecognizer.result.resultState === RecognizerResultState.valid) {
const successFrame = usdlSuccessFrameGrabber.result.successFrame;
if (successFrame) {
this.base64Img = `data:image/jpg;base64, ${successFrame}`;
this.fields = usdlRecognizer.result.fields;
}
} else {
this.barcodeStringData = barcodeRecognizer.result.stringData;
}
}

3. QR Scanner

Image for post
Image for post
WhatsApp user scans QR code on screen for Web Login
ionic cordova plugin add cordova-plugin-qrscannernpm install @ionic-native/qr-scanner
import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';constructor(private qrScanner: QRScanner) { }
this.qrScanner.prepare()
.then((status: QRScannerStatus) => {
if (status.authorized) {
// camera permission was granted
// start scanning
let scanSub = this.qrScanner.scan().subscribe((text: string) => {
console.log('Scanned something', text);
this.qrScanner.hide(); // hide camera preview
scanSub.unsubscribe(); // stop scanning
});
} else if (status.denied) {
// camera permission was permanently denied
} else {
// permission was denied, but not permanently. You can ask for permission again at a later time.
}
})
.catch((e: any) => console.log('Error is', e));
Image for post
Image for post
QR Scanning in Bitpay app

4. ABBYY Real-Time Recognition

Image for post
Image for post
ABBYY Logo
ionic cordova plugin add cordova-plugin-abbyy-rtr-sdknpm install @ionic-native/abbyy-rtr
import { AbbyyRTR } from '@ionic-native/abbyy-rtr/ngx';constructor(private abbyyRTR: AbbyyRTR) { }
allprojects {
repositories {
flatDir {
dirs '../../../libs/android' // cordova-android >= 7
dirs '../../libs/android' // cordova-android <= 6
}
}
}
FRAMEWORK_SEARCH_PATHS = "../../libs/ios"
this.abbyyRTR.startTextCapture(options)
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));
this.abbyyRTR.startDataCapture(options)
.then((res: any) => console.log(res))
.catch((error: any) => console.error(error));

5. Zbar

Image for post
Image for post
Zbar
ionic cordova plugin add cordova-plugin-cszbarnpm install @ionic-native/zbar
import { ZBar, ZBarOptions } from '@ionic-native/zbar/ngx';constructor(private zbar: ZBar) { }
let options: ZBarOptions = {
flash: 'off',
drawSight: false
}
this.zbar.scan(options)
.then(result => {
console.log(result); // Scanned code
})
.catch(error => {
console.log(error); // Error message
});

Conclusion:


Enappd

Ionic and React Native Hybrid Mobile App Templates | UI, Backend, Dashboard & PWA

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store