Skip to main content

Advanced Features | Web Document Scanner

Threading​

For multi-threading support, please use the config parameter allowThreads: true on SDK initialization, available as of v3.0.0:

this.scanbotSDK = await ScanbotSDK.initialize({
  licenseKey: myLicenseKey,
  allowThreads: true,
});

For this feature to function properly, the following HTTP response headers also need to be set up on your server:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
Access-Control-Allow-Origin: *
Cross-Origin-Resource-Policy: same-origin

If everything was set up properly, you should see ScanbotSDK: Using multithreaded backend being logged.

For more information, please cf.: https://github.com/tensorflow/tfjs/blob/master/tfjs-backend-wasm/README.md#setting-up-cross-origin-isolation

ImageCapture API​

The ImageCapture interface of the MediaStream Image Capture API provides methods to enable the capture of images or photos from a camera or other photographic device. It provides an interface for capturing images from a photographic device referenced through a valid MediaStreamTrack (mdn).

The Scanbot SDK now supports capturing full-resolution document images, resulting in a substantially more crisp image quality. Specifically, this attempts to take a single exposure using the video capture device.

To enable it, simply set the useImageCaptureAPI property of the DocumentScannerConfiguration to true:

const config: DocumentScannerConfiguration = {
    useImageCaptureAPI: true
}
Warning

Use with caution. Please note that, at the time of writing this, the underlying browser API itself is still experimental and reliably only works on Android devices with Google Chrome. If enabled, this only affects extraction after the document outline has been identified.

This may also trigger your device's default "snap" animation, making scanbotSDK.utils.flash() irrelevant

Debugging on a mobile device​

Debugging Scanbot Web SDK on an actual mobile device is inconvenient because moden browsers do not allow camera access over the insecure HTTP protocol. HTTPS is required.

And that, in turn, is incovenient because making your localhost connection secure is possible, but not trivial, and, even if correctly set up, ERR_CERT_AUTHORITY_INVALID error will still be shown in the window.

What's the solution?

The straightforward, no nonsense solution is to host your website on a server with a valid SSL certificate.

ngrok​

ngrok is a tool that allows you to expose your local server via tunneling to a domain they provide. The future is now, old man, you can now tunnel your localhost to a secure domain!

It is the recommended approach, as it's easier to set up and allows for more customization than AWS S3.

Simply sign up at their site: https://ngrok.com/, set up a domain, download the binary. Everything is super hassle-free and they'll provide a domain for you with a couple of clicks!

Then you'll be able to configure it with the following command:

./ngrok config add-authtoken <your-token>

Then, in another terminal window, go to your build folder and start your localhost with your favourite tool:

php -S localhost:8000

or

python -m http.server

Then, simply run the following command (notice that the port numbers have to match):

./ngrok http 8000

And you should see the following tunnel activated:


Session Status                online                                                                                             
Account                       <redcated> (Plan: Free)                                                                             
Version                       3.3.2                                                                                              
Region                        Europe (eu)                                                                                        
Latency                       77ms                                                                                               
Web Interface                 http://127.0.0.1:4040                                                                              
Forwarding                    https://fe45-91-129-103-222.ngrok-free.app -> http://localhost:8000

And that's it! Your localhost is now available at the example url in the output: https://fe45-91-129-103-222.ngrok-free.app

However, this will provide you with a different uuid (subdomain) every time you start the tunnel and the ScanbotSDK license cannot contain an endless amount of randomly generated subdomains.

To solve this, we recommend using static domains, as explained here: https://ngrok.com/blog-post/free-static-domains-ngrok-users

These allow you to reserve one of randomly generated subdomains that will stay on your account and add it to your license.

For more information visit: https://ngrok.com/docs/getting-started/

S3​

This doesn't have to be a complicated endevour. If your site routing does not require a server environment, turning an S3 bucket into a static html serving site will work well.

This paragraph assumes you have AWS CLI installed and configured.

The legacy option is to simply create a debug domain in your server environment and upload it there. This is also what we have been doing here at Scanbot SDK.

The simplest option is to simply serve your website from an S3 bucket at AWS. That way you get a convenient https domain and a handy way to actually upload to it.

Here's an AWS CLI command to create a bucket:


NAME="<your-bucket-name>";

# Create bucket
aws s3api create-bucket \
    --bucket ${NAME} \
    --region eu-west-1  \
    --create-bucket-configuration LocationConstraint=eu-west-1

# Ease blocking, this is required for newly-created buckets (as of July 2023)
aws s3api put-public-access-block \
    --bucket ${NAME} \
    --public-access-block-configuration BlockPublicPolicy=false

# Set the policy to allow public access
aws s3api put-bucket-policy \
    --bucket "${NAME}" \
    --policy file://bucket-policy.json

Here's an example of bucket-policy.json:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<your-bucket-name>/*"
        }
    ]
}

And then, to sync your local build files to that bucket, simply use the following command:

aws s3 sync ./build s3://${NAME} --delete

However, if your site requires custom routing rules, serving it as static html from a bucket won't work.

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?