Camera

Added by Arturo Zambrano, last edited by Ken Fyten on Feb 10, 2017  (view change)
Table of Contents

Overview

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.

Getting Started

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;
}

Supported Platforms

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.

Attributes

TagLib Documentation
This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available here.

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.

Event Listeners

None.

Client Behavior Events

None.

JavaScript API

None.

Keyboard Support

Standard keyboard actions for HTML buttons are supported, such as tabindex and pressing the enter or space keys to activate the button.

Known Issues

Additional Resources

Sample Applications

This component appears in the following ICEfaces sample applications:

Tutorials

This component appears in the following ICEfaces tutorials:

None
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2021 ICEsoft Technologies Canada Corp.