PrimeFaces Extensions Showcase

CodeScanner

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
autoStart	Whether to start scanning automatically.Default is true.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.Default is generated.
deviceId	Camera device ID to use when multiple cameras are available.
for	Search expression for the input component to write the scanned value to.
height	Height of the video element in pixels.
id	Unique identifier of the component in a namingContainer.Default is generated.
onerror	Client-side callback when scanning fails.
onsuccess	Client-side callback when a code is successfully scanned.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.Default is true.
style	Inline style of the component.
styleClass	Style class of the component.
type	Reader type: 'multi', 'bar', or 'qr'.Default is multi.
video	Whether to show the video stream.Default is true.
widgetVar	Name of the client side widget.
width	Width of the video element in pixels.

PrimeFaces: 16.0.0-SNAPSHOT,

PrimeFaces Extensions: 16.0.0-SNAPSHOT,

JSF: Apache MyFaces Core 4.0 - Impl 4.0.3,

Server: Apache Tomcat (TomEE)/10.1.52 (10.1.4),

Build time: 2026-03-07 01:34