+ Start a Discussion
SivaGSivaG 

Image Capture in Visual force page

Hi,

I have a requirement to capture an image in visual force page either from computer or through Camera(Webcam/phone camera/tablet camera). What all frameworks/technologies that we have to implement in visual force page to accomplish this.

Thanks
Siva
Best Answer chosen by SivaG
JyothsnaJyothsna (Salesforce Developers) 
Hi,

You'll need something like Flash or HTML5 to accomplish your goal. There is no native 'image capture' function in Visualforce.


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 the 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>

Please check the below link for more examples.

https://davidwalsh.name/browser-camera

Hope this helps you!
Best Regards,
Jyothsna

All Answers

JyothsnaJyothsna (Salesforce Developers) 
Hi,

You'll need something like Flash or HTML5 to accomplish your goal. There is no native 'image capture' function in Visualforce.


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 the 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>

Please check the below link for more examples.

https://davidwalsh.name/browser-camera

Hope this helps you!
Best Regards,
Jyothsna
This was selected as the best answer
AchtungAchtung
Hi Jyothsna,

What does the PathonClient, Origin and Title denote on your code above when saving the image captured? Thanks!