PrimeFaces Extensions Showcase

CodeScanner

Multi-format 1D/2D barcode image scanner.

Source

XHTML page
Managed bean


<p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false">
        <p:autoUpdate />
    </p:growl>

    <p><p:inputText id="input" style="width:530px"/></p>
    <pe:codeScanner width="530"
                    height="400"
                    for="input">
        <p:ajax event="codeScanned" listener="#{codeScannerController.onCodeScanned}"/>
    </pe:codeScanner>


@Named
@ViewScoped
public class CodeScannerController implements Serializable {

    public void onCodeScanned(final SelectEvent<Code> event) {
        final Code code = event.getObject();
        FacesContext.getCurrentInstance().addMessage(
                    null,
                    new FacesMessage(FacesMessage.SEVERITY_INFO,
                                String.format("Scanned: %s (%s)", code.getValue(), code.getFormat()),
                                null));
    }

}

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
codeScanned	fires when a code is scanned