Skip to main content

Advanced features included in the Web Barcode Scanner SDK

Threading​

For multi-threading support, please use the config parameter allowThreads: true on SDK initialization:

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: cross-origin

To test if multi-threading is working correctly, set the initialization options allowThreads = true and verboseLogging = true.

Now, if anything is preventing multi-threading, an error message will be logged to the console.

For more information, please refer to Setting up cross-origin isolation in the tfjs repository.

Debugging on a mobile device​

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

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

The most straightforward solution is to host your website on a server with a valid SSL certificate. But there are alternative approaches.

ngrok​

ngrok is a tool that allows you to expose your local server via tunneling to a domain they provide.

This is easier to set up than AWS S3 and allows for more customization.

Simply create an account on the ngrok website, set up a domain, and download the binary.

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 favorite tool:

php -S localhost:8000

or

python -m http.server

Then, simply run the following command while making sure the port numbers match:

./ngrok http 8000

You should see the following tunnel activated:


Session Status                online
Account                       <redacted> (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 provided in the output.

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

To solve this, we recommend using a static domain, as explained in Static domains for all ngrok users on the ngrok blog.

This allows you to reserve a randomly generated subdomain that will stay on your account, and add it to your license.

For more information, please refer to the ngrok documentation.

S3​

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 the 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 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 a bucket-policy.json:

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

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 a free trial license to test the Scanbot SDK thoroughly.

Get free trial license

On this page