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​

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​

show​

DescriptionShows a dialog with the camera videostream. Starts a scan session.
Return typevoid
DeprecatedThe method is deprecated in favour of open property.

close​

DescriptionCloses the dialog and the scan session.
Return typevoid
DeprecatedThe method is deprecated in favour of open property.

CSS Parts​

No CSS parts available for this component.