Processing...
Description & Source Code

The Barcodescanner is a component for scanning barcodes. It is based on the HTML5 <video> tag and promise syntax, so it only works on HTML5-supported browsers and the browsers that support ECMA6 or later versions. Set the accepted formats with type, and with continuous="true" it keeps scanning at the given interval. Each successful read fires onDetect; the event exposes getType() and getResult() for the decoded value. To decode more than one type of barcode, simply separate the types with a comma — for example, type="code128,qr,ean".

This component uses the browser Camera API and requires a secure context (HTTPS or localhost). Camera access is only activated after you grant permission.

Supported barcode types

  • 2D: QR
  • 1D – CODE family: CODE128, CODE39, CODE39VIN
  • 1D – EAN family: EAN (incl. EAN13), EAN8
  • 1D – Others: CODEBAR, UPC, UPC_E, I2OF5
barcodescanner_example.zul
<zk>
    <barcodescanner type="qr,code128" continuous="true" interval="1000" height="100px"
                    onDetect='Clients.log(event.getType() + " " + event.getResult())'/>
</zk>