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.

Visualforce Camera Access - Front Page
Visualforce Camera Access – Front Page
Visualforce Camera Access - Use Camera Prompt
Visualforce Camera Access – Use Camera Prompt

Visualforce Camera Access - Camera Mode
Visualforce Camera Access – Camera Mode
Visualforce Camera Access - Recently clicked image selected
Visualforce Camera Access – Recently clicked image selected
Visualforce Camera Access - Redirected to Chatter File
Visualforce Camera Access – Redirected to Chatter File

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”

Apex Controller :

/**
 * Created By   :   Jitendra Zaa
 * Date         :   28 Nov 2014
 * Description  :   Demo of accessing Camera using Visualforce and uploading file in Chatter.
 *              :   Article on http://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="http://JitendraZaa.com">http://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.

Related posts

  • Bill Boda

    I just tried this on our sandbox with an iPad and it crashes the entire SalesForce1 app when you hit the “Take Photo or Video” prompt which normally initializes the camera. Any ideas on how to fix this? Thanks!

    • Interesting, Same program is running in my IPhone6+. Did you tried in other device ?

      • Bill Boda

        I have tried it on multiple iPads and the same failure occurs. It works on my iPhone 6 (not plus) and it works fine there too. I have submitted a support case with Salesforce.

  • Edgar Yucel Moran

    Does it work in Android? I developed a visualforce with this and always is asking for locate the file.

    • Srinath

      Did you get a solution for this? I am facing a similar issue. Interesting thing is that – this works on Android chrome browser with one/one.app. Unfortunately, that is not the case with Salesforce1 downloadable app.

      • Edgar Yucel Moran

        No yet, but I’m still looking for something, also maybe I’ll explore some new scripts or frameworks, I hope soon to have something to post in my blog to and solve this.

  • Nilesh

    Is there any image size limitation for uploading image to the salesforce like upto 1mb or 2mb ?

  • siva kumar

    Hi Jitendra,

    This code works fine for Salesforce1 app. But I want the same functionality in desktop browser as well i.e. upload the picture from computer and take picture from camera. Is this possible?