Recently there was a need for Barcode decoder component in Salesforce1 using Javascript. I tried few libraries like JOB (Javascript Only Barcodereader), this post from Bob Buzzard (it uses JOB library) and QuaggaJS. And after comparing all these, decided to go with quaggajs library because of its speed. Bob Buzzard already wrote very good article on JOB library and I would suggest to try that code as well. You can find same code rewritten for lightning component here.
Quaggajs supports Code 128, Code 39, Code 39 VIN, EAN, EAN-8, UPC, UPC-E and Codabar format of Barcode.
To run this code you will need 3 static resources in your visualforce page :
- JQuery
- Bootstrap (totally optional and can be safely ignored) and
- QuaggaJs
If you want, below images can be used to try this code. Also, please note – If you are using mobile camera to capture barcode, make sure image is white else this library will not work.
Create a Visualforce page with below code, To keep code very simple, I am only displaying extracted code from Barcode on Visualforce page.
<apex:page showheader="false" sidebar="false" standardStylesheets="false" >
<apex:includeScript value="{!$Resource.JQuery}"/>
<apex:includeScript value="{!$Resource.Barcode_quaggaJS}"/>
<apex:stylesheet value="{!URLFOR($Resource.BootStrap3, 'bootstrap-3.1.1-dist/css/bootstrap.min.css')}"/>
<div class="container">
<img width="320" height="240" src="" id="picturePreview" style="border:1px solid black" /> <br />
<input id="barcodeFileInput" type="file" accept="image/*;capture=camera" /> <br />
<button id="startDecode" class="btn btn-primary">Decode</button>
<div id="codeResult"> </div>
</div>
<script type="text/javascript">
$(function() {
var App = {
init: function() {
App.attachListeners();
} ,
debugApp : function(msg){
if(true)
{
debugCon = $("#codeResult");
debugCon.text(debugCon.text()+" , "+msg) ;
}
},
attachListeners: function() {
var self = this;
$("#startDecode").on("click", function(e) {
var input = $("#barcodeFileInput");
if (input[0].files && input[0].files.length) {
var tmpImgURL = URL.createObjectURL(input[0].files[0]) ;
App.decode(tmpImgURL);
}
});
$("#barcodeFileInput").on("change",function(e){
$("#codeResult").text(" ");
var files = e.target.files ;
if (files && files.length > 0) {
file = files[0];
try {
var URL = window.URL || window.webkitURL;
var imgURL = URL.createObjectURL(file);
$("#picturePreview").attr("src",imgURL);
}
catch (e) {
try {
var fileReader = new FileReader();
fileReader.onload = function (event) {
$("#picturePreview").attr("src",event.target.result);
};
fileReader.readAsDataURL(file);
}
catch (e) {
$("#codeResult").text("Fail !!! createObjectURL and FileReader are not supported by browser");
}
}
}
});
},
detachListeners: function() {
$("#startDecode").off("click");
},
decode: function(src) {
Quagga.decodeSingle(
{
inputStream: {
size: 640,
singleChannel: false
},
locator: {
patchSize: "large",
halfSample: false
},
decoder: {
readers: ["upc_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "ean_8_reader", "ean_reader", "upc_e_reader", "codabar_reader"]
},
locate: true,
src: src
},
function(result){
if(result && result.codeResult && result.codeResult.code)
{
$("#codeResult").text('Code - '+result.codeResult.code);
}else{
$("#codeResult").text("unable to read");
}
});
}
};
App.init();
});
</script>
</apex:page>
Make sure this visualforce is marked to use in Salesforce1 mobile application. After this, Create a Visualforce tab and in Mobile Navigation, enable it for Salesforce 1.
Nice!
Hi sir this is nt working..plz tell me what to do..
Whats error you are getting ? How you are performing testing
hello,
I am getting the following error:
1) Uncaught SyntaxError: Invalid or unexpected token
2) TestBarcodeReader:71 Uncaught ReferenceError: Quagga is not defined
at Object.decode (TestBarcodeReader:71)
at HTMLButtonElement. (TestBarcodeReader:36)
at HTMLButtonElement.dispatch (JQuery:3)
at HTMLButtonElement.q.handle (JQuery:3)
decode @ TestBarcodeReader:71
(anonymous) @ TestBarcodeReader:36
dispatch @ JQuery:3
q.handle @ JQuery:3
I Need Format EAN-13 decode thax
QuaggaJS size is more than 10 MB due to which I am unable to upload it as a static resource on my developer org. Is there any alternate way to do this?
You only need js file from QuaggaJS, ignore remaining files.
I dont receive any js errors. But am not able to decode any of the images shared here. Receiving “unable to read” message. Can you tell me what the issue can be ?
What is format of barcode you are trying to read ? this example only supports – “upc_reader”, “code_128_reader”, “code_39_reader”, “code_39_vin_reader”, “ean_8_reader”, “ean_reader”, “upc_e_reader”, “codabar_reader” formats.
Hey..Its very great article.
I just wanted to know what kind of Jquery file which i need to use. Will you update the link which is related to Jquery.
Hi Jitendra,
your articles is very great..!.
My question is; For barcode scanning i’ve to use barcode reader machine and not mobile or tablet.
Read the barcode and make entry in custom object (Like a Mall)
My thinking is we can create a VF page for custom object and read the barcode and add data in the field and save the record.
But the question is how VF page can access data from barcode Machine.
Hi Amol, You will need to access Salesforce webservice to store barcode from machine to Salesforce custom object. Barcode machine should have ability to invoke webservices.
Hi Jitendra,
I got two error. ”
1. Uncaught ReferenceError: Quagga is not defined”.
2. Barcode_quaggaJS:1 Uncaught SyntaxError: Unexpected token !
Please help me, how to resolve it.
Thank you.
Sanjeev Shukla
sanjeev.shukla@kvpcorp.com
You would need to add Quagga Javascript library in your visualforce page. You can download it from here – http://serratus.github.io/quaggaJS/
Hi Jitendra,
Can you provide the Link of the javacript which we need to add on Visualforce page?
Thanks,
Geeta Garg
Does this still work? When I press decode nothing happens.
Exactly…Nothing happened.
Same here, anyone got a solution?
Yes same here. decode button didn’t work. it refreshes the page everytime i clicked on decode. Did you get any luck later?
Hi Jitendra, this is great simple code. But i have same issues with people here “unable to read”.
I believed my JQuery & QuaggaJS are working well. I use jquery-1.9.0.min.js & latest version of quagga
Any solution here? Thanks
Hi Jitendra,
I have followed your steps,but i am unable to decode.When i’m trying to press decode button i didn’t get any message.Its simply showing blank.
I could make it work after a few changes:
1. Upload as static resource only the jquery-3.3.1.min.js and quagga.min.js scripts (my first attemt had a ton of directories in quagga zip file).
2. I was referencing them in VF page like this:
Hi Begital
Decode is not working and I don’t know what are the js file to upload in Static Resource.
Decode is not working and I don’t know what are the js files to upload in Static Resource
can you please provide the quagga.min.js file which i need to upload ,and can you please say how did you reference that in vf page.
Guys
Did anyone did hit a error below, i tried uploading it as a static resource as a zip and also as the individual JS file. It doesnt work.
Uncaught ReferenceError: Quagga is not defined
at Object.decode (Scanner:74)
at HTMLButtonElement. (Scanner:37)
at HTMLButtonElement.dispatch (JQuery:2)
at HTMLButtonElement.y.handle (JQuery:2)
Did anyone hit the same issue and was able to make it work
Thanks in advance
Hello,
thanks for this. How can i process this with APEX?
thanks
Peter
Unable to upload 17 MB Quaggajs file in static resource