{"id":7587,"date":"2022-06-06T16:01:20","date_gmt":"2022-06-06T20:01:20","guid":{"rendered":"https:\/\/www.jitendrazaa.com\/blog\/?p=7587"},"modified":"2022-06-06T16:19:02","modified_gmt":"2022-06-06T20:19:02","slug":"scan-barcode-in-lwc-natively","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/scan-barcode-in-lwc-natively\/","title":{"rendered":"Scan Barcode in LWC Natively"},"content":{"rendered":"\n<p>Around 7 years back I have written <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-decoder-in-salesforce1-very-fast-and-simple\/\">this post<\/a> which shows how Barcode scan can be supported in Visualforce and <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-scanner-component-in-salesforce-lightning-video\/\">in aura component<\/a> with the help of an external javascript library <a href=\"https:\/\/serratus.github.io\/quaggaJS\/examples\/\">quagga<\/a>.<\/p>\n\n\n\n<p>Salesforce recently released a <a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.reference_lightning_barcodescanner\">new Barcode API <\/a>which now supports barcode scanning natively on LWC for mobile devices.  As it&#8217;s supported natively, we don&#8217;t need to worry about maintaining 3rd party Javascripts, Locker services, performance issues, etc. <\/p>\n\n\n\n<p>At the time of writing this blog post, <a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.reference_lightning_barcodescanner_constants\">around 10 different types<\/a> of barcodes are supported. <\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Below source code demonstrate how simple it is to use in LWC. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>import <em>lightning\/mobileCapabilities <\/em><\/li><li>initiate scanner variable using method <em>getBarcodeScanner()<\/em><\/li><li>set <em>configuration<\/em> suggesting which barcodes are supported<\/li><li>use <em>begineCapture() <\/em>method top launch mobile camera<\/li><li>read the result or handle error<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Using Native Barcode API in LWC - Salesforce\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/Su-qV10uVuw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<script src=\"https:\/\/gist.github.com\/JitendraZaa\/577d1061637bdef7c9f7d70e99893166.js\"><\/script>\n\n\n\n<p><strong>Resources :<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/developer.salesforce.com\/docs\/component-library\/documentation\/en\/lwc\/lwc.reference_lightning_barcodescanner_constants\">Supported QR Code Types<\/a><\/li><li><a href=\"https:\/\/qr.io\/?gclid=CjwKCAjw7IeUBhBbEiwADhiEMb2QVyMnnYJffsI1Ym6uVxiC4z5AarAtW2FYpx4xBLhKC1Yjh57iwBoCirMQAvD_BwE\">QR Code Generator<\/a><\/li><li><a href=\"https:\/\/poscatch.com\/barcode-generator\/\">Barcode Generator<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Demo &#038; Source code of using Barcode API in Salesforce LWC<\/p>\n","protected":false},"author":1,"featured_media":7600,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":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":"","jetpack_post_was_ever_published":false},"categories":[9],"tags":[524,462,464,212],"class_list":["post-7587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-salesforce","tag-barcode","tag-lightning-web-component","tag-lwc","tag-video-tutorial"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2022\/06\/Barcode-in-LWC.png?fit=1119%2C722&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":7044,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/limitations-of-lwc\/","url_meta":{"origin":7587,"position":0},"title":"Limitations of LWC","author":"Jitendra","date":"April 22, 2020","format":false,"excerpt":"Considerations & Limitations of Lightning Web Component in Salesforce","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"LWC Not Supported","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/04\/LWC-Not-Supported.png?fit=1200%2C569&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":4683,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-scanner-component-in-salesforce-lightning-video\/","url_meta":{"origin":7587,"position":1},"title":"Barcode scanner component in Salesforce lightning &#8211; Video","author":"Jitendra","date":"July 11, 2015","format":false,"excerpt":"Recording of Live code - Creating Barcode decoder component using Javascripyt library in Salesforce Lightning","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Barcode Scanner Lightning App","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/07\/Barcode-Scanner-Lightning-App.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":4667,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/barcode-decoder-in-salesforce1-very-fast-and-simple\/","url_meta":{"origin":7587,"position":2},"title":"Javascript based Barcode decoder in Salesforce1 &#8211; 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 &quot;Salesforce&quot;","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":6908,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/point-and-click\/use-lightning-web-components-in-flow\/","url_meta":{"origin":7587,"position":3},"title":"Use Lightning Web Components in Flow","author":"Jitendra","date":"October 21, 2019","format":false,"excerpt":"Endless limit for your Salesforce application by combining Flow with Lightning Web Components (LWC)","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"Using LWC in Flow","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/10\/Using-LWC-in-Flow-e1571713113388.png?fit=1200%2C651&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":7072,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/share-javascript-code-in-lightning-web-component-to-read-url-parameters\/","url_meta":{"origin":7587,"position":4},"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 &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7140,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/using-custom-label-in-lightning-web-components-lwc\/","url_meta":{"origin":7587,"position":5},"title":"Using Custom Label in Lightning Web Components &#8211; LWC","author":"Jitendra","date":"April 4, 2020","format":false,"excerpt":"Quick Code Snippet on how to use custom label in Lightning Web Components - LWC","rel":"","context":"In &quot;Lightning Web Components&quot;","block_context":{"text":"Lightning Web Components","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning-web-components\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7587","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=7587"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7587\/revisions"}],"predecessor-version":[{"id":7597,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/7587\/revisions\/7597"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/7600"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=7587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=7587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=7587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}