Skip to main content

BarcodeScannerDialog

The BarcodeScannerDialog component provides barcode scanning functionality for all devices that support the MediaDevices.getUserMedia() native API. Opening the dialog launches the device camera and scans for known barcode formats.

A scanSuccess event fires whenever a barcode is identified and a scanError event fires when the scan failed (for example, due to missing permisions).

Internally, the component uses the zxing-js/library third party OSS.

For a list of supported barcode formats, see the zxing-js/library documentation.

Basic Sample​

Properties​

open​

DescriptionIndicates whether the dialog is open.
Typeboolean
Defaultfalse
Since1.24.0

Slots​

No slots available for this component.

Events​

close​

DescriptionFired when the user closes the component.
TypeCustomEvent

scan-success​

DescriptionFires when the scan is completed successfuuly.
TypeCustomEvent<BarcodeScannerDialogScanSuccessEventDetail>
Parameterstext: string
the scan result as string
rawBytes: Object
the scan result as a Uint8Array

scan-error​

DescriptionFires when the scan fails with error.
TypeCustomEvent<BarcodeScannerDialogScanErrorEventDetail>
Parametersmessage: string
the error message

Methods​

No methods available for this component.

CSS Parts​

No CSS parts available for this component.