Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file

In this article we will see how to use Camera and Audio recorder of mobile device in Visualforce and upload as chatter file. It may look that it is very tricky to access device camera and audio control in Visualforce however you may be right if there were no HTML5. Thanks to HTML5 for magic.

All we have to do is to use “accept” attribute of “apex:inputfile”. accept=”image/*;capture=camera” will inform device that current application (in our case Salesforce1) needs to access Camera of device.

//To take snap from Camera
accept=”image/*;capture=camera”

//To record Video
accept=”video/*;capture=camcorder”

//To record Audio
accept=”audio/*;capture=microphone”

Note : Safari / Iphone does not support microphone recording

Apex Controller :

/**
 * Created By   :   Jitendra Zaa
 * Date         :   28 Nov 2014
 * Description  :   Demo of accessing Camera using Visualforce and uploading file in Chatter.
 *              :   Article on https://jitendrazaa.com
 * */
public class CameraAccess{
    public ContentVersion cont {get;set;}

    public CameraAccess() {
        cont = new ContentVersion();
    }      

    public PageReference saveFile()
    {
        //PathOnClient is Mandatory
        cont.PathOnClient = cont.title;

        //By default Origin value is "C" that means Content must be enabled in Org, so we need to explicitly set Origin as H
        cont.Origin = 'H';
        insert cont;

        //redirect to path where file is saved
        return new PageReference('/'+cont.id);
    }
}

Visualforce Page :

<apex:page controller="CameraAccess" standardStylesheets="false" showHeader="false">

 <apex:stylesheet value="{!URLFOR($Resource.BootStrap3, '/bootstrap-3.1.1-dist/css/bootstrap.css')}" />
 <div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="jumbotron">
                <h1> Camera Access in Visualforce using HTML 5 </h1>
                <a href="https://jitendrazaa.com">https://jitendrazaa.com</a>
            </div>
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <apex:form>
                     <p>
                        <apex:inputFile value="{!cont.VersionData}"  accept="image/*;capture=camera" filename="{!cont.Title}" />
                     </p>

                     <p>
                        <apex:commandButton StyleClass="btn btn-danger" action="{!saveFile}" value="Save File" />
                     </p>
                    </apex:form>
                </div>
            </div>
        </div>
    </div>
</div>

</apex:page>

This is very good article by Eric on html5rocks.com which covers this topic in very detail.