Skip to main content

Web Document Scanner SDK - Getting Started

Adding the Dependency​

npm​

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

npm install scanbot-web-sdk --save

In webpack-based projects you can import the package like so:

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.

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 the following files from the package to your web folder:

  • ScanbotSDK.Core.js
  • ScanbotSDK.Asm.wasm

You can find these files in the scanbot-web-sdk npm package folder structured as below:

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

document-scanner package contains the following features:

document_scanner
document_quality_analyzer
image_filters

barcode-scanner package contains the following features:

barcode_scanner

complete package contains the following features:

barcode_scanner
document_quality_analyzer
document_scanner
image_filters
mrz_recognizer
pdf
tesseract
tiff

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 Document Scanner SDK and puts the latest SDK entry point into a global variable named ScanbotSDK.

This method is not applicable for OCR features such as Data Scanner

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. complete) and re-arrange your file structure as below:
alt text

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?

On this page

Scroll to top