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.
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.
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.
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.
See Scan Multiple Barcodes (Legacy) for an explanation of how beginScanning() and continueScanning() work together to create the continuous scanning cycle.
See Also