Use the BarcodeScanner API

To develop a Lightning 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() API functions in your LWC scanning code to streamline your development experience. The legacy API functions beginCapture(), resumeCapture(), and endCapture() are still available, but will be retired in a future release. See Understand BarcodeScanner Modern and Legacy APIs for additional details.

Important

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.

1handleBeginScanClick(event) {
2    const myScanner = getBarcodeScanner();
3    if(myScanner.isAvailable()) {
4        // Perform scanning operations
5    }
6    else {
7        // Scanner not available
8        // Not running on hardware with a scanner
9        // Handle with message, error, beep, and so on
10    }
11}

Scan a Barcode

Scanning with BarcodeScanner is simple 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().

See [scan(options)](https://developer.salesforce.com/docs/platform/lwc/guide/reference-lightning-barcodescanner-scan.html) for more details of how to handle scan results, handle errors, and so on. For example:

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

Understand BarcodeScanner Modern and Legacy APIs

In previous versions of BarcodeScanner, scanning a single barcode in a scanning session required a different programmatic approach than scanning several barcodes in a row without requiring user intervention after each scan. Now, BarcodeScanner has new APIs to streamline the development experience for these common use cases, and new capabilities to scan large quantities of barcodes more efficiently.
Understand the BarcodeScanner Scanning Lifecycle

BarcodeScanner has four distinct scanning modes, each appropriate for different use cases.

See Also