Use Cases | Web Barcode Scanner

General Use Cases

Example app

The following use cases have been compiled into a dedicated example app. If you want to see more than just code snippets, check out the example app on GitHub.

Scanning Single Barcodes

The Scanbot Barcode Scanner SDK is quick and easy to integrate by design. Even in its default configuration, the Scanbot SDK scans barcodes rapidly and reliably in challenging conditions. Notably, all scanning operations are performed offline, on-device only, which ensures high speed and data privacy.

barcode-usecases/src/utils/singleBarcodeScan.ts

loading...

See full example on GitHub

Yet, there are specific use cases where tweaking the configuration can significantly improve the user experience and scanning performance, such as when you want to enable the scanning of multiple codes at once.

Scanning Multiple Barcodes

If you need to scan multiple barcodes simultaneously, you can configure the SDK to detect and extract all barcodes visible in the live view.

barcode-usecases/src/utils/multipleBarcodeScan.ts

loading...

See full example on GitHub

Batch Scanning

Batch scanning, like multiple barcode scanning, allows users to scan multiple unique barcodes within a single session. A viewfinder added to the live view helps users target only the desired codes, improving their scan experience and control.

barcode-usecases/src/utils/batchBarcodeScan.ts

loading...

See full example on GitHub

Detecting Barcodes on Still Images

The Scanbot Barcode Scanner SDK offers advanced capabilities for reading barcodes from static images, such as photos or PDFs, imported from the gallery or the device’s storage.

barcode-usecases/src/utils/detectBarcodeFromImageScan.ts

loading...

See full example on GitHub

AR Overlay Use Cases

Displaying an extra layer of information in the live view is useful in a range of scanning use cases. With the Barcode AR Overlay, you can highlight barcodes to provide feedback on scanned barcodes or locate specific items. Alternatively, AR Overlay can display additional information based on the code’s content, like the amount in stock or product details.

AR - MultiScan

The MultiScan functionality allows users to hover over multiple barcodes in live view. As each barcode comes into view, it is instantly detected, highlighted with a floating AR overlay, and scanned. This feature is especially useful in scenarios where users must quickly scan multiple barcodes without manually selecting each one.

For example, in a warehouse setting where an employee needs to scan a variety of items in quick succession, MultiScan can speed up the process. The worker simply points their device at the products, and each barcode is automatically detected and scanned, with the AR overlay providing visual feedback and confirming successful scans.

barcode-usecases/src/utils/multiARScan.ts

loading...

See full example on GitHub

AR - SelectScan

The SelectScan feature allows the user to hover over multiple barcodes in live view, detecting and marking each with an AR overlay. However, instead of automatically scanning every barcode, users must tap the marked barcodes to scan them selectively. Scanned barcodes are highlighted (i.e., with a contour box in a different color) and marked as scanned. SelectScan is handy when you want to enable users to pick specific barcodes from a group of items.

For example, consider a delivery driver with multiple packages on his truck but needs to scan and deliver only one or a few specific packages to a customer. All barcodes on the packages are detected and marked when they come into the live view, but only the manually selected ones are actually scanned.

barcode-usecases/src/utils/selectARScan.ts

loading...

See full example on GitHub

AR - FindAndPick

The FindAndPick feature allows you to pre-define one or more desired barcode values. When users hover over different items in live view, only the pre-defined items are highlighted and selected. The items that do not match the value are marked as mismatching, for example by a differently colored outline box. This feature is ideal for finding specific items in a large inventory.

Consider a situation in a large car parts store. An employee can use FindAndPick to quickly locate a specific part requested by a customer. By pre-defining the part's barcode, the system automatically highlights the desired item among dozens – saving the employee valuable time.

barcode-usecases/src/utils/findAndPickARScan.ts

loading...

See full example on GitHub

AR - Scan and Count

The ScanbotSDK Barcode Scanner integrates a custom user interface to facilitate barcode detection from individual snapshots. This feature utilizes the maximum available resolution to achieve precise scanning results. Detected barcodes are displayed distinctly, ensuring clarity and accuracy in the scan outcomes.

barcode-usecases/src/utils/scanAndCountARScan.ts

loading...

See full example on GitHub

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

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.

---