Camcorder

Added by Steve Maryka, last edited by Philip Breau on Jan 17, 2013  (view change)
Table of Contents

Camcorder

The camcorder component allows the developer to capture video using a device's video recording mechanism, and then upload the video file to the server to be processed or stored. For a non-container environment, a file upload button will be used as a fallback to allow the user to select an audio file on their local file system, which can then be uploaded in a similar manner. If using a desktop browser, the form must have a mulitpart encode (enctype="multipart/form-data"). The <mobi:uploadHelper> component can also be used for this purpose.

Usage

An ICEmobile Device Container must be detected for this component to capture video from the device.

Basic use with no user parameters.

You will typically use the container upload button in conjunction with this component.

<h:form id="cform2" enctype="multipart/form-data" >
   <mobi:camcorder id="camcorder" value="#{videoBean.videoClip}"/>
   <mobi:commandButton type="button" value="Upload"/>
</h:form>

The Map object is value bound to a backing bean and the File and the contentType can be extracted from the Map in the backing bean.

public void setVideoClip(Map videoMap){
   this.videoClip = videoMap;
   File videoFile = (File)videoMap.get("file");
   String contentType = (String)videoMap.get("contentType");
   // You can use these objects to listen to the clip with mobi:video.
   // The contentType is VERY important in playing back video
}

Can use attribute maxtime to limit the duration of the audio clip

<h:form id="audioForm" enctype="multipart/form-data" >
   <mobi:video id="mic_two" value="#{videoBean.videoClip}"
       maxtime="10"/>
   <mobi:commandButton type="button" value="Upload"/>
</h:form>

Use with <mobi:thumbnail> and valueChangeListener

<h:form >
   <mobi:uploadhelper/>
   <mobi:camcorder id="camcorder" valueChangeListener="#{videoBean.methodOne}"
       value="#{videoBean.videoClip}"/>
   <mobi:thumbnail for="camcorder"/>
   <mobi:commandButton type="button" value="Upload"/>
</h:form>

Any validation that is required on this component can be done via the valueChangeListener as follows:-

 public void methodOne(ValueChangeEvent event){
// use this method to check filetype and can possibly remove the file if not correct filetype
     if (event!=null){             
        Map compMap = (HashMap)event.getNewValue();       
       //can get file from map and check for valid fileType and throw FacesMessage, convert file to other type, 
         ..........
    }

Component Documentation

camcorder
thumbnail
uploadhelper
video
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.

© Copyright 2016 ICEsoft Technologies Canada Corp.