{"id":271,"date":"2025-08-27T10:00:48","date_gmt":"2025-08-27T10:00:48","guid":{"rendered":"https:\/\/datasymbol.com\/blog\/?p=271"},"modified":"2025-08-30T08:19:18","modified_gmt":"2025-08-30T08:19:18","slug":"cloud-based-barcode-scanner","status":"publish","type":"post","link":"https:\/\/datasymbol.com\/blog\/2025\/08\/27\/cloud-based-barcode-scanner\/","title":{"rendered":"Cloud-based Barcode Scanner"},"content":{"rendered":"\n<figure class=\"wp-block-image alignright size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"576\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-scann-barcode.jpg\" alt=\"\" class=\"wp-image-324\" style=\"width:600px\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-scann-barcode.jpg 800w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-scann-barcode-300x216.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-scann-barcode-768x553.jpg 768w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><strong>What\u2019s the Easiest Way to Add a Barcode Scanner to Your Website?<\/strong><\/p>\n\n\n\n<p>In this section, we\u2019ll answer exactly that. No matter what platform or engine your site is running on, the process is equally simple everywhere.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"has-large-font-size\"><strong>WordPress<\/strong> <strong>Example<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"386\" src=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-based-barcode-scanner-1024x386.jpg\" alt=\"\" class=\"wp-image-293\" style=\"width:994px;height:auto\" srcset=\"https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-based-barcode-scanner-1024x386.jpg 1024w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-based-barcode-scanner-300x113.jpg 300w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-based-barcode-scanner-768x290.jpg 768w, https:\/\/datasymbol.com\/blog\/wp-content\/uploads\/2025\/08\/cloud-based-barcode-scanner.jpg 1060w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Our own blog is powered by WordPress. Here\u2019s how easy it is to add a barcode scanner to any post or page:<\/p>\n\n\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>Insert an <strong>HTML block<\/strong> anywhere on the page.<\/li>\n\n\n\n<li>Paste the following HTML code into the block:<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;script async&gt;\n  onDataSymbolBarcode = function( decodingResult ) {\n    for (var i = 0; i &lt; decodingResult.length; ++i)\n      alert( DSbin2String(decodingResult&#91;i]) );\n    };\n&lt;\/script&gt;\n&lt;script async id=\"DataSymbolScript\" src=\"https:\/\/websdk.datasymbol.com\/srvhost\/v2\/scanner.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p>Save and update the page.<\/p>\n\n\n\n<p>That\u2019s it! Your barcode scanner is now live.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Barcode Scanner Settings<\/strong><\/p>\n\n\n\n<p>Our <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner.html\">Hosted Barcode Scanner<\/a><\/strong> comes with many configuration options, which you can view <a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner.html\"><strong>here<\/strong><\/a>.<\/p>\n\n\n\n<p>By default, it decodes the following symbologies: <strong>Code128, Code39, EAN13, UPCA, and QR Code<\/strong>.<br>You can also enable additional barcode types supported by our <strong><a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Web SDK<\/a><\/strong>.<\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>WordPress Plugin Option<\/strong><\/p>\n\n\n\n<p>If you prefer, you can also use our <a href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/barcode-scanner-plugin-for-wordpress.html\"><strong>Barcode Scanner Plugin for WordPress<\/strong>.<\/a> In this case, the plugin is installed directly on your hosting environment. For some users, this may be more convenient\u2014but functionally, there\u2019s no significant difference.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-large-font-size\"><strong>Privacy and Security<\/strong><\/p>\n\n\n\n<p>The only distinction between using the <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner.html\">Hosted Barcode Scanner<\/a><\/strong> and the <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Web SDK<\/a><\/strong> (or the <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-plugin-for-wordpress.html\">WordPress Plugin<\/a><\/strong>) is where the WASM and JavaScript files are hosted.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>With the <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner.html\">Hosted Barcode Scanner<\/a><\/strong>, these files are served from our secure servers.<\/li>\n\n\n\n<li>With the <strong><a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-for-web.html\">Barcode Web SDK<\/a> or <a href=\"https:\/\/www.datasymbol.com\/barcode-web-sdk\/barcode-scanner-plugin-for-wordpress.html\">WordPress Plugin<\/a><\/strong>, they\u2019re hosted directly on your website.<\/li>\n<\/ul>\n\n\n\n<p>In both cases, barcode decoding happens <strong>locally on the user\u2019s device<\/strong>. Barcodes never leave the device, and the camera video stream is processed locally as well, ensuring maximum privacy and security.<\/p>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"has-medium-font-size\"><strong>If a camera is connected to your device, pressing the &#8216;Start Hosted Barcode Scanner&#8217; button should launch the Hosted Barcode Scanner, the code for which is provided above in this blog.<\/strong><\/p>\n\n\n\n<p class=\"has-small-font-size\">When scanning, the decoded barcode includes the &#8216;*&#8217; symbol because the scanner is operating in demo mode.<\/p>\n\n\n\n<script>\nfunction StartHostedScanner() {\n  const myElement = document.getElementById(\"barcode-scanner-code\");\n\n  window.DSHostSettings = {\n    viewWidth: null,\n    viewHeight: 800,\n    addFrameStyle: '',\n    cams: ['0, facing back', 'facing back:0', 'back camera'],\n    sWebSDKKey: '047-64435111-87061774',\n  };\n\n  window.onDataSymbolBarcode = function(decodingResult) {\n    for (var i = 0; i < decodingResult.length; ++i) {\n      \/\/alert(DSbin2String(decodingResult[i]));\n       document.getElementById(\"barcode-text\").innerHTML = DSbin2String(decodingResult[i]);\n    }\n  };\n\n  const sdkScript = document.createElement(\"script\");\n  sdkScript.src = \"https:\/\/websdk.datasymbol.com\/srvhost\/v2\/scanner.js\";\n  sdkScript.async = true;\n  sdkScript.id = \"DataSymbolScript\";\n  myElement.appendChild(sdkScript);\n\n  document.getElementById(\"StartButtonID\").style.display = 'none';\n}\n<\/script>\n\n<span id='barcode-text' class='h15class'><\/span>\n<div id='barcode-scanner-code'><\/div>\n<!-- <button>Start Hosted Scanner<\/button> -->\n<a class=\"wp-element-button\" onclick=\"StartHostedScanner();\" id=\"StartButtonID\">Start Hosted Barcode Scanner<\/a>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\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 Hosted Barcode Scanner into your Web site 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\/hosted-web-barcode-scanner.html\">Hosted Barcode Scanner<\/a>\n\t<br>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test.html\">OnLine Test 1<\/a>\n\t<a class=\"anybutton anybutton3\" href=\"https:\/\/datasymbol.com\/barcode-web-sdk\/hosted-web-barcode-scanner-test-2.html\">OnLine Test 2<\/a>\n\t<br><br>\n<div class='v18'>When you open the online test, the barcode scanner will start automatically. Your device (desktop or mobile) must have a camera.<\/span>\n<\/div>\n<!-- READY TO GET STARTED STOP -->\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What\u2019s the Easiest Way to Add a Barcode Scanner to Your Website? In this section, we\u2019ll answer exactly that. No matter what platform or engine your site is running on, the process is equally simple everywhere. WordPress Example Our own blog is powered by WordPress. Here\u2019s how easy it is to add a barcode scanner [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":324,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-271","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\/271","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=271"}],"version-history":[{"count":61,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions"}],"predecessor-version":[{"id":355,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/posts\/271\/revisions\/355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media\/324"}],"wp:attachment":[{"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/media?parent=271"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/categories?post=271"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/datasymbol.com\/blog\/wp-json\/wp\/v2\/tags?post=271"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}