---
description: >-
  Implement QR code and barcode scanner in your Ionic app. Also, generate your
  own QR code and share with others
---

# QR and Barcode Scanning

### What is QR code and Barcode

A **Barcode** is a machine-readable optical label that contains information about the item to which it is attached. This is mostly used to catalog products in large warehouses, or departmental stores etc.

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbGnfXtf_0ebmjR8thq%2F-LbH4G8YgzGywHAJ2-5k%2F43857-004-52EE48DE.jpg?alt=media\&token=ce331c1e-06a5-47fe-85c2-ca8ab7865a1c)

A **QR code** consists of black squares arranged in a square grid on a white background, which can be read by an imaging device such as a camera, and processed to return information like a website URL. Most mobile devices today have QR code scanners inbuilt, and they return the response on the screen.

![](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbGnfXtf_0ebmjR8thq%2F-LbH4IxEBHC79M5pD5_c%2FQR_code_for_mobile_English_Wikipedia.svg.png?alt=media\&token=a4ae28d0-2861-4212-ace5-a288fdefd956)

### Integrating Scanner in Ionic 5

This functionality requires Cordova plugin: `phonegap-plugin-barcodescanner`.The Barcode Scanner Plugin opens a camera view and automatically scans a barcode/ QR code, returning the data back to you.

Install the plugin using&#x20;

```
$ ionic cordova plugin add phonegap-plugin-barcodescanner
$ npm install @ionic-native/barcode-scanner
```

Import the plugin in your page using

```
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

constructor(private barcodeScanner: BarcodeScanner) { }
```

Barcode / QR code scanning functionality can be found in Ionic 5 Full App at `src/app/pages/addons3/bar-code`

### &#x20;Scanning a Barcode / QR code

The scanning function can be simply called with&#x20;

```
this.barcodeScanner.scan().then(barcodeData => {
  // success. barcodeData is the data returned by scanner
}).catch(err => {
  // error
});
```

This opens the camera. When you point the camera to a valid barcode / QR code, it scans the code and returns the data in `success`

![Scanning a barcode](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbGnfXtf_0ebmjR8thq%2F-LbH7ffu0JC9cFakFtjA%2FIMG_0952.PNG?alt=media\&token=4707d94f-1323-454f-8977-523be1462e22)

![Scanning a QR code](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbGnfXtf_0ebmjR8thq%2F-LbH7mPCx1V9atkJFBBc%2FIMG_0954.PNG?alt=media\&token=3f85c4be-ad11-4007-a59b-aaea96aebaf8)

![Data returned from scanning](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbGnfXtf_0ebmjR8thq%2F-LbH7rRKE1weo65tOEbA%2FIMG_0953.PNG?alt=media\&token=3ad1d958-5b9d-482d-b90d-4d4bfd3915a8)

You can use several options in the `scan` method

```
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
```

### Creating your own QR code

The plugin creates the object `barcodeScanner` with the method `encode(type, data, success, fail)`.

Supported encoding types:

* TEXT\_TYPE
* EMAIL\_TYPE
* PHONE\_TYPE
* SMS\_TYPE

```
  // Example for a string QR code (TEXT_TYPE)
  this.barcodeScanner
  .encode(this.barcodeScanner.Encode.TEXT_TYPE, "Your string here")
  .then((encodedData) => {
    console.log(encodedData);
  }, (err) => {
    console.log('Error occured : ' + err);
  });
```

Created QR Code appears in a separate page, and can be shared

![QR code for enappd.com](https://3065094597-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-La-kqVz2Uq1Ka0VUWZT%2F-LbHDE1dxgThASMhGX5z%2F-LbHDZdWYObovPinO4m1%2FScreenshot_20190331-105733.png?alt=media\&token=3dc766aa-ab13-48ae-89f5-62b75318b68e)

{% hint style="info" %}
Encoding data has a known issue in iOS with Webview. We are keeping this as a // TODO for upcoming fix releases
{% endhint %}

### iOS quirks

Since iOS 10 it's mandatory to add a `NSCameraUsageDescription` in the `Info.plist`

`NSCameraUsageDescription` describes the reason that the app accesses the user's camera. When the system prompts the user to allow access, this string is displayed as part of the dialog box. If you didn't provide the usage description, the app will crash before showing the dialog. Also, Apple will reject apps that access private data but don't provide an usage description.

To add this entry you can use the `edit-config` tag in the `config.xml` like this:

```
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>To scan barcodes</string>
</edit-config>
```

###

&#x20;For more info, please see the [BarcodeScanner plugin docs](https://github.com/phonegap/phonegap-plugin-barcodescanner).
