Mobile and Offline Developer Guide
jNewer Version Available
BarcodeScanner Example—Self-Service Kiosk (Legacy)
Here’s a complete example of a Lightning web component with BarcodeScanner that could serve as a
self-service kiosk.
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<!-- barcodeScannerKiosk.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
38 <!-- Custom UI for the scanner is defined here. We set display:none here because the scanner will show this. -->
39 <div data-id="BarcodeScannerCustomUI" style="display: none;">
40 <div>
41 <h1 align="right"><a style="text-decoration: none;" href="nimbusbarcodescanner://dismiss">✖</a></h1>
42 <h2 align="center">Welcome, let's get you verified!</h2>
43 <h3 align="center">Point the front side of your Health Card<br>at the camera on this device.</h3>
44 </div>
45 </div>
46</template>This example borrows heavily from the code sample in BarcodeScanner Example—Continuous Scanning (Legacy). The differences in this example provide all the basic elements needed for a self-service kiosk use case. It uses the front-facing camera for scanning, employs a continuous scanning lifecycle to minimize the need for user interaction, and even defines and uses a custom UI.
1// barcodeScannerKiosk.js
2import { LightningElement, track } from 'lwc';
3import { ShowToastEvent } from 'lightning/platformShowToastEvent';
4import { getBarcodeScanner } from 'lightning/mobileCapabilities';
5
6export default class NimbusPluginBarcodeScannerCustomUI extends LightningElement {
7
8 sessionScanner;
9 @track scannedBarcodes;
10
11 connectedCallback() {
12 this.sessionScanner = getBarcodeScanner();
13 }
14
15 beginScanning() {
16 // Reset scannedBarcodes before starting new scanning session
17 this.scannedBarcodes = [];
18
19 // Make sure BarcodeScanner is available before trying to use it
20 if (this.sessionScanner != null && this.sessionScanner.isAvailable()) {
21 let elem = this.template.querySelector('div[data-id=BarcodeScannerCustomUI]');
22 let backgroundViewHTML = '<header><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"></header>';
23 backgroundViewHTML += `<html><body>${elem.innerHTML}</body></html>`;
24
25 // Specify the size of the scanner camera view, use of the front-facing camera, and pull in the custom UI defined above
26 const scanningOptions = {
27 "barcodeTypes": [this.sessionScanner.barcodeTypes.QR],
28 "scannerSize": "XLARGE",
29 "cameraFacing": "FRONT",
30 "showSuccessCheckMark": true,
31 "presentWithAnimation": false,
32 "backgroundViewHTML": backgroundViewHTML
33 };
34
35 this.sessionScanner.beginCapture(scanningOptions)
36 .then((scannedBarcode) => {
37 this.processScannedBarcode(scannedBarcode);
38 this.continueScanning();
39 })
40 .catch((error) => {
41 this.processError(error);
42 this.sessionScanner.endCapture();
43 })
44 }
45 else {
46 console.log("BarcodeScanner unavailable. Non-mobile device?");
47 }
48 }
49
50 async continueScanning() {
51 // Pretend to do some work; see timing note below.
52 await new Promise((resolve) => setTimeout(resolve, 1000));
53
54 this.sessionScanner.resumeCapture()
55 .then((scannedBarcode) => {
56 this.processScannedBarcode(scannedBarcode);
57 this.continueScanning();
58 })
59 .catch((error) => {
60 this.processError(error);
61 this.sessionScanner.endCapture();
62 })
63 }
64
65 processScannedBarcode(barcode) {
66 // Do something with the barcode scan value:
67 // - look up a record
68 // - create or update a record
69 // - parse data and put values into a form
70 // - and so on; this is YOUR code
71 console.log(JSON.stringify(barcode));
72 this.scannedBarcodes.push(barcode);
73 }
74
75 processError(error) {
76 // Check to see if user ended scanning
77 if (error.code == 'userDismissedScanner') {
78 console.log('User terminated scanning session via Cancel.');
79 }
80 else {
81 console.error(error);
82 }
83 }
84
85 get scannedBarcodesAsString() {
86 return this.scannedBarcodes.map(barcodeResult => {
87 return barcodeResult.value;
88 }).join('\n\n');
89 }
90}See Scan Multiple Barcodes (Legacy) for an explanation of how beginScanning() and continueScanning() work together to create the continuous scanning cycle.