View Source

h2. 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.

{tip}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|http://www.icesoft.org/blog/the-future-of-bridgeit/].{tip}


h2. 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.
{code:xml}
<h:form>
<mobi:microphone id="microphone"
value="#{bean.clip}"
buttonLabel="Microphone"
captureMessageLabel="Sound clip captured"/>
</h:form>
{code}
{code:java}
private Map clip = new HashMap();
public void setClip(Map clip) {
this.clip = clip;
}

public Map getClip() {
return clip;
}
{code}

h2. 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 |

{tip}In order to access the microphone the web-application must be served to the browser from a "[trusted origin|https://www.w3.org/TR/secure-contexts/#is-origin-trustworthy]" 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.{tip}

h2. Attributes

{tip:title=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|http://res.icesoft.org/docs/v4_latest/mobi/tld/].{tip}

{panel}
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.
{panel}

{panel}
The *buttonLabel* specifies the label of the button before it is activated.
{panel}

{panel}
The *captureMessageLabel* specifies the label to be displayed on the button on a successful sound clip capture.
{panel}

h2. Event Listeners

None.

h2. Client Behavior Events

None.

h2. JavaScript API

None.

h2. Keyboard Support

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

h2. Known Issues

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

h2. Additional Resources


h4. Sample Applications

This component appears in the following ICEfaces sample applications:

* *[ICEfaces Mobile Showcase|http://icefaces-showcase.icesoft.org/showcase-mobile.jsf]*


h4. Tutorials

This component appears in the following ICEfaces tutorials:

*None*