BarcodeScanner Example–Modern Scanning API

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

1// barcodeScannerMultiScan.js
2import { LightningElement, track } from "lwc";
3import { getBarcodeScanner } from "lightning/mobileCapabilities";
4
5export default class BarcodeScannerContinuousDocDemo extends LightningElement {
6  barcodeScanner;
7  @track scannedBarcodes;
8
9  connectedCallback() {
10    this.barcodeScanner = getBarcodeScanner();
11  }
12
13  beginScanning() {
14    // Set your configuration options, including bulk and multi-scanning if desired, in this scanningOptions object
15    const scanningOptions = {
16      barcodeTypes: [this.barcodeScanner.barcodeTypes.QR],
17      scannerSize: "FULLSCREEN",
18      cameraFacing: "BACK",
19      showSuccessCheckMark: true,
20      enableBulkScan: true,
21      enableMultiScan: true,
22    };
23
24    // Make sure BarcodeScanner is available before trying to use it
25    if (this.barcodeScanner != null && this.barcodeScanner.isAvailable()) {
26      // Reset scannedBarcodes before starting new scanning session
27      this.scannedBarcodes = [];
28
29      // Start scanning barcodes
30      this.barcodeScanner
31        .scan(scanningOptions)
32        .then((results) => {
33          this.processScannedBarcodes(results);
34        })
35        .catch((error) => {
36          this.processError(error);
37        })
38        .finally(() => {
39          this.barcodeScanner.dismiss();
40        });
41    } else {
42      console.log("BarcodeScanner unavailable. Non-mobile device?");
43    }
44  }
45
46  processScannedBarcodes(barcodes) {
47    // Do something with the barcode scan value:
48    // - look up a record
49    // - create or update a record
50    // - parse data and put values into a form
51    // - and so on; this is YOUR code
52    console.log(JSON.stringify(barcodes));
53    this.scannedBarcodes = this.scannedBarcodes.concat(barcodes);
54  }
55
56  processError(error) {
57    // Check to see if user ended scanning
58    if (error.code == "USER_DISMISSED") {
59      console.log("User terminated scanning session.");
60    } else {
61      console.error(error);
62    }
63  }
64
65  get scannedBarcodesAsString() {
66    return this.scannedBarcodes.map((barcode) => barcode.value).join("\n");
67  }
68}