BarcodeScanner Example—Continuous Scanning (Legacy)

Here’s a minimal but complete example of a Lightning web component that uses BarcodeScanner to scan for and recognize multiple barcodes in a continuous cycle.

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

The HTML template provides the bare minimum for a scanning user interface. There’s an element to display the results of the scans, a bit of static help text, and a button to start scanning.

1<!-- barcodeScannerContinuous.html -->
2<template>
3    <div class="slds-text-align_center">
4        <span class="slds-text-heading_large">BarcodeScanner: Multi-Scan</span>
5    </div>
6
7    <!-- After barcode are scanned, their values are displayed here: -->
8    <template lwc:if={scannedBarcodes}>
9        <div class="slds-var-m-vertical_large slds-var-p-vertical_medium 
10            slds-text-align_center slds-border_top slds-border_bottom">
11            Scanned barcode values are:
12            <span class="slds-text-heading_small">{scannedBarcodesAsString}</span>
13        </div>
14    </template>
15
16    <!-- Static help text -->
17    <div class="slds-text-align_center slds-text-color_weak slds-m-vertical_large">
18        Click <strong>Start a Scanning Session</strong> to open a 
19        barcode scanner camera view. Position a barcode in the scanner 
20        view to scan it.
21
22        <p>Continue scanning items. Click ✖ when there are no
23           more items to scan.</p>
24    </div>
25
26    <!-- Scan button, always enabled -->
27    <div class="slds-align_absolute-center slds-m-vertical_large">
28        <lightning-button
29            variant="brand"
30            class="slds-var-m-left_x-small"
31            icon-name="utility:scan"
32            label="Start a Scanning Session"
33            title="Start scanning barcodes, until there are no more barcodes to scan"
34            onclick={beginScanning}
35        ></lightning-button>
36    </div>
37</template>

This example displays all of the values of successful scans, one after the other. This example is streamlined, omitting some of the comments and processing illustrated in BarcodeScanner Example—Single Scan (Legacy), to focus on the scanning cycle itself.

1// barcodeScannerContinuous.js
2import { LightningElement, track } from 'lwc';
3import { ShowToastEvent } from 'lightning/platformShowToastEvent';
4import { getBarcodeScanner } from 'lightning/mobileCapabilities';
5
6export default class BarcodeScannerContinuous extends LightningElement {
7    sessionScanner;
8    @track scannedBarcodes;
9
10    connectedCallback() {
11        this.sessionScanner = getBarcodeScanner();
12    }
13
14    beginScanning() {
15        // Reset scannedBarcodes before starting new scanning session
16        this.scannedBarcodes = [];
17
18        // Make sure BarcodeScanner is available before trying to use it
19        if (this.sessionScanner != null && this.sessionScanner.isAvailable()) {
20            const scanningOptions = {
21                barcodeTypes: [this.sessionScanner.barcodeTypes.QR],
22                instructionText: 'Scan barcodes — Click ✖︎ when done',
23                successText: 'Successful scan.'
24            };
25            this.sessionScanner.beginCapture(scanningOptions)
26            .then((scannedBarcode) => {
27                this.processScannedBarcode(scannedBarcode);
28                this.continueScanning();
29            })
30            .catch((error) => {
31                this.processError(error);
32                this.sessionScanner.endCapture();
33            })
34        }
35        else {
36            console.log("BarcodeScanner unavailable. Non-mobile device?");
37        }
38    }
39
40    async continueScanning() {
41        // Pretend to do some work; see timing note below.
42        await new Promise((resolve) => setTimeout(resolve, 1000));
43        
44        this.sessionScanner.resumeCapture()
45        .then((scannedBarcode) => {
46            this.processScannedBarcode(scannedBarcode);
47            this.continueScanning();
48        })
49        .catch((error) => {
50            this.processError(error);
51            this.sessionScanner.endCapture();
52        })
53    }
54
55    processScannedBarcode(barcode) {
56        // Do something with the barcode scan value:
57        // - look up a record
58        // - create or update a record
59        // - parse data and put values into a form
60        // - and so on; this is YOUR code
61        console.log(JSON.stringify(barcode));
62        this.scannedBarcodes.push(barcode);
63    }
64
65    processError(error) {
66        // Check to see if user ended scanning
67        if (error.code == 'userDismissedScanner') {
68            console.log('User terminated scanning session via Cancel.');
69        }
70        else {
71            console.error(error);
72        }
73    }
74
75    get scannedBarcodesAsString() {
76        return this.scannedBarcodes.map(barcodeResult => {
77            return barcodeResult.value;
78        }).join('\n\n');
79    }
80}

This example doesn’t process a scanned barcode in any meaningful way. As a result, the processScannedBarcode() function executes quickly—too quickly. It can trigger a timing issue that causes the example to fail. To avoid the issue, we’ve inserted a one-second delay before starting the next scan. Real-world barcode processing typically takes long enough to avoid the issue. In that case, you can remove the line with the delay and the async keyword preceding the continueScanning() function.

Note

See Scan Multiple Barcodes (Legacy) for an explanation of how beginScanning() and continueScanning() work together to create the continuous scanning cycle.

Mobile and Offline Developer Guide

BarcodeScanner Example—Continuous Scanning (Legacy)

See Also