Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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,

share|improve this question
    
I got the same task like yours, only difference I work with custom object. And now I am researching what we can to do in our case. Probably the biggest problem - it is a QR decoding. I didn't find any good web services for that (like Google service for QR code creating). But I found zxing project on Github. And It looks like we have to write a native Mobile app to make that code work... By the way, I saw QR code reader button in special SF app for Dreamforce. And we have no that functionality in SF1 App... So let's stay in touch. –  Denis Brown Jan 22 at 17:11
add comment

4 Answers

up vote 13 down vote accepted

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.

share|improve this answer
    
About this: You're not really "scanning", though, are you? You're taking a picture and hoping there's enough light, focus, etc. Not that I'm bashing the technique, because it is cool, I just think it'd be relatively error prone compared to an actual live feed scanning technique, like a true mobile app scanner would do (like QR Scanner on the AppStore). –  sfdcfox Jan 20 at 19:13
2  
Correct - from the question, "I was wondering if I could do this using salesforce1 mobile app for iPhone/Android with a visualforce page and access the camera?". I'm guessing that a true mobile app scanner would have better results, but without the S1 integration. –  metadaddy Jan 20 at 19:18
add comment

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.

share|improve this answer
    
Kier, I ended doing the same thing as you, but while testing it using an iPhone(5S) and almost all the times it couldn't decode the QR code. I had to do this as a POC for a client who wanted to use Salesforce1 official app as a Badge scanner so in an event each attendee could use the app to scan any other attendee badge and redirect to his chatter profil so he can follow him or not. –  melmoussaoui Feb 2 at 12:00
    
Yep, didn't work on a phone for me either. For that I uploaded the image to a server and decoded it there. Its a pretty poor user experience though, and I definitely wouldn't recommend it unless there is wifi. –  Bob Buzzard Feb 3 at 9:37
    
@BobBuzzard On android 4.4 this functionality shouldn't work from Salesforce1 app because, app restrict access to "Choose file" button. –  regal Feb 7 at 8:55
    
The issue for me wasn't the taking of the picture. Even if I uploaded a small QR code image it still couldn't process it. –  Bob Buzzard Feb 7 at 9:30
add comment

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).

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.