Theme
CodeScanner

ZXing for JS

Multi-format 1D/2D barcode image scanner based on ZXing for JS. Allows you to scan bar and QR codes using a client side video input device.

Important: parts of the JavaScript of this component require https! If this component is not working for you in this showcase on the primefaces.org server, try running it on localhost.

Components and more
Use Cases
Documentation pe:codeScanner
Attributes (move mouse over the names to see data types)
Name Description
id Unique identifier of the component in a namingContainer.
rendered Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding An el expression referring to a server side UIComponent instance in a backing bean.
style Inline style of the component.
styleClass Style class of the component.
width Width of video in CSS pixels.
height Height of video in CSS pixels.
widgetVar Name of the client side widget.
type Code type ("multi", "bar" or "qr"). Default "multi".
autoStart Flag indicating the scanner should start when rendered. Default is true.
onsuccess Client side callback to execute when a code scan is successful.
onerror Client side callback to execute when a code scan fails.
video Flag indicating a video element should be rendered. Default is true.
deviceId Id of the video input device to use. Default is null which selects the first video input device.
for Client id of the input this scanner will set the value to. Default is null.
Events (move mouse over the names to see classes)
Name Description
codeScannedfires when a code is scanned
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 10.0.0,PrimeFaces Extensions: 10.0.5,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2021-08-28 16:46
occured!