Barcode Scanning User Experience

Your component can deliver any user experience you desire, but there’s a common flow for any component that can scan a barcode.

  1. A Lightning web component displays a button (or other user interface control) to start a scan.

    Lightning web component with a Scan an Item button

  2. When the button is pressed, BarcodeScanner invokes the mobile device’s user interface for the camera and barcode scanning function. When the camera detects a valid barcode, it displays a bounding box around the barcode, reads the data from the barcode, and returns the result to the Lightning web component that invoked it.

    Lightning web component scanning a barcode

  3. The Lightning web component displays or otherwise processes the results of the scan.

    Lightning web component displaying data read from the barcode