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.
Events
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Name
Description
scan-error
Fires when the scan fails with error.
message
type: string description: the error message
scan-success
Fires when the scan is completed successfuuly.
text
type: string description: the scan result as string
rawBytes
type: Object description: the scan result as a Uint8Array
Methods
This Web Component exposes public methods. You can invoke them directly on the Web Component instance.
Name
Description
close
Closes the dialog and the scan session.
show
Shows a dialog with the camera videostream. Starts a scan session.
Theme:Morning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteQuartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast White