Use Salesforce1 mobile app to access camera

Question

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,

Answer 1

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.

Answer 2

You can do this, although you don't scan the code, rather you take a picture and attempt to process it. I've written a blog post on how to do this at:

http://bobbuzz.me.uk/1fJ12Xw

You can do it all on device using the jsqrcode JavaScript port of google zebra crossing (zxing). I couldn't get it working on a phone (presumably down to lack of processing power) but it works on an iPad and desktop. While it might seem like a strange thing to want to do, given how many free QR code scanner apps there are, the beauty of this is that it keeps you in the Salesforce1 application.

Answer 3

At the time of this answer, the HTML5 draft allows access to camera hardware, although no mobile browsers currently support accessing the camera (see caniuse.com for current browser support). Since no support is available at the time this answer was posted, one must resort to a mobile framework that supports camera access, such as phonegap, whose purpose lies in its name: to provide gap coverage for features that phones should support, but do not. It is highly likely that future browsers will allow direct camera access, and at that time, mobile scripting support should be sufficiently powerful to be able to read QR Codes (or, indeed, any type of machine-readable code).

Answer 4

As part of your question, you mentioned

"if I could do this using salesforce1 mobile app for iPhone/Android with a visualforce page and access the camera"

This is possible to do using Visualforce if you are using the Mobile SDK container. As sfdcfox points out, mobile browsers current do NOT offer this capability - neither does Salesforce1.

On the other hand, the Mobile SDK internally uses Cordova (PhoneGap) to support features such as Camera.

You can then directly call Cordova method as shown below to invoke the camera

function takePic() {
    navigator.camera.getPicture(onPicSuccess, onPicFail, { quality: 50});
}

Salesforce Developer Evangelist Sandeep Bhanot published this tutorial and this repo which explains how this approach works in detail.

Of course, this approach will NOT work if you are trying to use Salesforce1.