Scan Barcodes on a Mobile Device

A Lightning web component can use a mobile device’s camera and mobile OS platform features to scan a barcode, such as a UPC symbol or QR code. When a barcode is successfully scanned, the data that was read from the barcode is returned to the Lightning web component that invoked it.

Scanning is performed locally on the mobile device and doesn’t need a network connection. BarcodeScanner does require access to platform-specific APIs that are available only within compatible Salesforce mobile apps.

BarcodeScanner does not and cannot function when running in a web browser, whether running on a desktop or mobile device.

Important

BarcodeScanner provides to your component a string value of the data encoded in a scanned barcode. It doesn’t attempt to interpret or process the decoded value.

This barcode scanner plugin is for use only in the Field Service mobile app.

Note

Use the BarcodeScanner API

To develop a Lightning web component with barcode scanning features, use the BarcodeScanner API.

Import BarcodeScanner into your component definition to make the BarcodeScanner API functions available to your code.
Test to make sure BarcodeScanner is available before you call scanning lifecycle functions.
Use the scanning lifecycle functions to start, continue, and stop scanning.

We recommend using the modern scan() and dismiss() APIs in your LWC scanning code to streamline your development experience. The legacy APIs beginCapture(), resumeCapture(), and endCapture() are still available, but will be retired in a future release.

Note

Add BarcodeScanner to a Lightning Web Component

In your component’s JavaScript file, import BarcodeScanner using the standard JavaScript import statement. Specifically, import the getBarcodeScanner factory function from the lightning/mobileCapabilities module, like so:

1import { getBarcodeScanner } from "lightning/mobileCapabilities";

After it’s imported into your component, use the factory function to get an instance of BarcodeScanner. With your BarcodeScanner instance, use the utility functions and constants to verify scanner availability and to configure scans. Use the scanning lifecycle functions to perform scanning operations.

Test BarcodeScanner Availability

BarcodeScanner depends on physical device hardware and platform features. A component that uses BarcodeScanner renders without errors on a desktop computer, but scanning functions fail. To avoid these errors, test if BarcodeScanner functionality is available before you use it.

1import { LightningElement } from 'lwc';
2import { getBarcodeScanner } from 'lightning/mobileCapabilities';
3export default class ImplementBarcodeScanner extends LightningElement {
4  const myScanner = getBarcodeScanner();
5
6  barcodeResults = 'Nothing scanned yet!';
7
8  handleBeginScanClick(event) {
9    if(myScanner.isAvailable()) {
10      // Perform scanning operations
11      let scanningOptions = {
12        "barcodeTypes": ["code128","code39", "code93", "ean13", "ean8", "upca", "upce", "qr", "datamatrix", "itf", "pdf417"], "instructionText":"Position barcode in the scanner view.\nPress x to stop.",
13"successText":"Successful Scan!"
14      };
15      myScanner.scan(scanningOptions)
16        .then((results) => {
17          // Do something with the results of the scan
18          this.barcodeResults = '';
19          results.forEach(result => {
20            this.barcodeResults += 'type: ' + result.type + ', value: ' + result.value + '\n'; 
21          });
22        })
23        .catch((error) => {
24          // Handle cancellation and scanning errors here
25          this.barcodeResults = 'Error code: ' + error.code + '\nError message: ' + error.message;
26        })
27        .finally(() => {
28          myScanner.dismiss();
29        });
30  } else {
31      // Scanner not available
32      // Not running on hardware with a scanner
33      // Handle with message, error, beep, and so on
34      this.barcodeResults = 'Problem initiating scanner.  Are you using a mobile device?';
35    }
36  }
37}

Supported Barcode Types

aztec
code39
code93
code128
dataMatrix
ean8
ean13
interleaved2of5
pdf417
qr
upce

Scan a Barcode

Scan with BarcodeScanner using the scanning lifecycle functions.

Start a scan with scan(options).
Handle the result of the scan, which is returned in the form of a promise.
End the scan with dismiss().

For example:

1myScanner
2  .scan(scanningOptions)
3  .then((result) => {
4    // Do something with the result of the scan
5    console.log(result);
6    this.scannedBarcode = result.value;
7  })
8  .catch((error) => {
9    // Handle cancellation and scanning errors here
10    console.error(error);
11  })
12  .finally(() => {
13    myScanner.dismiss();
14  });

See scan(options) for more details of how to handle scan results, handle errors, and so on.

See Also

BarcodeScanner API