Web Barcode Scanner SDK - Getting Started

Adding the Dependency

npm

Scanbot Web Barcode Scanner SDK is available as an npm package:

npm install scanbot-web-sdk --save

In webpack-based projects you can import the package as follows:

import ScanbotSDK from 'scanbot-web-sdk/webpack'

This will ensure that the web worker and WebAssembly components are automatically copied over by webpack into the webpack output folder.

Automatic packing on WebAssembly binaries is handled via file-loader WebPack plugin. If your library or framework (e.g. React or Angular) depends on the plugin, you don't have to do anything, but if it doesn't (e.g. newer versions of Vue.js), you'll need to manually add the plugin under devDependencies.

If you want to manually handle those components, import the SDK without the /webpack suffix:

import ScanbotSDK from 'scanbot-web-sdk'

Then, make sure to copy all the files from the corresponding folder. Specifically, you can find the relevant files in the scanbot-web-sdk npm package folder structured as below:

bundle/bin/barcode-scanner
bundle/bin/document-scanner
bundle/bin/complete

The npm package contains typings under the @types directory, so you can import it in your preferred typescript project, as well as the minified bundle (will even work with vanilla javascript) in the bundle directory.

CDN

If you do not use a bundler (webpack, etc.) in your project, you can put a
<script src="https://cdn.jsdelivr.net/npm/scanbot-web-sdk@latest/bundle/ScanbotSDK.min.js"></script>
tag in your index.html. The script installs the latest Scanbot Web SDK and it will be available in a global variable named ScanbotSDK.

Manual Packing

Alternatively, you can download the resources bundle from the CDN we use. Then, you can keep the package you want to use under /bundle/bin/ folder (i.e. barcode-scanner) and re-arrange your file structure as below:

Now, you can put a <script src="bundle/ScanbotSDK.min.js"></script> tag in your index.html. The script puts the SDK entry point into a global variable named ScanbotSDK.

Want to scan longer than one minute?

Generate your free "no-strings-attached" Trial License and properly test the Scanbot SDK.

Get your free Trial License

What do you think of this documentation?

What can we do to improve it? Please be as detailed as you like.

---