BarcodeScanner Example—Continuous Scanning (Legacy)

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
10      class="slds-var-m-vertical_large slds-var-p-vertical_medium 
11            slds-text-align_center slds-border_top slds-border_bottom"
12    >
13      Scanned barcode values are:
14      <span class="slds-text-heading_small">{scannedBarcodesAsString}</span>
15    </div>
16  </template>
17
18  <!-- Static help text -->
19  <div class="slds-text-align_center slds-text-color_weak slds-m-vertical_large">
20    Click <strong>Start a Scanning Session</strong> to open a barcode scanner camera view. Position
21    a barcode in the scanner view to scan it.
22
23    <p>Continue scanning items. Click ✖ when there are no 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>

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
26        .beginCapture(scanningOptions)
27        .then((scannedBarcode) => {
28          this.processScannedBarcode(scannedBarcode);
29          this.continueScanning();
30        })
31        .catch((error) => {
32          this.processError(error);
33          this.sessionScanner.endCapture();
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
45      .resumeCapture()
46      .then((scannedBarcode) => {
47        this.processScannedBarcode(scannedBarcode);
48        this.continueScanning();
49      })
50      .catch((error) => {
51        this.processError(error);
52        this.sessionScanner.endCapture();
53      });
54  }
55
56  processScannedBarcode(barcode) {
57    // Do something with the barcode scan value:
58    // - look up a record
59    // - create or update a record
60    // - parse data and put values into a form
61    // - and so on; this is YOUR code
62    console.log(JSON.stringify(barcode));
63    this.scannedBarcodes.push(barcode);
64  }
65
66  processError(error) {
67    // Check to see if user ended scanning
68    if (error.code == "USER_DISMISSED") {
69      console.log("User terminated scanning session via Cancel.");
70    } else {
71      console.error(error);
72    }
73  }
74
75  get scannedBarcodesAsString() {
76    return this.scannedBarcodes
77      .map((barcodeResult) => {
78        return barcodeResult.value;
79      })
80      .join("\n\n");
81  }
82}