The Hosted Web Barcode Scanner by DataSymbol is a streamlined solution designed to simplify the integration of barcode scanning functionality into websites.

In contrast with traditional Web SDK implementations, there is no need to host any extra files on your server. Everything is served up by DataSymbol’s secure infrastructure.

How it Works

At its core, the scanner functions entirely within the user’s browser, using WebAssembly technology to manage the decoding process at their end. The only distinction from a self-hosted SDK is that critical resources—namely “datasymbol-sdk-hlp.min.js” and “datasymbol-sdk.wasm—come not from your own servers but are requested from DataSymbol’s instead.

The scanner appears on your web page as an <iframe>, so it is encapsulated in terms of code by the <iframe> element. This isolation helps to ensure that the scanner cannot interfere with how your website looks, its layout, or even its code base.

Easy Embedding

Embedding the Hosted Web Barcode Scanner requires minimal effort. You simply add a few lines of JavaScript to the body of your page:

<script async>
    onDataSymbolBarcode = function(decodingResult) {
        for (var i = 0; i < decodingResult.length; ++i)
            alert(DSbin2String(decodingResult[i]));
    };
</script>
<script async id="DataSymbolScript" src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script>

The browser must serve your page via HTTPS to comply with camera access requirements, which the scanner enforces.

Customization & Settings

The scanner offers adjustable settings to suit varying integration needs:

• DSHostSettings – controls aspects like positioning (leftPos, topPos), size (viewWidth, viewHeight), alignment (xAlign, yAlign), opacity, additional CSS (addFrameStyle), and license key (sWebSDKKey). Without a valid key, the scanner operates in demo mode (appending an asterisk to decoded barcodes).
• DSScannerSettings – handles camera resolution (camera.resx, camera.resy), barcode types (barcodeTypes), and frame scanning interval (frameTime).

Example of overriding defaults:

<script async>
    var DSHostSettings = {
        viewWidth: 640,
        viewHeight: 480,
    };
    var DSScannerSettings = {
        barcode: {
            barcodeTypes: ['QRCode'], // Only decode QR codes
        },
    };
    onDataSymbolBarcode = function(decodingResult) {
        for (var i = 0; i < decodingResult.length; ++i)
            alert(DSbin2String(decodingResult[i]));
    };
</script>
<script async id="DataSymbolScript" src="https://websdk.datasymbol.com/srvhost/v2/scanner.js"></script>

This flexibility enables developers to tailor the scanner’s behavior and appearance according to the specific use case.

The Hosted Web Barcode Scanner offers a hassle-free, secure, and highly customizable way to add barcode scanning capabilities to your web application. Its seamless integration, sandboxed approach via an iframe, and client-side WebAssembly decoding make it a compelling choice for developers seeking rapid deployment without compromising control or performance.