{"id":215,"date":"2025-08-20T09:37:53","date_gmt":"2025-08-20T09:37:53","guid":{"rendered":"https:\/\/datasymbol.com\/blog\/?p=215"},"modified":"2025-08-20T11:56:06","modified_gmt":"2025-08-20T11:56:06","slug":"datasymbol-barcode-scanner-for-web-web-sdk-fast-secure-and-universal","status":"publish","type":"post","link":"https:\/\/datasymbol.com\/blog\/2025\/08\/20\/datasymbol-barcode-scanner-for-web-web-sdk-fast-secure-and-universal\/","title":{"rendered":"DataSymbol Barcode Scanner for Website (Web SDK): Fast, Secure, and Universal"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"695\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-scanner-web-sdk-for.jpg\" alt=\"\" class=\"wp-image-238\" style=\"width:600px\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-scanner-web-sdk-for.jpg 800w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-scanner-web-sdk-for-300x261.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/barcode-scanner-web-sdk-for-768x667.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>In the past, enabling barcode scanning within websites required reliance on external apps or labor-intensive plugins\u2014but DataSymbol has changed all of that, thanks to <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Scanner for Web<\/a><\/strong> as part of their Web SDK. Designed to work in modern web environments, the updated SDK brings high-performance barcode scanning right into the browser with WebAssembly and JavaScript.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>What It Is<\/strong><\/p>\n\n\n\n<p>The Web SDK consists of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>WASM (WebAssembly)<\/strong>: A high-speed barcode decoding core derived from DataSymbol\u2019s desktop-grade engine.<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>JavaScript wrapper<\/strong>: Simplifies working with WASM using familiar JS APIs.<\/li>\n\n\n\n<li><strong>HTML<\/strong> example pages with source code<\/li>\n<\/ul>\n\n\n\n<p class=\"has-large-font-size\"><strong>Key Benefits<\/strong><\/p>\n\n\n\n<p>\u2022 Fast and Native-like performance: It works almost as fast as native apps.<\/p>\n\n\n\n<p>\u2022 Public and client-side: Everything takes place inside the browser for high privacy, no uploads.<\/p>\n\n\n\n<p>\u2022 No Installations: Embed the SDK and that&#8217;s all, no need for any extra software for user.<\/p>\n\n\n\n<p>\u2022 Cross-Platform Compatible: Runs on Windows, macOS, Linux, Android, and iOS.<\/p>\n\n\n\n<p>\u2022 Multiple barcode decoding support: Decipher 1D (EAN, UPC, Code 128, DataBar, etc.) as well as all 2D variants (QR, DataMatrix, PDF417, Aztec).<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Developer-Friendly Integration<\/strong><\/p>\n\n\n\n<p class=\"has-medium-font-size\"><em>Getting Started<\/em><\/p>\n\n\n\n<p>Embed the SDK by adding:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;<code>datasymbol-sdk.wasm\"<\/code> (WebAssembly core)<\/li>\n\n\n\n<li><code>\"datasymbol-sdk-hlp.min.js\"<\/code> (JavaScript wrapper)<\/li>\n<\/ul>\n\n\n\n<p>Include these files in your HTML and configure just a few lines of JavaScript:<\/p>\n\n\n\n<pre class=\"wp-block-code\" style=\"border-style:none;border-width:0px\"><code>&lt;script src=\"datasymbol-sdk-hlp.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Define a setup:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DSScanner.Create({\n  viewport: { id: 'datasymbol-barcode-viewport', width: 640 },\n  camera: { resx: 640, resy: 480 },\n  barcode: { barcodeTypes: &#91;'Code128', 'QRCode', 'DataMatrix'] }\n});<\/code><\/pre>\n\n\n\n<p>Then:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DSScanner.addEventListener('onScannerReady', () =&gt; DSScanner.StartScanner());\nDSScanner.addEventListener('onBarcode', onBarcodeReady);<\/code><\/pre>\n\n\n\n<p class=\"has-medium-font-size\"><em>Core Methods &amp; Events<\/em><\/p>\n\n\n\n<p>Useful methods include:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Create<\/strong>, <strong>Destroy<\/strong>: Lifecycle management<\/li>\n\n\n\n<li><strong>StartScanner<\/strong>, <strong>StopScanner<\/strong>: Control scanning flow<\/li>\n\n\n\n<li><strong>DecodeImage<\/strong>: Scan barcode from static image<\/li>\n\n\n\n<li><strong>getFrame<\/strong>, <strong>getVersion<\/strong>, <strong>getLicenseInfo<\/strong>, etc.<\/li>\n<\/ul>\n\n\n\n<p>Events:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>onScannerReady<\/code>, <code>onBarcode<\/code>, <code>onError<\/code>\u2014all easily handled with <code>.addEventListener<\/code><\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><em>Advanced Features &amp; Customization<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Supports partial viewport scanning (scanningRect), camera control, debug outputs, and mirroring for symmetric barcodes<\/li>\n\n\n\n<li>PWA example included\u2014ideal for mobile or offline-first applications<br>Integrations available for WordPress, Wix, React, Angular, and even Flutter Web<\/li>\n<\/ul>\n\n\n\n<p class=\"has-medium-font-size\"><em>Use Cases<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>E-commerce updates<\/strong>: Inventory scanning directly in-dashboard<\/li>\n\n\n\n<li><strong>Event check-ins<\/strong>: Fast, seamless guest onboarding<\/li>\n\n\n\n<li><strong>Document scanning workflows<\/strong>: Extract ID or product data using a web interface<\/li>\n\n\n\n<li><strong>Retail and logistics<\/strong>: Mobile-friendly scanners embedded in web tools<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>DataSymbol\u2019s <strong>Barcode Scanner for Web SDK<\/strong> offers developers a powerful, easy-to-use solution for building barcode scanning into web applications. With broad barcode support, fast WebAssembly performance, and flexible integration options\u2014including a hosted iframe version\u2014it empowers you to add reliable scanning functionality without heavy infrastructure or external dependencies.<\/p>\n\n\n\n<!-- READY TO GET STARTED START -->\n<div class='blue_rect blue_rect1' style='margin-top:3em; padding:2em;'>\n\n\t<h1 class='h15class'>Ready to get started?<\/h1>\n\n\t<div class='v18' style='width:60%'>\n\t\tIntegrate the DataSymbol Web SDK into your Web application in under an hour. Check out our tutorials, documentation, source code, or download the demo app to get started right away.\n\t<\/div>\n\n\t<br><br>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Scanner Web SDK<\/a>\n<\/div>\n<!-- READY TO GET STARTED STOP -->\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the past, enabling barcode scanning within websites required reliance on external apps or labor-intensive plugins\u2014but DataSymbol has changed all of that, thanks to Barcode Scanner for Web as part of their Web SDK. Designed to work in modern web environments, the updated SDK brings high-performance barcode scanning right into the browser with WebAssembly and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":238,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-215","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-barcode-scanner-web-sdk"],"_links":{"self":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/comments?post=215"}],"version-history":[{"count":14,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions"}],"predecessor-version":[{"id":286,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/215\/revisions\/286"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media\/238"}],"wp:attachment":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media?parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/categories?post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/tags?post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}