Skip to main content

BarcodeScannerDialog

<ui5-barcode-scanner-dialog> | Since 1.0.0-rc.15

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.