QR code, Scanning and Optical Character Recognition (OCR) in Ionic 4
Tags: ionic, qrcode, barcode, plugins
Published: 2019-09-10 09:26:24

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="a839" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="a223" class="graf graf--p graf-after--figure">QR code or barcode scanning is something almost every smart phone user has done at least once. We scan QR codes in supermarkets, on products in general, and oh, Amazon delivery&nbsp;! It’s a very handy way to recognize products instead of entering 16 digit long ID numbers etc. Similarly, reading ID numbers from Passports etc could be very handy if you are an international hotel owner and require guests to carry passports as IDs. Or may be you want to read off a vehicle registration number using your phone.</p><figure tabindex="0" contenteditable="false" name="8a70" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 264px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 55.00000000000001%;"></div><img class="graf-image" data-image-id="1*zVStHikOlB6ti3Ap_o4o-Q.gif" data-width="480" data-height="264" src="https://cdn-images-1.medium.com/max/720/1*zVStHikOlB6ti3Ap_o4o-Q.gif"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="913c" class="graf graf--p graf-after--figure is-selected">Here are some potential use cases for these plugins in an Ionic 4 app</p><ul class="postList"><li name="0db3" class="graf graf--li graf-after--p">Super market app&#8202;—&#8202;QR/barcode scanners can provide product info to users</li><li name="acba" class="graf graf--li graf-after--li">Delivery app&#8202;—&#8202;Barcode scan can track/sign off a package</li><li name="1dce" class="graf graf--li graf-after--li">Quick access to offers&#8202;—&#8202;Scan QR codes and go to a webpage</li><li name="9a27" class="graf graf--li graf-after--li">Web authentication of mobile app&#8202;—&#8202;Similar to Whatsapp Web</li><li name="1f11" class="graf graf--li graf-after--li">Event app&#8202;—&#8202;Scan tickets or events passes</li></ul><p name="7ed9" class="graf graf--p graf-after--li">…… and many more</p><p name="c84d" class="graf graf--p graf-after--p">All this can now be done in Ionic apps, with latest plugins available in Ionic 4. In this article, we will focus on such plugins.<strong class="markup--strong markup--p-strong"> </strong>Some of these plugins have been around since Ionic 1, and have been changing ever since, and some are new. So here are some of the scan plugins and functionalities you can implement with Ionic 4.</p><h3 name="f0b1" class="graf graf--h3 graf-after--p">1. Barcode&nbsp;Scanner</h3><figure tabindex="0" contenteditable="false" name="6b45" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 466px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.60000000000001%;"></div><img class="graf-image" data-image-id="1*RTSUD26ntrTxfOvcJezftw.jpeg" data-width="3693" data-height="2460" src="https://cdn-images-1.medium.com/max/720/1*RTSUD26ntrTxfOvcJezftw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">A shopper scanning barcode to know more about&nbsp;product</figcaption></figure><p name="b881" class="graf graf--p graf-after--figure">A barcode is an image consisting of a series of parallel black and white lines that, when scanned, relay information about a product. A barcode is used to automate the transfer of product information, for eg. its price, from the product to an electronic system such as a cash register. Barcodes are traditionally read by optical devices such as a barcode reader or scanner. New advances in technology allows consumers to scan barcodes with their smartphones and tablets using in-built cameras. Now you can do the same with your Ionic 4 app as well.</p><p name="7035" class="graf graf--p graf-after--p">Install the plugin with</p><pre name="ca7f" class="graf graf--pre graf-after--p">ionic cordova plugin add phonegap-plugin-barcodescanner</pre><pre name="6c3e" class="graf graf--pre graf-after--pre">npm install @ionic-native/barcode-scanner</pre><p name="693d" class="graf graf--p graf-after--pre">For all plugins, the step to import the plugin in a component will remain common (just change the plugin name)</p><pre name="f8f5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';</code></pre><pre name="6d76" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private barcodeScanner: BarcodeScanner) { }</code></pre><p name="3b66" class="graf graf--p graf-after--pre">After this, you can simple use the following function to complete a scan process.</p><pre name="8ef4" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.barcodeScanner.scan().then(barcodeData =&gt; {<br> console.log('Barcode data', barcodeData);<br>}).catch(err =&gt; {<br>    console.log('Error', err);<br>});</code></pre><p name="9e41" class="graf graf--p graf-after--pre">This function will open the phone’s camera, allow you to scan a barcode, and in result will provide <code class="markup--code markup--p-code">success</code> or <code class="markup--code markup--p-code">error</code>&nbsp;.</p><p name="7719" class="graf graf--p graf-after--p">You can also pass an <code class="markup--code markup--p-code">options</code> object in the <code class="markup--code markup--p-code">scan({options})</code> function. These options are</p><pre name="b0a9" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">preferFrontCamera</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showFlipCameraButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">showTorchButton</strong> : true, // iOS and Android<br><strong class="markup--strong markup--pre-strong">torchOn</strong>: true, // Android, launch with the torch switched on (if   available)<br><strong class="markup--strong markup--pre-strong">saveHistory</strong>: true, // Android, save scan history (default false)<br><strong class="markup--strong markup--pre-strong">prompt</strong> : "Place a barcode inside the scan area", // Android<br><strong class="markup--strong markup--pre-strong">resultDisplayDuration</strong>: 500, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500<br><strong class="markup--strong markup--pre-strong">formats</strong> : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED<br><strong class="markup--strong markup--pre-strong">orientation</strong> : "landscape", // Android only (portrait|landscape), default unset so it rotates with the device<br><strong class="markup--strong markup--pre-strong">disableAnimations</strong> : true, // iOS<br><strong class="markup--strong markup--pre-strong">disableSuccessBeep</strong>: false // iOS and Android</pre><p name="374f" class="graf graf--p graf-after--pre">This plugin will of course require a camera and file saving access on the device, so take care of that as per your device. Since iOS 10 it’s mandatory to add a <code class="markup--code markup--p-code">NSCameraUsageDescription</code> in the <code class="markup--code markup--p-code">Info.plist</code>. To add this entry you can use the <code class="markup--code markup--p-code">edit-config</code> tag in the <code class="markup--code markup--p-code">config.xml</code> like this:</p><pre name="5694" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">&lt;edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge"&gt;<br>    &lt;string&gt;To scan barcodes&lt;/string&gt;<br>&lt;/edit-config&gt;</code></pre><p name="ec0e" class="graf graf--p graf-after--pre">For more details and issues, you can visit (<a href="https://github.com/phonegap/phonegap-plugin-barcodescanner"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://github.com/phonegap/phonegap-plugin-barcodescanner</a>)</p><h3 name="d14f" class="graf graf--h3 graf-after--p">2. BlinkId</h3><figure tabindex="0" contenteditable="false" name="bc4b" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 378px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 54%;"></div><img class="graf-image" data-image-id="1*u9RwRvAGtn0nFwTq6eE_ZA.jpeg" data-width="768" data-height="415" src="https://cdn-images-1.medium.com/max/720/1*u9RwRvAGtn0nFwTq6eE_ZA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">blinkID</figcaption></figure><p name="5ce8" class="graf graf--p graf-after--figure">BlinkID uses mobile’s or web camera to capture data from ID cards, passports, driver’s licenses, visas, work permits, and other identity documents in just a few seconds. BlinkID supports all documents containing MRZ (Machine Readable Zone), which includes most passports and IDs. IDs and driver’s licenses with the PDF417 barcode are also supported. For certain documents, complete data extraction is available for both the front and back side of the document.</p><p name="1dee" class="graf graf--p graf-after--p">BlinkId is a product of <a href="https://microblink.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Microblink Ltd.</strong></a> which is an R&amp;D company which provides solutions to simplify data entry in mobile and web apps using camera input. You can also download their demo apps on <a href="https://play.google.com/store/apps/details?id=com.microblink.blinkidapp"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Play store</a> and <a href="https://itunes.apple.com/us/app/blinkid-id-card-scanner-with-ocr/id1258136557?mt=8"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">App store</a> to check out the features available. The SDK is a premium SDK, so free trial will only give you access to certain features of the SDK.</p><p name="cb3b" class="graf graf--p graf-after--p">Before using the plugin, you’ll need to <a href="https://microblink.com/login?url=/customer/generatedemolicence"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">generate a free license</a> from MicroBlink website. To Install the plugin in your app, use</p><pre name="81ec" class="graf graf--pre graf-after--p">ionic cordova plugin add blinkid-cordova</pre><pre name="e02c" class="graf graf--pre graf-after--pre">npm install @ionic-native/blinkid</pre><p name="35af" class="graf graf--p graf-after--pre">Import the plugin in a component with</p><pre name="fd77" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { BlinkId, RecognizerResultState } from '@ionic-native/blinkid/ngx';</code></pre><pre name="5239" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private blinkId: BlinkId) { }</code></pre><p name="3789" class="graf graf--p graf-after--pre">After this, you can simple use the following function to complete a scan process.</p><pre name="6bf0" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">const overlaySettings = new this.blinkId.DocumentOverlaySettings();</code></pre><pre name="122f" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const usdlRecognizer = new this.blinkId.UsdlRecognizer();<br>const usdlSuccessFrameGrabber = new this.blinkId.SuccessFrameGrabberRecognizer(usdlRecognizer);</code></pre><pre name="696b" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const barcodeRecognizer = new this.blinkId.BarcodeRecognizer();<br>barcodeRecognizer.scanPdf417 = true;</code></pre><pre name="60ae" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const recognizerCollection = new this.blinkId.RecognizerCollection([<br>  usdlSuccessFrameGrabber,<br>  barcodeRecognizer,<br>]);</code></pre><pre name="042d" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">const canceled = await this.blinkId.scanWithCamera(<br>  overlaySettings,<br>  recognizerCollection,<br>  { ios: IOS_LICENSE_KEY, android: ANDROID_LICENSE_KEY },<br>);</code></pre><pre name="9889" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">if (!canceled) {<br>  if (usdlRecognizer.result.resultState === RecognizerResultState.valid) {<br>    const successFrame = usdlSuccessFrameGrabber.result.successFrame;<br>    if (successFrame) {<br>      this.base64Img = `data:image/jpg;base64, ${successFrame}`;<br>      this.fields = usdlRecognizer.result.fields;<br>    }<br>  } else {<br>    this.barcodeStringData = barcodeRecognizer.result.stringData;<br>  }<br>}</code></pre><p name="04d2" class="graf graf--p graf-after--pre">There is a great tutorial provided by MicroBlink related to the Cordova setup.</p><figure tabindex="0" contenteditable="false" name="917a" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><div class="iframeContainer"><iframe data-width="854" data-height="480" width="700" height="393" src="/media/5fc5901f124ee71707bbea71ae5791d4?postId=95fd46be91dd" data-media-id="5fc5901f124ee71707bbea71ae5791d4" data-thumbnail="https://i.embed.ly/1/image?url=https://i.ytimg.com/vi/Q8KiKb0n0wE/hqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen="" frameborder="0"></iframe></div></div></figure><p name="d793" class="graf graf--p graf-after--figure">Refer to another video explaining the implementation of <code class="markup--code markup--p-code">DocumnetVerificationOverlay</code>and <code class="markup--code markup--p-code">CombinedRecognizer</code></p><figure tabindex="0" contenteditable="false" name="9035" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><div class="iframeContainer"><iframe data-width="854" data-height="480" width="700" height="393" src="/media/02f0e5ea719a9c492955995bbb412c19?postId=95fd46be91dd" data-media-id="02f0e5ea719a9c492955995bbb412c19" data-thumbnail="https://i.embed.ly/1/image?url=https://i.ytimg.com/vi/0C2BirZt9sg/hqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen="" frameborder="0"></iframe></div></div></figure><p name="2a49" class="graf graf--p graf-after--figure">You can also checkout a sample <strong class="markup--strong markup--p-strong">PhoneGap</strong> application using BlinkID plugin&nbsp;, which is very similar to an Ionic 4 app&#8202;—&#8202;<a href="https://github.com/BlinkID/blinkid-phonegap"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener" target="_blank">https://github.com/BlinkID/blinkid-phonegap</a></p><h3 name="7209" class="graf graf--h3 graf-after--p">3. QR&nbsp;Scanner</h3><figure tabindex="0" contenteditable="false" name="e278" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 588px; max-height: 438px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 74.5%;"></div><img class="graf-image" data-image-id="1*lVH4QU6Vlm50x8-oYow2ng.png" data-width="588" data-height="438" src="https://cdn-images-1.medium.com/max/720/1*lVH4QU6Vlm50x8-oYow2ng.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">WhatsApp user scans QR code on screen for Web&nbsp;Login</figcaption></figure><p name="616b" class="graf graf--p graf-after--figure">Looks familiar&nbsp;? A Quick Response (QR) Code is a type of barcode that contains a matrix of dots. It can be scanned using a QR scanner or a smartphone with built-in camera. Once scanned, software on the device converts the dots within the code into numbers or a string of characters. For example, scanning a QR code with your phone might open a URL in your phone’s web browser.</p><p name="bb46" class="graf graf--p graf-after--p">QR codes are able to contain more information than traditional barcodes. And now your Ionic 4 app can scan QR codes very efficiently.</p><p name="1d69" class="graf graf--p graf-after--p">To Install the plugin in your app, use</p><pre name="1034" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-qrscanner</pre><pre name="4c0b" class="graf graf--pre graf-after--pre">npm install @ionic-native/qr-scanner</pre><p name="4909" class="graf graf--p graf-after--pre">Import the plugin in a component with</p><pre name="8d2a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { QRScanner, QRScannerStatus } from '@ionic-native/qr-scanner/ngx';</code></pre><pre name="10d8" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private qrScanner: QRScanner) { }</code></pre><p name="3aa7" class="graf graf--p graf-after--pre">After this, use the following method to get permission for scan, and then perform scan action.</p><pre name="d701" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">this.qrScanner.prepare()<br>  .then((status: QRScannerStatus) =&gt; {<br>     if (status.authorized) {<br>       // camera permission was granted<br><br></code></pre><pre name="8ee1" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">       // start scanning<br>       let scanSub = this.qrScanner.scan().subscribe((text: string) =&gt; {<br>         console.log('Scanned something', text);</code></pre><pre name="694e" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">         this.qrScanner.hide(); // hide camera preview<br>         scanSub.unsubscribe(); // stop scanning<br>       });</code></pre><pre name="1f02" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">     } else if (status.denied) {<br>       // camera permission was permanently denied<br>     } else {<br>       // permission was denied, but not permanently. You can ask for permission again at a later time.<br>     }<br>  })<br>  .catch((e: any) =&gt; console.log('Error is', e));</code></pre><figure tabindex="0" contenteditable="false" name="5e58" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 427px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 61.1%;"></div><img class="graf-image" data-image-id="1*A1epx2e_ytSMY798hSTdtg.png" data-width="891" data-height="544" src="https://cdn-images-1.medium.com/max/720/1*A1epx2e_ytSMY798hSTdtg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">QR Scanning in Bitpay&nbsp;app</figcaption></figure><p name="2832" class="graf graf--p graf-after--figure">If camera permission was permanently denied you must use <code class="markup--code markup--p-code">QRScanner.openSettings()</code>method to guide the user to the settings page then they can grant the permission from there.</p><p name="8283" class="graf graf--p graf-after--p">You can use <code class="markup--code markup--p-code">QRScanner.useFrontCamera()</code> to use front-camera for scanning as well.<br>Use <code class="markup--code markup--p-code">pausePreview</code> to pause the scanning while camera is ON.<br>Use <code class="markup--code markup--p-code">resumePreview</code> to resume the scanning.<br>Use <code class="markup--code markup--p-code">destroy</code> to run <code class="markup--code markup--p-code">hide</code>, <code class="markup--code markup--p-code">cancelScan</code>, stop video capture, remove the video preview, and to deallocate as much as possible.</p><p name="f8ca" class="graf graf--p graf-after--p">For more details, you can visit <a href="https://github.com/bitpay/cordova-plugin-qrscanner"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener" target="_blank">https://github.com/bitpay/cordova-plugin-qrscanner</a></p><h3 name="dca5" class="graf graf--h3 graf-after--p">4. ABBYY Real-Time Recognition</h3><figure tabindex="0" contenteditable="false" name="6288" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 259px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><img class="graf-image" data-image-id="1*y9Z92VnipYugfJN3ERBFFw.png" data-width="960" data-height="355" src="https://cdn-images-1.medium.com/max/720/1*y9Z92VnipYugfJN3ERBFFw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">ABBYY Logo</figcaption></figure><p name="effc" class="graf graf--p graf-after--figure">ABBYY is a global provider of content intelligence solutions and services. It’s Real-Time Recognition SDK enables developers to add ‘instant’ text capture functionality to mobile apps. Payment data on invoices, personal information on ID cards as well as codes printed on daily goods for consumer contests, text on street signs or warning plates can be immediately captured and used in the mobile app&#8202;—&#8202;the user only needs to focus the camera at the text.</p><p name="c774" class="graf graf--p graf-after--p">To Install the plugin in your app, use</p><pre name="b192" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-abbyy-rtr-sdk</pre><pre name="fd97" class="graf graf--pre graf-after--pre">npm install @ionic-native/abbyy-rtr</pre><p name="6ba3" class="graf graf--p graf-after--pre">Import the plugin in a component with</p><pre name="9197" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { AbbyyRTR } from '@ionic-native/abbyy-rtr/ngx';</code></pre><pre name="ca95" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private abbyyRTR: AbbyyRTR) { }</code></pre><p name="aba4" class="graf graf--p graf-after--pre">You need to download ABBYY RTR SDK from <a href="https://rtrsdk.com/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener" target="_blank">https://rtrsdk.com/</a> (or get the extended version from the <a href="https://rtrsdk.com/contacts/"  class="markup--anchor markup--p-anchor" rel="nofollow noopener noopener"    target="_blank">ABBYY Sales Team</a>) and add it to your project:</p><ul class="postList"><li name="7c96" class="graf graf--li graf-after--p">Create the <code class="markup--code markup--li-code">www/rtr_assets</code> subdirectory in the project.</li><li name="535e" class="graf graf--li graf-after--li">Copy RTR SDK assets (patterns and dictionaries) and license file (<code class="markup--code markup--li-code">AbbyyRtrSdk.license</code>) to <code class="markup--code markup--li-code">www/rtr_assets</code>.</li><li name="da38" class="graf graf--li graf-after--li">Copy the Android library (<code class="markup--code markup--li-code">abbyy-rtr-sdk-1.0.aar</code>) to <code class="markup--code markup--li-code">libs/android</code>.</li><li name="3b2c" class="graf graf--li graf-after--li">Copy the iOS framework (<code class="markup--code markup--li-code">AbbyyRtrSDK.framework</code>) to <code class="markup--code markup--li-code">libs/ios</code>.</li></ul><p name="c6af" class="graf graf--p graf-after--li">Then you need to add <code class="markup--code markup--p-code">libs/android</code> and <code class="markup--code markup--p-code">libs/ios</code> to the linker search paths.</p><ul class="postList"><li name="fbe2" class="graf graf--li graf-after--p">For Android, add the following settings to <code class="markup--code markup--li-code">platforms/android/build.gradle</code>:</li></ul><pre name="7bc5" class="graf graf--pre graf-after--li">allprojects {<br>  repositories {<br>    flatDir {<br>      dirs '../../../libs/android' // cordova-android &gt;= 7<br>      dirs '../../libs/android' // cordova-android &lt;= 6<br>    }<br>  }<br>}</pre><ul class="postList"><li name="5ab9" class="graf graf--li graf-after--pre">For iOS, add the following to <code class="markup--code markup--li-code">platforms/ios/cordova/build.xcconfig</code>:</li></ul><pre name="744c" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code">FRAMEWORK_SEARCH_PATHS = "../../libs/ios"</code></pre><ul class="postList"><li name="f349" class="graf graf--li graf-after--pre">After this, use the following method to perform scan action.</li></ul><pre name="3c26" class="graf graf--pre graf-after--li"><code class="markup--code markup--pre-code">this.abbyyRTR.startTextCapture(options)<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));<br><br></code></pre><pre name="c6ea" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">this.abbyyRTR.startDataCapture(options)<br>  .then((res: any) =&gt; console.log(res))<br>  .catch((error: any) =&gt; console.error(error));</code></pre><h3 name="1165" class="graf graf--h3 graf-after--pre">5. Zbar</h3><figure tabindex="0" contenteditable="false" name="1c69" class="graf graf--figure graf-after--h3"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 394px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.3%;"></div><img class="graf-image" data-image-id="1*bZCuJPDkWiDrBiThk0pUOg.jpeg" data-width="1600" data-height="900" src="https://cdn-images-1.medium.com/max/720/1*bZCuJPDkWiDrBiThk0pUOg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Zbar</figcaption></figure><p name="b2ca" class="graf graf--p graf-after--figure">ZBar is an open source software suite for reading bar codes from various sources, such as video streams, image files and raw intensity sensors. It supports many popular <em class="markup--em markup--p-em">symbologies</em> (types of bar codes) including EAN-13/UPC-A, UPC-E, EAN-8, Code 128, Code 39, Interleaved 2 of 5 and QR Code. Functionally it is more or less same as the other scanner plugins described above.</p><p name="91c5" class="graf graf--p graf-after--p">To Install the plugin in your app, use</p><pre name="9879" class="graf graf--pre graf-after--p">ionic cordova plugin add cordova-plugin-cszbar</pre><pre name="e02f" class="graf graf--pre graf-after--pre">npm install @ionic-native/zbar</pre><p name="9c7e" class="graf graf--p graf-after--pre">Import the plugin in a component with</p><pre name="cf65" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">import { ZBar, ZBarOptions } from '@ionic-native/zbar/ngx';</code></pre><pre name="261a" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">constructor(private zbar: ZBar) { }</code></pre><p name="adf8" class="graf graf--p graf-after--pre">After this, use the following method to perform scan action.</p><pre name="ddd1" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">let options: ZBarOptions = {<br>      flash: 'off',<br>      drawSight: false<br>    }</code></pre><pre name="8d69" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">this.zbar.scan(options)<br>   .then(result =&gt; {<br>      console.log(result); // Scanned code<br>   })<br>   .catch(error =&gt; {<br>      console.log(error); // Error message<br>   });</code></pre><h3 name="66f3" class="graf graf--h3 graf-after--pre">Conclusion:</h3><p name="9b4a" class="graf graf--p graf-after--h3 graf--trailing">In this post, we learnt about four great plugins for scanning different types of text, codes etc. for your Ionic 4 app. You can use these plugins in various apps to make the app more user friendly and faster to process data. Stay tuned for more interesting posts on Ionic 4&#8202;—&#8202;plugins, features and apps.</p></div></div></section><section name="b582" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="69d2" class="graf graf--h3 graf--leading">FOUND THIS POST INTERESTING&nbsp;?</h3><p name="95a9" class="graf graf--p graf-after--h3">Also check out our other blog posts related to <a href="https://medium.com/enappd/how-to-use-firebase-with-ionic-4-complete-guide-for-beginners-1888b1034024"  class="markup--anchor markup--p-anchor"    target="_blank">Firebase in Ionic 4</a>, <a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--p-anchor"    target="_blank">Geolocation</a> in Ionic 4, <a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--p-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and <a href="https://medium.com/enappd/payment-solutions-in-ionic-8c4bb28ce5cc"  class="markup--anchor markup--p-anchor"    target="_blank">Payment gateways in Ionic 4</a></p><p name="ed14" class="graf graf--p graf-after--p">Also check out this interesting post on <a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--p-anchor"    target="_blank">How to create games in Ionic 4 with Phaser</a></p><h3 name="362a" class="graf graf--h3 graf-after--p">NEED FREE IONIC 4 STARTERS?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic4-firebase-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Free Ionic 4&#8202;—&#8202;Firebase Starter</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 Full App</a></p><h3 name="1b1c" class="graf graf--h3 graf-after--p">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic documentation</a></li></ul><p name="519c" class="graf graf--p graf-after--li">Others<br>· <a href="https://www.investopedia.com/terms/b/barcode.asp"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://www.investopedia.com/terms/b/barcode.asp</a><br>· <a href="https://news.feinberg.northwestern.edu/wp-content/uploads/sites/15/2018/06/1-Scanning-barcode-using-app-salad.jpg"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://news.feinberg.northwestern.edu/wp-content/uploads/sites/15/2018/06/1-Scanning-barcode-using-app-salad.jpg</a><br>· <a href="https://microblink.com/products/blinkid"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://microblink.com/products/blinkid</a><br>· <a href="https://www.investopedia.com/terms/q/quick-response-qr-code.asp"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://www.investopedia.com/terms/q/quick-response-qr-code.asp</a><br>· <a href="https://techterms.com/definition/qr_code"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://techterms.com/definition/qr_code</a><br>· <a href="http://zbar.sourceforge.net/"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">http://zbar.sourceforge.net/</a><br>· <a href="https://i.kinja-img.com/gawker-media/image/upload/18ixmm45apir4jpg.jpg"  class="markup--anchor markup--p-anchor" rel="noopener" target="_blank">https://i.kinja-img.com/gawker-media/image/upload/18ixmm45apir4jpg.jpg</a></p><p name="af00" class="graf graf--p graf-after--p graf--trailing"><em class="markup--em markup--p-em">This blog was originally published on </em><a href="https://enappd.com/blog/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--p-em">Enappd</em></a><em class="markup--em markup--p-em">.</em></p></div></div></section></div></article></main>