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”

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.

Posted

in

,

by


Related Posts

Comments

19 responses to “Access Camera and Audio recorder of Mobile device in Visualforce and upload as chatter file”

  1. Bill Boda Avatar
    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!

    1. Jitendra Zaa Avatar

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

      1. Bill Boda Avatar
        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.

  2. Edgar Yucel Moran Avatar
    Edgar Yucel Moran

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

    1. Srinath Avatar
      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.

      1. Edgar Yucel Moran Avatar
        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.

  3. Nilesh Avatar
    Nilesh

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

  4. siva kumar Avatar
    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?

  5. pna Avatar
    pna

    Hi
    I trying to capture the image and attach it to a record of the custom object using lightning.Please help

  6. pna Avatar
    pna

    Hi im trying to capture the vedio. But its not working out. Can u pls help

  7. pna Avatar
    pna

    Im using the below line for vedio capturing but when I open the camera option i dont get the vedio recording option in salesforce1 mobile app.Im able to take only pics not the vedio.Can u pls suggest any solution on this

  8. piyush arora Avatar
    piyush arora

    Hi,

    Can I restrict accessing the Gallery i.e Choose from Existing and allow only accessing the camera?

  9. Ron Avatar
    Ron

    option not appearing to “take photos” or “choose existing”

  10. zakir Avatar
    zakir

    It works capture image through mob camera for salsforce app what I was looking for , thanks Jitendra for you post.

  11. Kavish Sehgal Avatar
    Kavish Sehgal

    Hey All,

    I am looking for something similar on Salesforce1 app where i can give an option to just record the audio and save it in salesforce.
    Any help would be appreciated.

  12. Shailendra Shuklashailendra Avatar

    it doesn’t open camera but file uploader

  13. Abhishek Mishra Avatar
    Abhishek Mishra

    Hello Sir,
    Great Solution.
    But is there any way that we can restrict only to ‘take photo’ while uploading any file from the mobile phone?

    Regards,
    Abhishek

Leave a Reply to SrinathCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading