Inventory Tracking App

` element. The view is initially hidden, and will be shown only if the user is logged in. ```HTML ``` The list items will be generated dynamically. We use an HTML [template](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/template) element for the list item template. ### Inventory Screen Logic (JavaScript) To switch between the logged-out and logged-in views, we have to extend the previous `updateUI()` function. Depending on the authentication state, it will either make the `logged-in` view or the `logged-out` view visible. If the user is logged in, the borrowed inventory is loaded from a module that exposes a `loadItems()` function. The returned items are used to populate the list using the dynamically instantiated item template. If the borrowed inventory is empty, a placeholder is made visible instead. We hook up the Borrow Items and Return Items buttons and make them navigate to a scan screen, passing a query parameter containing the mode (`borrow` or `return`). We disable the Return Items button if the inventory is empty. At the bottom, we display the logged-in username and a button that logs the user out, clearing the inventory. ```JAVASCRIPT import { loadItems, clearItems } from './lib/inventory.js'; /** * Update the UI depending on the current application state (authenticated: yes/no, inventory items) */ async function updateUI() { const isLoggedIn = getUsername() !== null; // show logged-in or logged-out view depending on authentication state document.getElementById('logged-out').style.display = isLoggedIn ? 'none' : 'block'; document.getElementById('logged-in').style.display = isLoggedIn ? 'block' : 'none'; if (isLoggedIn) { // display stored items in a list const items = loadItems(); // show placeholder if list is empty document.getElementById('no-items-placeholder').hidden = items.length > 0; // populate list from item template const listElement = document.getElementById('item-list'); document.getElementById('item-list').hidden = items.length === 0; for (const item of items) { const itemElement = document.getElementById('item-template').content.cloneNode(true); itemElement.querySelector('.item-barcode').innerHTML = item.barcode; itemElement.querySelector('.item-count').innerHTML = `${item.count}x`; listElement.appendChild(itemElement); } // if we don't have any items, disable the return items button if (items.length === 0) { document.getElementById('return-items').disabled = true; } // borrow items/return items buttons navigate to scan page document.getElementById('borrow-items').onclick = () => document.location.href = 'scan.html?mode=borrow'; document.getElementById('return-items').onclick = () => document.location.href = 'scan.html?mode=return'; // show logged-in user and logout button, clears inventory document.getElementById('username').innerHTML = getUsername(); document.getElementById('log-out').onclick = () => { logOut(); clearItems(); updateUI(); }; } else { // logged out logic (see previous sections) } } ``` Tip: The DOM manipulation might feel convoluted if you're used to frontend frameworks that allow you to bind elements directly to data and control logic. Check out the [index.html](https://github.com/pixelverse-llc/inventory-tracking-app/blob/main/index.html) file in the GitHub repository for the full code. ### The Inventory Module Where is `loadItems()` coming from? Similar to the authentication module, we create a module that encapsulates all interactions with the inventory: * Getting the list of borrowed items * Adding/removing an item * Clearing the list items Since we are not using a backend, we will again use localStorage to store the borrowed items locally. For every item, a barcode and count are stored. Adding an item that already exists increments the existing item's count. Removing an item decrements the count. If the count reaches 0, the item is removed from the list. We use JSON to convert the array of items to a string and vice versa, suitable for storing it in localStorage. ```JAVASCRIPT // Expose a list of items from localStorage const itemsKey = 'items'; export function clearItems() { localStorage.removeItem(itemsKey); } export function loadItems() { const itemsStr = localStorage.getItem(itemsKey); return itemsStr === null ? [] : JSON.parse(itemsStr); } export function storeItems(items) { localStorage.setItem(itemsKey, JSON.stringify(items)); } export function addItem(item) { const myItems = loadItems(); const existingItemIdx = myItems.findIndex(it => it.barcode === item.barcode); if (existingItemIdx === -1) { myItems.push(item); } else { myItems[existingItemIdx].count += item.count; } storeItems(myItems); } export function removeItem(item) { const myItems = loadItems(); const existingItemIdx = myItems.findIndex(it => it.barcode === item.barcode); if (existingItemIdx === -1) { myItems.splice(existingItemIdx, 1); } else { myItems[existingItemIdx].count -= item.count; if (myItems[existingItemIdx].count <= 0) { myItems.splice(existingItemIdx, 1); } } storeItems(myItems); } ``` Save the module's code in a file called `lib/inventory.js`. ## Building the Scanning Screen We've built the main screen, but our inventory is empty. The scanning screen is where we finally scan items and add them to the inventory. The scanning screen will have two modes: borrowing items and returning items. Depending on the mode, the scanning screen will display a different title, and interact with the inventory module differently. The barcode reader will be displayed on top, a label showing the number of items scanned and a Finish Scanning button below. ![Screenshot of the scanning screen](images/inventory_scan.jpg) The screen will allow scanning multiple items in one go, making the [Popup Scanner](https://docs.strich.io/the-popup-scanner.html) less suitable. Instead, we will use [BarcodeReader](https://docs.strich.io/getting-started.html#choosing-the-integration), a more customizable integration. Check out the [Getting Started Guide](https://docs.strich.io/getting-started.html#choosing-the-integration) for more information about the different ways to integrate STRICH into your app. ### Scanning Screen Layout (HTML) Copy the `index.html` file and rename it to `scan.html`. Replace the `

` element with the snippet below. ```HTML

No items scanned yet

``` ### Scanning Screen Logic (JavaScript) The mode is passed to the screen via a query parameter, e.g. `scan.html?mode=borrow`. Scanned items are accumulated in the `onItemScanned()` function and stored in the `scannedItems` variable. Compared to scanning the badge QR Code, setting up the barcode scanning code here is a bit more complex. A [BarcodeReader](https://docs.strich.io/reference/classes/BarcodeReader.html) is created by invoking its constructor with a [Configuration](https://docs.strich.io/reference/interfaces/Configuration.html) object. The configuration contains the list of barcode types (symbologies) to detect, as well as a parameter that suppresses duplicate scans, and most importantly, the [host element](https://docs.strich.io/reference/interfaces/Configuration.html#selector). The host element is the HTML element that will contain the visible elements of the BarcodeReader. It needs to have a fixed size and use [relative positioning](https://developer.mozilla.org/en-US/docs/Web/CSS/position#relative). When a barcode is detected, the BarcodeReader is instructed will invoke the `onItemScanned()` callback, which accumulates the item in the `scannedItems` variable. After we've configured the BarcodeReader, we initialize and start barcode detection. When scanning is finished, we [destroy](https://docs.strich.io/reference/classes/BarcodeReader.html#destroy) the BarcodeReader and navigate back to the main screen. Add the following JavaScript snippet to the ` ``` We’ll keep the styling to a minimum. The linked CSS makes the success dialog have a green background, the failure dialog have a red one, and makes the OK button “fat finger compatible” (full-width with added padding). We’re not going to win beauty prizes and that's ok. ## Building the code In a nutshell, the JavaScript code does the following: SDK and BarcodeReader initialization — initialize the [SDK](https://docs.strich.io/reference/classes/StrichSDK.html) for use and provide it with a valid license key. Initialize a [BarcodeReader](https://docs.strich.io/reference/classes/BarcodeReader.html) instance and configure it to look for PDF417 barcodes and use the container as its host element. Barcode data processing — provide the [detected](https://docs.strich.io/reference/classes/BarcodeReader.html#detected) hook that parses the PDF417 data, executes the age check, and displays the success or failure dialog. AAMVA data extraction — regular expression-based parsing of date of birth, last name and first name fields from raw PDF417 data. For details, see [aamva.js](https://github.com/pixelverse-llc/strich-pdf417-sample/blob/main/aamva.js). In a real application, you would be doing a lot more validation and supporting of older AAMVA specification versions. Here’s the code: ```JAVASCRIPT // import STRICH SDK as an ES6 module directly from a CDN import {StrichSDK, BarcodeReader} from 'https://cdn.jsdelivr.net/npm/@pixelverse/strichjs-sdk@1.7.1 /dist/strich.js'; // AAMVA helper routines import {parseAAMVALicenseData} from "./aamva.js"; function processPDF417Barcode(codeDetection) { // attempt to parse barcode data as AAMVA driver's license const parsed = parseAAMVALicenseData(codeDetection.data); if (!parsed) { console.error('PDF417 data could not be parsed according to AAMVA spec'); return; } // calculate age from system time const age = new Date().getFullYear() - parsed.dateOfBirth.getFullYear(); // depending on age, show success or reject popup const dialog = document.getElementById(age < 21 ? 'failure' : 'success'); dialog.getElementsByClassName('popup-name')[0].innerText = parsed.firstName + ' ' + parsed.lastName; dialog.getElementsByClassName('popup-age')[0].innerText = age + ' yrs old'; dialog.showModal(); } // Initialize BarcodeReader with appropriate settings for PDF417 function initializeBarcodeReader() { let configuration = { selector: '.container', engine: { symbologies: ['pdf417'] }, locator: { regionOfInterest: { // PDF417 is typically a wide rectangle, size the ROI appropriately left: 0.05, right: 0.05, top: 0.3, bottom: 0.3 } }, frameSource: { // high resolution recommended for PDF417 resolution: 'full-hd' }, }; return new BarcodeReader(configuration).initialize() .then(barcodeReader => { // store the BarcodeReader in a global, to be able to access it later (e.g. to destroy it) window['barcodeReader'] = barcodeReader; barcodeReader.detected = (detections) => { processPDF417Barcode(detections[0]); }; return barcodeReader.start(); }); } // initialize STRICH SDK with a valid license key const licenseKey = ''; StrichSDK.initialize(licenseKey) .then(() => { console.log('SDK initialized successfully'); return initializeBarcodeReader(); }) .catch(err => { // See: https://docs.strich.io/reference/classes/SdkError.html window.alert(err.localizedMessage); }); ``` Typically STRICH SDK is installed via NPM: here we include the strich.js file as an ES6 module and obtain it from [jsDelivr](https://www.jsdelivr.com/), a popular CDN. ## Demo To run the app, all you have to do is serve the files in the sample directory using an HTTP server. There is no build step involved — it’s just plain HTML and JavaScript after all. If your system has Python installed, which is likely if you are a developer, you already have a [barebones](https://docs.python.org/3/library/http.server.html) HTTP server at your disposal: ```SHELL $ python -m http.server Serving HTTP on :: port 8000 (http://[::]:8000/) ... ::1 - - [07/Nov/2023 09:39:43] "GET / HTTP/1.1" 200 - ::1 - - [07/Nov/2023 09:39:44] "GET /index.js HTTP/1.1" 304 - ``` Unfortunately, web apps that access the camera need to be served from secure origins — a fancy word for “served over HTTPS or localhost”. We recommend using tools like [ngrok](https://ngrok.com/) or [devtunnels](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/overview) to easily expose a local HTTP service through a publicly resolvable hostname and valid TLS certificate. More details on that topic are available in the [Deployment Guide](deployment-guide.html). If you want to peak at the app in action but don’t want to set it up yourself, here’s a short clip: [Video](images/pdf417_dl_demo.mp4) ## Wrapping Up In this article we showed how the PDF417 barcode on a US driver's license can be used to build a simple age verification web app. Full sample code is available on [Github](https://github.com/pixelverse-llc/strich-pdf417-sample). # Release Notes ## 1.13.0 - 2026-01-14 Added * MSI Plessey is now a supported barcode symbology, enabled by adding `msi-plessey` symbology. Developed in the 1970s and rarely used these days, we consider it a legacy symbology – it has to be explicitly enabled. As it is not self-checking, we highly recommend configuring a restrictive `minLen` and `maxLen`. By default, a single Modulo 10 check digit is expected. Changed * Optimized WebGL processing by removing redundancies and unnecessary resource allocation, resulting in a slight decrease in runtime. * Updated internal development dependency updates. ## 1.12.2 - 2025-12-15 Added * The SDK's camera selection logic can now be customized by providing a camera selector callback through `BarcodeReader.cameraSelector`. The callback receives the list of available cameras and returns the camera that should be used, or `undefined`, in which case the default logic is used. Fixed * Slightly improved Data Matrix detection rate by using a more precise grid mapping. ## 1.12.1 - 2025-12-05 Changed * Rolled back binary-encoded WebAssembly to use Base64 encoding instead of UTF-8 due to Uncaught SyntaxError: octal escape sequences can't be used in untagged template literals or in strict mode code errors in some customer installations. ## 1.12.0 - 2025-12-04 Added * The Micro QR Code symbology (ISO/IEC 18004:2015) is now supported, it is enabled by passing the symbology name `microqr`. * Added a method to `BarcodeReader.setZoom()` to programmatically toggle the zoom, if the current device supports it. * Added a method to `BarcodeReader.setFlashlight()` to programmatically toggle the flashlight, if the current device supports it. Changed * The app-supplied detection handler `BarcodeReader.detected` can now return a boolean or array of booleans to indicate if the passed detections were handled or not. Unhandled detections are not drawn on the overlay, and no audio or vibration feedback is emitted. Existing detection handlers do not need to be changed, this change is backward compatible. * The encoding of the JavaScript artifacts is now UTF-8 instead of ASCII, allowing for a smaller distribution size due to more efficient encoding of the bundled WASM module. * Updated Emscripten compiler to 4.0.20. Fixed * An incorrect default camera was being selected on iPhones with three cameras when using a French locale. ## 1.11.0 - 2025-10-27 This package is now published using Trusted Publishing on NPM. Added * Added an overlay to zoom the camera stream. The control is shown if the browser and the selected camera support it, and the `showZoom` config option to `true` (the default value). * Zoom can alternatively be toggled by double-tapping the camera feed. This behavior can be controlled with the new `zoomOnDoubleTap` config option. * Added `customLogoSize` overlay configuration parameter to set the size in CSS pixels at which the logo image should be rendered. If you provide a custom logo in a raster format such as PNG, JPEG or WEBP, you can use this parameter to make sure it is rendered at the correct size. For example, you can provide your logo at 210x60px resolution (3X), and set `customLogoSize` to `{ width: 70, height: 20 }` to make sure it is rendered crisply on high-density screens. * The overlay controls (camera selector, zoom and flashlight) are now animated, unless the browser indicates that it prefers reduced motion. Changed * Refreshed the camera selector to look and feel more intuitive while reducing UI clutter by no longer displaying the currently selected camera. * Custom logos in the overlay are no longer tinted with the color given through `primaryColor`, they are now rendered as-is, allowing use of colors different from the primary color. * Custom logos are now rendered at their intrinsic size, unless overridden by specifying a width/height in `customLogoSize`. Previously, the provided image would be scaled down by a factor that depended on the device display density, resulting in inconsistent sizes. Fixed * Flashlight icon no longer appears blurry on devices with high DPI displays. * Improved the display of the built-in logo in the overlay and reduced its size. ## 1.10.1 - 2025-10-06 Fixed * QR Codes with 'Structured Append' mode no longer lead to detections with empty data. The QR Code payload is now passed through. * Fixed an issue in the PDF417 decoder that prevented many codes with less than 6 rows from being read. Changed * Updated Emscripten WASM compiler to 4.15.0. ## 1.10.0 - 2025-08-28 Fixed * Detections drawn on overlay are now cleared after calling `BarcodeReader.stop()`. Changed * Significantly improved Aztec Code recognition, especially when reading them from an angle. * Updated Emscripten WASM compiler to 4.13.0. ## 1.9.2 - 2025-08-13 Fixed * Fixed an issue in the Aztec Code decoder that prevented codes of dimension 31x31 to be read. ## 1.9.1 - 2025-08-11 Added * Extended `PopupConfiguration` to allow passing in a `FrameSourceConfiguration`, allowing more advanced configuration of the frame source in `PopupScanner`. * `rememberCameraDeviceId` now falls back to the device label, if the ID of the remembered device changed. This makes remembering the camera more robust on browsers that rotate the device IDs frequently, like Samsung Internet. Fixed * A remembered device no longer being available no longer clears the remembered device. * Switching cameras on Firefox Android no longer causes an error. ## 1.9.0 - 2025-07-09 Changed * Successful online license checks now persist for up to 48 hours, allowing for instant initialization in most cases, and intermittent offline use by PWAs. Fixed * Calling `PopupScanner.scan()` before the SDK is initialized no longer results in a frozen popup with a spinner. * Properly marked accidentally exposed utility methods of `SdkError` as internal. * Opting out of usage data for Enterprise licenses only worked for offline keys, now the capability is honored also for online keys. ## 1.8.2 - 2025-06-16 Fixed * Added a missing bounds check to the Code 93 decoder that caused memory access errors that manifested frequently on DuckDuckGo Android and potentially other browsers. ## 1.8.1 - 2025-06-04 Fixed * Corrected a build system issue that caused the type definition for `EngineConfiguration.duplicateInterval` to be excluded. Special thanks to Johnervan Lee for reporting this issue. ## 1.8.0 - 2025-05-27 Added * Preliminary support for scanning static images with new `ImageScanner` API. Changed * Bumped Emscripten WASM compiler to 4.0.9. Fixed * Restored audio feedback in desktop/non-touch environments, we were waiting for touch activation only to unlock the Web Audio context. ## 1.7.5 - 2025-05-08 Fixed * Fixed an out-of-bounds memory read in the Aztec decoder which could cause occasional crashes. If Aztec symbology is not used, this fix has no effect. * Fixed an unhandled Promise rejection when audible feedback could not be played. ## 1.7.4 - 2025-04-28 Added * Added `StrichSDK.setAudioImpl()` function to explicitly set the audio implementation to be used for audible feedback. If not set (the default), the SDK will automatically choose an appropriate one depending on the runtime context and capabilities. Fixed * Added a workaround for an intermittent issue with iOS PWAs, where a Web Audio context would remain silent after the PWA returned to foreground. We now automatically fall back to an HTML5 Audio element for PWAs on iOS. * Explicitly set flashlight icon size to avoid application styles bleeding in. ## 1.7.3 - 2025-04-10 Added * It is now possible to provide an object instead of a boolean for the audio feedback configuration. * The new audio feedback configuration object has an `enabled` property with the same semantics as the naked boolean option. * The type of the AudioSession to use for emitting the beep can now be set using the `audioSessionType` property of the audio feedback configuration object. Setting the value to `null` will opt out of setting the AudioSession type. The value `transient` is still used as the default. ## 1.7.2 - 2025-03-27 Fixed * Clarified documentation around BarcodeReader lifecycle methods and their relation to camera access. * Added missing ARIA attributes for flashlight toggle control. * Added missing TypeDoc annotations that resulted in broken or nonexistent links in reference documentation. ## 1.7.1 - 2025-02-17 Added * PopupScanner can now be more extensively styled by supplying an overlay configuration in the `overlay` option of the PopupScanner configuration. This also enables Enterprise license holders to use the custom branding add-on within PopupScanner. ## 1.7.0 - 2025-01-28 Added * New QR Code decoder now supports rounded finder patterns via the `roundedFPs` symbology config option. * New QR Code decoder now supports codes printed on curved surfaces via the `curved` symbology config option. * If audio feedback is enabled and the [Audio Session API](https://www.w3.org/TR/audio-session/) is available, the audio session type is set to `transient`. * Improved performance in situations where lighting is uneven. Changed * Downgraded target from ES2020 to ES2019 to avoid issues with the optional chaining operator and Webpack 4.x builds. Special thanks to Gaetan from GCK Technology Consulting for providing a minimum reproducible sample. ## 1.6.1 - 2024-12-16 Added * Added `maskColor` configuration option to de-emphasize the area around the viewfinder rectangle. Using dark, semi-transparent color like `rgba(0,0,0,0.5)` works best to keep the user focused on region of interest. * Added configuration options `viewfinderBorderWidth` and `viewfinderCornerRadius` for styling the viewfinder rectangle. ## 1.6.0 - 2024-11-25 Added * Added `PopupScanner`, an out-of-the-box, modal scanning dialog with minimal customization options, drastically simplifying SDK usage for simple barcode scanning use cases. You can now scan barcodes with a single call to `PopupScanner.scan()` – building a scanner UI and managing the `BarcodeReader` is done for you. * Added localized error messages for Japanese, Chinese, Hindi, Vietnamese, Indonesian, Thai, Korean, Portuguese, Dutch, Belgian, Danish, Swedish, Norwegian and Finnish. Changed * We now use the widely available Web Audio API for audible feedback. For now, we are using it to play the existing beep sound. Going forward, the Web Audio API will allow flexible customization of the sound played on scans. ## 1.5.5 - 2024-11-04 Fixed * QR Codes that use “Mirror Imaging” feature (ISO/IEC 18004:2015, section 6.2) and have their rows/columns transposed are now supported. * QR Codes were erroneously reported as having a symbology identifier of `]Q0` (Model 1 QR Codes) instead of `]Q1`. ## 1.5.4 - 2024-10-09 Fixed * Fixed an issue in Safari on iOS 18 that prevents the flashlight from being turned off after it has been turned on. ## 1.5.3 - 2024-10-07 Added * Support optional Modulo 43 checksum for the Code 39 symbology. Setting the new symbology parameter `checksumMode` to `1` (validate) or `2` (validate and transmit) will expect a check digit. Please note that setting the parameter to `1` or `2` will lead to Code 39 barcodes that lack a valid check digit to be no longer readable. * Support optional Modulo 16 checksum for the Codabar symbology. Please refer to the new `checksumMode` symbology parameter for details. Fixed * Removed overly aggressive pruning of candidates introduced in 1.5.2 that caused performance regressions in certain scenarios. ## 1.5.2 - 2024-09-18 Added * Add a utility method `StrichSDK.getCameraPermissionState()` that returns the current state of the camera permission: `granted`, `denied`, `prompt` or `unknown`. It relies on the Permissions API which is supported by all major browsers except Firefox. Invoking the method on a browser that does not support the Permissions API will return `unknown`. Changed * If all symbologies are enabled by omitting or specifying an empty `symbologies` array in the configuration, an error message is now logged to the browser console using WARN log level. Previously this was logged by the WebAssembly engine and logged using the normal log level. This change has no impact on customers, and we maintain that logging this state as a warning makes sense, as it indicates a misconfiguration of the SDK. Fixed * Further decreased EAN/UPC barcode misread rates by performing additional checks on the barcode structure. * Fixed lower recognition rates due to too aggressive quiet zone checks. * Some error messages that were created due to malformed JSON configuration were not propagated from the WebAssembly engine to the `detailMessage` of the `SdkError`. * Fixed a rare issue where initializing a `BarcodeReader` with a bad JSON configuration prevented further attempts at initializing it with a correct one. ## 1.5.1 - 2024-08-26 Added * It is now possible to set the minimum size of the quiet zone for 1D symbologies, using the `qz` symbology parameter. There should rarely be a need to change this parameter, but especially for symbologies with weak checksums, it can make sense to use a more strict value. Fixed * Fixed frequent short scans for Codabar symbology because of insufficient quiet zone check. ## 1.5.0 - 2024-08-22 This is a major release with extensive under-the-hood improvements. No changes to existing configurations are necessary. Added * Improved read rates for the most popular 1D symbologies EAN/UPC and Code 128 across several benchmarks. * Added ink spread compensation to EAN/UPC decoder, allowing the decoder to better decode barcodes where the ink has degraded to the point where bar widths are too narrow, making the barcode non-conformant with regard to the ISO specifications. No configuration change is necessary to take advantage of this feature. * Added ISO/IEC 15424 symbology identifier to barcode detections. This is primarily useful for identifying GS1 payloads. * Improved detection rectangle for 1D barcode detections. Changed * Completely reworked core barcode segmentation and 1D barcode decoding logic, laying the groundwork for future features like multiple code detection and Augmented Reality (AR) mode. No changes to configuration are necessary. Fixed * Decreased misread ratio for EAN/UPC barcodes. Versions prior to 1.5 sometimes misread EAN/UPC barcodes. * Fixed misplaced detection rectangle for PDF417 barcodes read in reverse orientation (visual-only). * Increased read rates for QR codes at high resolutions. Removed * Removed support for 2-digit and 5-digit EAN/UPC supplements. While refactoring the 1D core, we decided to remove this seldomly-used feature. Please contact us if you require this capability. * Removed support for WebGL1 in favor of WebGL2 which has been widely available for some time now (https://www.khronos.org/blog/webgl-2-achieves-pervasive-support-from-all-major-web-browsers). Setting the `impl` property in the locator configuration to `webgl1` no longer has an effect. Devices that do not support WebGL 2 will continue working, but will skip a preprocessing step which will have a negative impact on code recognition. * Removed an unnecessary check for WebAssembly SIMD support. SIMD support is planned for the next major release. * Removed `numScanlines` property from engine configuration. The engine now automatically determines an appropriate number of scanlines depending on the context. ## 1.4.9 - 2024-07-26 Deprecated * This is the last release to retain compatibility with WebGL 1. Future releases will require WebGL 2, which has been widely available for several years now. Fixed * Decreased WASM size by using more space-efficient lookup tables in the PDF417 decoder. * Decreased bundle size by not including some code that was only used for internal debugging purposes. * Clarified documentation regarding availability of the `customLogoSrc` overlay configuration property. ## 1.4.8 - 2024-06-19 Fixed * Fixed a memory leak in the WebAssembly engine when running in debug mode. Changed * Request a smaller initial memory allocation for the WebAssembly engine (32MB instead of 64MB) to ease memory pressure on iOS. Safari currently has an open issue with WASM memory management that leads to 'Out of Memory' error in `StrichSDK.initialize()` and persists across reloads so can only be recovered from by closing and reopening the browser tab. The associated WebKit issue is: https://bugs.webkit.org/show_bug.cgi?id=222097 ## 1.4.7 - 2024-06-03 Added * Slightly improved PDF417 recognition rate for dense codes. Fixed * Fixed an issue where the number of unique devices reported to the Customer Portal was incorrect. Existing devices were being counted multiple times. The number of scans was not affected. * Gracefully handle the edge case where the device ID returned in the video track can not be found in the enumerated devices instead of throwing an internal error with detail message `Video track device not found in enumerated devices`. This state shouldn't be possible, but has been observed on Safari iOS in PWA mode. ## 1.4.6 - 2024-04-04 Added * Flashlight capability is now available on iOS, as newer versions of Safari apparently support it. Fixed * Improved camera reliability on iOS, Safari 17.4 spuriously loses the camera stream, and we were unable to recover from this event in all situations. * Fixed symbologies sometimes being enabled even though they were not configured due to uninitialized memory. ## 1.4.5 - 2024-03-26 Fixed * Fixed the `BarcodeReader` host element growing in vertical size in certain layout situations. A ResizeObserver was registered on the host element and caused an endless loop. The element hosting the camera stream will now no longer adapt automatically to size changes of the host element. Changed * If an error occurs in the constructor of `BarcodeReader`, the thrown error will now include the `detailMessage` in its `message` property, making it easier to identify problems during integration. Previously `message` contained only an opaque error message (The supplied configuration is not valid) which was not helpful in debugging issues such as the host element not using relative positioning. ## 1.4.4 - 2024-03-04 Added * Added a non-modular build flavor `strich-noesm.js` that uses an IIFE and exposes the SDK through a global `strich` object. This flavor is only recommended for scenarios where ES6 modules (import/export) are not supported. Changed * Switched our underlying build infrastructure to use esbuild instead of Parcel. If you experience issues in your build environment when upgrading to this release, please let us know. Fixed * Handle camera track muting: when the browser decides to mute the camera video track, display an error and offer to re-acquire the camera. This addresses in an issue in iOS 17.4 Beta versions where client-side navigation in SPAs triggers causes Safari to mute the track (https://bugs.webkit.org/show_bug.cgi?id=269846) and allows to recover from this state manually. * Calling `BarcodeReader.start()` on an already started `BarcodeReader` instance no longer causes performance warnings in the browser console on Chrome, and is now simply ignored. * Absolute image URLs are now supported for overlay logo customization (Enterprise-only). The hosting server must be configured to support cross-origin resource sharing (CORS). ## 1.4.3 - 2024-02-12 Changed * The default camera on iPhones with multiple back-facing cameras (e.g. iPhone 15 Pro) is now the Back Dual Wide Camera. Previously, the Back Camera was selected, which resulted in bad scanning performance due to the camera being out of focus. ## 1.4.2 - 2024-02-05 Added * Allow overriding camera selection by providing a `constraints` object in the frame source configuration. This is an advanced option that should be used with care. Fixed * Significantly improved Data Matrix read rates where codes suffer from perspective warp (not viewed from above). * GS1 QR codes with FNC1 in first position now no longer results in empty data. ## 1.4.1 - 2024-01-26 Fixed * Improved Aztec Code detection rate for compact codes and improved accuracy of detection quadrilateral. Changed * Removed all `console.error()` invocations to avoid issues with automated testing systems checking for console error messages. Non-critical errors are reported via `console.warn()`, critical errors are propagated via `SdkError` and the displayed on the overlay. ## 1.4.0 - 2023-12-29 Fixed * Fixed a performance issue that manifested itself on less powerful devices where the majority of processing time was spent on GPU->CPU buffer transfers, leading to up to 60% performance increase in some situations. Changed * `BarcodeReader.destroy()` now returns a Promise that resolves when the `BarcodeReader` and its resources are destroyed. The returned Promise is typically already resolved, unless `destroy()` is called while the BarcodeReader is being initialized, in which case the destruction happens after initialization completes. Previously, calling `destroy()` while `initialize()` was still pending caused a crash. Existing application code that calls `destroy()` does not need to be adapted. Added * Added basic overlay styling capabilities to overlay. The color of the viewfinder, camera selector control and flashlight icons can now be set via overlay configuration property `primaryColor`. The color of highlighted barcode detections can be set using `highlightColor`, and the `cornerRadius` property can be used to apply rounded corners to the viewfinder and camera selector control. The color of the targeting line when a linear barcode is detected can be set using `targetingLineActiveColor`. The defaults for all these properties match the previous hard-coded values, so if you are happy with the look & feel, you don't have to do anything. * Added overlay configuration property `filterCameras` to control filtering of camera devices shown in camera selector. If set to true `true` (default), only back-facing camera devices are listed. If set to `false`, all camera devices available in the browser are listed. * If a `BarcodeReader` could not be initialized due to missing browser capabilities like WebAssembly, WebGL or getUserMedia, mention the missing capability in the `detailMessage` property of the thrown `SdkError`. * Report the detected code's location as a quadrilateral instead of an axis-aligned bounding box in the new `quadrilateral` property of the `CodeDetection`. The overlay will also use this more precise location for drawing the detections if `drawDetections` is enabled. ## 1.3.4 - 2023-11-28 Fixed * Significantly improved Aztec Code recognition rates for full-range codes. * Removed transmission of unused URL parts in license verification and usage tracking. ## 1.3.3 - 2023-11-07 Fixed * Fixed an issue on iOS where camera access failed with a camera device is not compatible error message `rememberCameraDeviceId` was set to `true` and the user's device changed, leading to the remembered camera device id no longer being valid. Changed * Expose detail message when license check fails, providing potentially useful information on how to resolve the issue (e.g. URL not in scope). Added * Throw a dedicated error if the SDK is initialized in an insecure context (non-HTTPS, non-localhost). Previously this was reported in a confusing fashion (invalid license). ## 1.3.2 - 2023-10-26 Fixed * Fixed an issue that led to offline-capable license keys being reported as expired. ## 1.3.1 - 2023-10-14 Added * Added configuration option `focusOnTap` (default: `true`) to overlay configuration: this toggles the autofocus that occurs when tapping on the overlay. Previously focusing on tap was always enabled. Changed * Adapted license service calls in order to re-enable detailed usage stats in Customer Portal using Client Hints. No changes to existing Content Security Policies are necessary. ## 1.3.0 - 2023-09-20 Added * New configuration option `rememberCameraDeviceId` in frame source configuration: if set to `true`, the SDK will remember the selected camera device after a successful scan, and attempt to re-acquire it when re-initialized. Default value is `false`. * Support for PDF417 and Compact PDF417 symbologies is now available, the new symbology can be activated by specifying `pdf417` in the `symbologies` array of the engine configuration. PDF417 barcodes can only be read in horizontal direction at the moment. Changed * Under the hood improvements and removal of legacy code. ## 1.2.2 - 2023-08-16 Added * Extended support for inverted codes to 1D barcodes. Setting `invertedCodes` to `true` will now also cause inverted 1D barcodes to be read. * New helper method `StrichSDK.hasCameraDevice()` to check for the existence and availability of a camera device. ## 1.2.1 - 2023-07-28 Added * Raw code data is now exposed through the `rawData` property of the `CodeDetection`. ## 1.2.0 - 2023-07-12 Added * The GPU-accelerated barcode locator is now based on WebGL 2, which is widely supported by now. If you are for some reason required to use WebGL 1, set the new `impl` field on the locator configuration to `webgl1`. WebGL 2 supports asynchronous reads which we use to decrease the load on the main thread. Some older Safari versions have reported issues using the asynchronous reads, which is why for the moment we have disabled asynchronous reads on iOS. This will likely change in the future. Fixed * Fixed a rare engine crash that resulted from incorrect error handling. Changed * Changed the default values for `hysteresisMinCount` to `2` and `hysteresisInterval` to `350`. The previous defaults were causing EAN/UPC codes to be unreadable on low-end Android devices. ## 1.1.4 - 2023-06-26 Added * User-facing error messages (e.g. "Access to camera not permitted") are now localized. English, Spanish, German, French and Italian are the currently supported languages, with more to come. * Prepared support for iOS 17 Safari OffscreenCanvas+WebGL support. STRICH will utilize a GPU-accelerated OffscreenCanvas if the browser supports it. Fixed * Improved performance when scanning EAN/UPC codes with hysteresis enabled. ## 1.1.3 - 2023-06-07 Added * Configurable min/max length for variable-length symbologies. Instead of just the name, specify an object with `name`, `minLen` and/or `maxLen` in the `symbologies` array. Example: `symbologies: 'ean13', { name: 'code128', minLen: 8, maxLen: 12 }` Fixed * Removed a stray console output statement that was meant for debugging purposes only. ## 1.1.2 - 2023-06-06 Fixed * Improved error handling when encountering `OverconstrainedError`, especially on Firefox desktop. Special thanks to Jukka Aittokallio for reporting the issue. ## 1.1.1 - 2023-05-22 Added * Added hysteresis for 1D barcodes with weak checksums (EAN/UPC symbologies) to decrease misreads. This feature improves reliability for EAN/UPC barcodes at the cost of slightly slower detection, and can be deactivated by setting the new `hysteresisMinCount` engine parameter to `0`. Fixed * Fixed a memory violation in the Databar decoder, which would occasionally crash the engine. ## 1.1.0 - 2023-05-17 Added * Added experimental support for EAN-2/EAN-5 supplements (new `ean2` and `ean5` symbology options). Note that this feature is experimental: supplemental symbologies will not be enabled if you enable all symbologies (which we do not recommend). * Added an optional `onError` callback to the BarcodeReader instance. ## 1.0.9 - 2023-05-15 Fixed * Fixed an issue where an error in the WebAssembly engine was misinterpreted, and wrong results where generated. * Do not draw the red 'laser line' when a 2D symbology is scanned ## 1.0.8 - 2023-05-11 Added * Not calling `BarcodeReader.destroy()` after no longer needing a BarcodeReader is a common cause of camera access errors. A warning is now logged to the browser console if a BarcodeReader is initialized when another instance remains that was not destroyed yet. * If no `regionOfInterest` is specified in the configuration, an appropriately sized region will now be automatically selected based on the configured symbologies. Fixed * The horizontal targeting line in the scanning overlay was not being shown if all symbologies were enabled. ## 1.0.7 - 2023-05-06 Fixed * When a BarcodeReader was used in standalone display mode on iOS (PWA, added to home screen), camera access was lost when the user unfocused the PWA. An error is now displayed in this case, along with a button to resume scanning. Changed * Clarified acceptable use of `StrichSDK.setCustomId()`, personally identifying data must not be sent. ## 1.0.6 - 2023-04-19 Fixed * The combination of Enterprise offline license with analytics opt-in did not work, no usage data was sent. ## 1.0.5 - 2023-04-18 Fixed * Deactivating audio feedback (beep) was not possible. Added * Log a warning to the browser console if an invalid resolution (e.g. 'qhd') is specified in the frame source configuration. ## 1.0.4 - 2023-03-30 Fixed * Internal code change that addresses a "ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor" build error in older optimized Angular versions. ## 1.0.3 - 2023-03-30 Changed * Not setting a `duplicateInterval` in the engine configuration will now lead to a default 750ms interval to be used. Fixed * Ensured compatibility with iOS 16.4, do not attempt to instantiate a WebGL context on an OffscreenCanvas. ## 1.0.2 - 2023-03-23 Added * Activated custom logo on overlay feature (Enterprise-only). Fixed * Added missing fallback to medium precision on devices which do not support WebGL high precision floats. ## 1.0.1 - 2023-03-20 Fixed * Gracefully handle the situation where MediaStream does not implement getCapabilities() (e.g. Firefox Android). * Avoid spurious exception after `BarcodeReader.destroy()` from an asynchronous overlay update in destroyed state * Aztec code detection rectangle was not displayed on overlay for some non-compact Aztec codes. ## 1.0.0 - 2023-03-15 This is the first public release. A special thank you to all pilot users for getting us here! Added * Log engine version on initialization. ## 0.9.11 - 2023-03-13 Fixed * Fixed memory access violations which manifested quickly when all symbologies are activated ## 0.9.10 - 2023-03-10 Changed * Force WebGL context loss when destroying WebGL resources, avoiding warning messages when too many WebGL contexts are allocated. Fixed * BarcodeReader.destroy() did not destroy all engine resources, leading to intermittent crashes on iOS Safari ## 0.9.9 - 2023-03-10 Fixed * BarcodeReader.destroy() now properly removes all elements added to the host element * Respect analyticsOptOut: false for offline-capable licenses that still want usage data ## 0.9.8 - 2023-02-28 Fixed * Fixed bug where online license verification was not retried on network errors, only on non-200 HTTP status codes. ## 0.9.7 - 2023-02-23 Fixed * Fixed accidental inclusion of dependency. ## 0.9.6 - 2023-02-22 Fixed * Fixed bug that prevented offline licenses from activating the SDK. ## 0.9.5 - 2023-02-22 Added * Activated support for Offline licenses. ## 0.9.4 - 2023-02-21 Fixed * Fixed a regression that caused problems reading rotated Aztec codes. ## 0.9.3 - 2023-02-14 Added * Added this CHANGELOG.md file to the project. ## 0.9.2 - 2023-02-10 Changed * Started using `main` instead of `browser` target in `package.json` to avoid problems with SSR frameworks such as Next.js. ## 0.9.1 - 2023-02-07 This is the first public release, distributed via NPMJS.

Hello, world!

Scan Badge

My Items

Return Items

Borrow Items