{"id":4683,"date":"2015-07-11T00:39:04","date_gmt":"2015-07-11T00:39:04","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4683"},"modified":"2015-07-11T01:19:12","modified_gmt":"2015-07-11T01:19:12","slug":"barcode-scanner-component-in-salesforce-lightning-video","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-scanner-component-in-salesforce-lightning-video\/","title":{"rendered":"Barcode scanner component in Salesforce lightning – Video"},"content":{"rendered":"

This post is rewritten of previous post for decoding Barcode using JavaScript in\u00a0Salesforce1 mobile application<\/a>. Assuming you already have static\u00a0resource of javascript library\u00a0\u00a0QuaggaJS<\/a>\u00a0(we need only js file from dist folder).<\/p>\n

This code was written live on my streaming channel<\/a> on 10-Jul-2015, You can find recording here<\/a>.<\/p>\n

\"Barcode<\/a>
Barcode Scanner Lightning App<\/figcaption><\/figure>\n

I have not added capability for image preview like I did in previous did, but it can be easily done by referring this blog post from Peter Knolle<\/a>.<\/p>\n

<\/p>\n

BarcodeApp.app<\/strong><\/p>\n

\r\n<aura:application >\r\n    <ltng:require scripts="\/resource\/Quaggajs" \/>\r\n    <c:BarcodeScanner \/>\r\n<\/aura:application>\r\n<\/pre>\n
BarcodeScanner.cmp<\/strong><\/p>\n
\r\n<aura:component >\r\n    <aura:attribute name="codeOutput" type="String" \/>\r\n\r\n    <input type="file" accept="image\/*;capture=camera" aura:id="file" \/>\r\n    <ui:button label="Scan" press="{!c.scan}"\/>\r\n    <br \/>\r\n    Output : <ui:outputText value="{!v.codeOutput}" \/>\r\n\r\n<\/aura:component>\r\n<\/pre>\n
BarcodeScannerController.js<\/strong><\/p>\n
\r\n({\r\n\tscan : function(component, event, helper) { \r\n\r\n        var fileInput = component.find("file").getElement();\r\n        var file = fileInput.files[0] ; \r\n\r\n        var App = {\r\n            init: function() {\r\n                App.attachListeners();\r\n            } ,\r\n            attachListeners: function() {\r\n                 if(file)\r\n                 {\r\n                     var imgURL = URL.createObjectURL(file);\r\n\t\t\t\t\t App.decode(imgURL);\r\n                 }else{\r\n                     component.set("v.codeOutput","Error !!! Select file to scan") ;\r\n                 }\r\n            },\r\n            decode: function(src) {\r\n                Quagga.decodeSingle(\r\n                    {\r\n                      inputStream: {\r\n                        size: 640,\r\n                        singleChannel: false\r\n                      },\r\n                      locator: {\r\n                        patchSize: "large",\r\n                        halfSample: false\r\n                      },\r\n                      decoder: {\r\n                        readers: ["upc_reader", "code_128_reader", "code_39_reader", "code_39_vin_reader", "ean_8_reader", "ean_reader", "upc_e_reader", "codabar_reader"]\r\n                    },\r\n                      locate: true,\r\n                      src: src\r\n                    },\r\n                 function(result){\r\n                      if(result && result.codeResult && result.codeResult.code)\r\n                      {\r\n                        component.set("v.codeOutput",result.codeResult.code) ;\r\n                      }else{\r\n                        component.set("v.codeOutput","Error !!! Unable to read Barcode") ;\r\n                      }\r\n                    });\r\n            }\r\n        };\r\n        App.init();\r\n\r\n\t}\r\n})\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
Recording of Live code – Creating Barcode decoder component using Javascripyt library in Salesforce Lightning<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311,212],"class_list":["post-4683","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component","tag-video-tutorial"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":7587,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/scan-barcode-in-lwc-natively\/","url_meta":{"origin":4683,"position":0},"title":"Scan Barcode in LWC Natively","author":"Jitendra","date":"June 6, 2022","format":false,"excerpt":"Demo & Source code of using Barcode API in Salesforce LWC","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode in LWC","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4667,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-decoder-in-salesforce1-very-fast-and-simple\/","url_meta":{"origin":4683,"position":1},"title":"Javascript based Barcode decoder in Salesforce1 – Very fast and Simple","author":"Jitendra","date":"July 10, 2015","format":false,"excerpt":"Very fast and Simple Barcode decoder in Salesforce1 using quaggaJS javascript library","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode decoder sample in Salesforce 1","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/download-1.png?resize=525%2C300&ssl=1 1.5x"},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":4683,"position":2},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":4683,"position":3},"title":"Share JavaScript Code in Lightning Web Component to Read URL Parameters","author":"Jitendra","date":"May 4, 2020","format":false,"excerpt":"Building Reusable LWC Component to read query string from URL","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":4683,"position":4},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":4683,"position":5},"title":"Lightning Web Component Event Handling – Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4683","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4683"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4683\/revisions"}],"predecessor-version":[{"id":4692,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4683\/revisions\/4692"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4683"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4683"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4683"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}