[SalesForce] Use Salesforce1 mobile app to access camera

I have this requirement : scan QR code and search for the related contact in salesforce and show it in a mobile app.

I was wondering if I could do this using salesforce1 mobile app for iPhone/Android with a visualforce page and access the camera? or I have to create a new app using phoneGap?

Thanks,

Best Answer

You can access the camera from a Salesforce1 app, using the HTML <input> tag with accept="image/*" to access either the camera or photo library, for example

<input id="photoFile" type="file" accept="image/*"/>

You can then use the HTML5 File API to upload image data. Here's an example using the Force.com REST API - you would change this to process the QR code as necessary.

$(document).ready(function() {
  $("#photoFile").change(handlePhoto);
});

function handlePhoto(evt){
  var file = evt.target.files[0];
  var reader = new FileReader();

  reader.onload = (function(theFile) {
    return function(e) {
      // Extract raw base64 data from data URL
      imageData = e.target.result.split(',')[1];

      forcetkClient.create('ContentVersion', {
        "Origin": "H",
        "PathOnClient": file.name;,
        "VersionData": imageData
      }, function(data) {
        $('#status').html("<p>Uploaded image</p>");
      }, function(error){
        alert(JSON.stringify(error));
      });
    };
  })(file);

  reader.readAsDataURL(file);
}

The Dreamforce 2013 session Only One Cure for the App Boogie Fever demonstrates this technique; the code from the session is on GitHub.

Related Topic