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

Description	Indicates whether the dialog is open.
Type	boolean
Default	false
Since	1.24.0

Slots

No slots available for this component.

Events

scan-success

Description	Fires when the scan is completed successfuuly.
Type	CustomEvent<BarcodeScannerDialogScanSuccessEventDetail>
Parameters	text: string the scan result as string rawBytes: Object the scan result as a Uint8Array

scan-error

Description	Fires when the scan fails with error.
Type	CustomEvent<BarcodeScannerDialogScanErrorEventDetail>
Parameters	message: string the error message

Methods

show

Description	Shows a dialog with the camera videostream. Starts a scan session.
Return type	void
Deprecated	The method is deprecated in favour of open property.

close

Description	Closes the dialog and the scan session.
Return type	void
Deprecated	The method is deprecated in favour of open property.

CSS Parts

No CSS parts available for this component.