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

Sanchit Gupta
Mar 11 · 9 min read

1. Barcode Scanner

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

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

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));
QR Scanning in Bitpay app

4. ABBYY Real-Time Recognition

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

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

App starters, Themes, Templates, Complete Web and Mobile Apps Solutions

Sanchit Gupta

Written by

Author at enappd.com

Enappd

Enappd

App starters, Themes, Templates, Complete Web and Mobile Apps Solutions