Input
Editors
Data
Charts & Maps
Panel & Layout
Overlay & Feedback
Media
Misc
Resources
CodeScanner
CodeScanner is a multi-format 1D/2D barcode image scanner that scans bar and QR codes using a client side video input device. Based on ZXing for JS.
Basic Usage
Scan a bar or QR code with your camera. The scanned text is written to the input field (for) and the codeScanned event is sent to the server.
Requirements
Important: parts of the JavaScript of this component require https (or localhost).
If the component is not working for you on a remote server, try running the showcase on localhost.
Usage
<div class="card">
<h5>Basic Usage</h5>
<p>Scan a bar or QR code with your camera. The scanned text is written to the input field (<code>for</code>) and the <i>codeScanned</i> event is sent to the server.</p>
<h:form id="formBasicUsage">
<p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false"/>
<p><p:inputText id="input" style="width:530px"/></p>
<pe:codeScanner width="530"
height="400"
for="input">
<p:ajax event="codeScanned" listener="#{codeScannerController.onCodeScanned}" update="growl"/>
</pe:codeScanner>
</h:form>
</div>
package org.primefaces.extensions.showcase.controller.codescanner;
import java.io.Serializable;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import org.primefaces.event.SelectEvent;
import org.primefaces.extensions.model.codescanner.Code;
/**
* @author Jasper de Vries <[email protected]>
*/
@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));
}
}