Since 4.0
The mobi:camera component renders a button that, when pressed by the user, opens a viewfinder dialog to allow the user to take a picture using the device's native camera, and then subsequently upload it to the server, storing the image as the value of this component. If no webcam is available, or the user denies access to use it, a file upload control will be rendered by the component that can be used to select an image file to upload instead of taking a picture.
As of ICEfaces 4.2 the camera component relies on HTML5 "getUserMedia" techniques for access to the device's camera(s). Prior to ICEfaces 4.2, the camera relied on the BridgeIt app. to access the camera on mobile devices. However, as of January, 2017, the BridgeIt project has been deprecated.
To start using the Camera component, simply place the mobi:camera tag inside a form and bind the value to a backing bean property.
<h:form>
<mobi:camera id="camera"
value="#{bean.image}"
buttonLabel="Camera"
captureMessageLabel="Photo captured"/>
</h:form>
private Map image = new HashMap();
public void setImage(Map image) {
this.image = image;
}
public Map getImage() {
return image;
}
This component relies on the HTML5 "getUserMedia" feature support in the client browser to provide access to the device's native camera device(s). Support for accessing the native camera(s) varies depending on the underlaying platform and browser version. The table below provides an overview of the platform/browser support as of the ICEfaces 4.2 release.
| Platform | Browser | Notes |
|---|---|---|
| Android | Chrome | Supported |
| iOS | Safari | Supported via Browse button |
| Desktops | Chrome | Supported |
| Desktops | Edge | Supported |
| Desktops | Safari | Browse Only |
| Desktops | IE 11 | Browse Only |
In order to access the camera the web-application must be served to the browser from a "trusted origin" server. While "localhost" is considered a trusted origin server, in any other case you will need to access your web-application via the "https:" protocol and configure your web-server with a proper TLS SSL certificate from a trusted certificate authority - a self-signed SSL certificate will not work.
TagLib Documentation
This section covers attributes involved in the typical use-cases for this component.
The value attribute must resolve to an object of type java.util.Map<String,Object> in the backing bean. Once the image is uploaded, this map will contain the following keys: 'file' will be mapped to the File object representing the image, 'contentType' will be mapped to a string that indicates the content type of the file, and 'relativePath' will be mapped to a string containing the relative path of the file in the server.
The buttonLabel specifies the label of the button before it is activated.
The captureMessageLabel specifies the label to be displayed on the button on a successful image capture.
None.
None.
None.
Standard keyboard actions for HTML buttons are supported, such as tabindex and pressing the enter or space keys to activate the button.
This component appears in the following ICEfaces sample applications: