BarcodeScannerDialog

v1.0.0-rc.15
@ui5/webcomponents-fiori
<ui5-barcode-scanner-dialog>

Usage

Scan
<ui5-barcode-scanner-dialog id="dlgScan"></ui5-barcode-scanner-dialog>

<ui5-button id="btnScan" icon="camera" title="Start Camera">Scan</ui5-button>
<ui5-label id="scanResult"></ui5-label>
<ui5-label id="scanError"></ui5-label>

<script>
	btnScan.addEventListener("click", function(event) {
		dlgScan.show();
	});

	dlgScan.addEventListener("scan-success", function(event) {
		scanResult.innerHTML = event.detail.text;
		dlgScan.close();
	});

	dlgScan.addEventListener("scan-error", function(event) {
		scanError.innerHTML = event.detail.message;
		dlgScan.close();
	});
</script>
	

Overview

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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel