Microphone

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

Overview

Since 4.0

The mobi:micrBophone component renders a button that leverages HTML5 "getUserMedia" techniques to record audio and upload it to the server, storing the sound clip as the value of this component. If no microphone 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 audio file to upload instead of recording one.

As of ICEfaces 4.2 the microphone component relies on HTML5 "getUserMedia" techniques for access to the microphone(s) on hardware devices. Prior to ICEfaces 4.2, the microphone 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 Microphone component, simply place the mobi:microphone tag inside a form and bind the value to a backing bean property.

<h:form>
	<mobi:microphone id="microphone"
			value="#{bean.clip}"
			buttonLabel="Microphone"
			captureMessageLabel="Sound clip captured"/>
</h:form>

private Map clip = new HashMap();
public void setClip(Map clip) {
	this.clip = clip;
}

public Map getClip() {
	return clip;
}

Supported Platforms

This component relies on the HTML5 "getUserMedia" feature support in the client browser to provide access to the device's native microphone device(s). Support for accessing the native microphone(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 Not Supported
Desktops Chrome Supported
Desktops Edge Supported
Desktops Safari Browse Only
Desktops IE 11 Browse Only
In order to access the microphone 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 sound clip is uploaded, this map will contain the following keys: 'file' will be mapped to the File object representing the sound clip, '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 sound clip 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

This component is not supported on iOS devices due to lack of support of the getUserMedia API and of other HTML5 features.

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.