Taking images with the attached camera and sending them to the JSF backend data model is supported by photoCam.
A simple definition for capturing an image with the photoCam would be as follows:
<p:photoCam widgetVar="pc" listener="#{photoCamBean.onCapture}"
update="capturedImage"/>
<p:graphicImage id="capturedImage"
value="#{photoCamBean.capturedImage}" cache="false"/>
<p:commandButton type="button" value="Capture"
onclick="PF('pc').capture()"/>The captured image is triggered via the client-side JavaScript method, capture. The button declared in the preceding sample invokes the capture method via the widget variable defined for the photoCam component. A method expression, which will be invoked when an image is captured, is bound to the attribute. This method will handle the image captured on the server side. A sample definition for the method is as follows:
StreamedContent capturedImage;
public void onCapture(CaptureEvent captureEvent) {
byte[] data = captureEvent.getData();
capturedImage = new DefaultStreamedContent(new
ByteArrayInputStream(data));
}Since capturedImage is an instance of StreamedContent and it will be visualized with the p:graphicImage component, the backing bean containing the capturedImage object should be defined in the session scope. The reason behind that is that the image will be fetched in a separate request from the rest of the page content and in order to retrieve the captured image, the content should be stored in the session context.
Tip
When the graphicImage component is fed with an image created dynamically, its cache attribute should be set to false in order to tell the regarding browser to disable caching on the resource.
With PrimeFaces version 5.2, the photoCam component is re-implemented with an HTML5 powered version where it gracefully degrades to a Flash Player. With this version, HTML5 browser support will not be available.
One other possible implementation for capturing the image could be saving the image to the disk and showing the saved image via a media display component such as graphicImage.
public void onCaptureWithSave(CaptureEvent captureEvent) {
byte[] data = captureEvent.getData();
ServletContext servletContext = (ServletContext)
FacesContext.getCurrentInstance().getExternalContext()
.getContext();
String newFileName = servletContext.getRealPath("") +
File.separator + "resources" + File.separator + "images" +
File.separator + "captured.png";
FileImageOutputStream imageOutput;
try {
imageOutput = new FileImageOutputStream(new
File(newFileName));
imageOutput.write(data, 0, data.length);
imageOutput.close();
}
catch(Exception e) {
throw new FacesException
("Error in writing captured image.", e);
}
}In order to capture the image, the user might need to authorize the settings of the HTML5 Player or Flash Player, by allowing access to the camera and the microphone. The user will be notified with a dialog box of the browser or of the Flash Player before viewing the current image. The images for notifications are given as follows:
Notification of HTML5 Player
Notification of Adobe Player
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter7/captureImage.jsf.