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.
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 ?
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.
Does it work in Android? I developed a visualforce with this and always is asking for locate the file.
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.
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.
Is there any image size limitation for uploading image to the salesforce like upto 1mb or 2mb ?
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?
Hi
I trying to capture the image and attach it to a record of the custom object using lightning.Please help
are you getting any error ? you can combine this blog and https://developer.salesforce.com/blogs/developer-relations/2015/11/create-lightning-component-drag-drop-profile-pictures.html to get result.
Hi im trying to capture the vedio. But its not working out. Can u pls help
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
Hi,
Can I restrict accessing the Gallery i.e Choose from Existing and allow only accessing the camera?
option not appearing to “take photos” or “choose existing”
It works capture image through mob camera for salsforce app what I was looking for , thanks Jitendra for you post.