scandit-sdk

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Scandit Barcode Scanner SDK for the Web</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">Scandit Barcode Scanner SDK for the Web</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> <input type="checkbox" id="tsd-filter-only-exported" /> <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <ul class="tsd-breadcrumb"> <li> <a href="globals.html">Globals</a> </li> </ul> <h1> Scandit Barcode Scanner SDK for the Web</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <a href="#scandit-barcode-scanner-sdk-for-the-web---omit-in-toc---" id="scandit-barcode-scanner-sdk-for-the-web---omit-in-toc---" style="color: inherit; text-decoration: none;"> <h1>Scandit Barcode Scanner SDK for the Web</h1> </a> Enterprise barcode scanning performance in your browser via JavaScript and WebAssembly. Made by <a href="https://www.scandit.com/">Scandit</a> <img src="https://img.shields.io/npm/v/scandit-sdk.svg" alt="npm"> <img src="https://img.shields.io/npm/dm/scandit-sdk.svg" alt="npm"> <img src="https://img.shields.io/jsdelivr/npm/hm/scandit-sdk.svg" alt="jsDelivr hits (npm)"> <img src="https://img.shields.io/snyk/vulnerabilities/npm/scandit-sdk.svg" alt="Snyk Vulnerabilities for npm package"> <img src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/scandit-sdk/build/browser/index.min.js.svg?compression=gzip&label=Main%20Library%20Size" alt="main library size"> <img src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/scandit-sdk/build/scandit-engine-sdk.min.js.svg?compression=gzip&label=Scandit%20Engine%20JS%20Size" alt="main library size"> <img src="https://img.badgesize.io/https://cdn.jsdelivr.net/npm/scandit-sdk/build/scandit-engine-sdk.wasm.svg?compression=gzip&label=Scandit%20Engine%20WASM%20Size" alt="main library size"> Access cameras available on the devices for video input, display a barcode picker interface, configure in-depth settings for barcode symbologies and performance, and let users easily scan barcodes in your web application. Try out our live demo <a href="http://websdk.scandit.com">here</a>. Find out more information on our product <a href="https://www.scandit.com/products/sdk-web/">here</a>. To use this library you must possess a valid Scandit account and license key. You can register for a free trial <a href="https://ssl.scandit.com/customers/new?p=test&source=websdk">here</a>. This library is meant to be used natively in a web browser, if you are instead looking for a Cordova/PhoneGap plugin, please go <a href="https://github.com/Scandit/barcodescanner-sdk-cordova">here</a>. Table of Contents: <ul> <li><a href="#getting-started-web-application">Getting Started: Web Application</a></li> <li><a href="#getting-started-local-development">Getting Started: Local Development</a></li> <li><a href="#configuration">Configuration</a></li> <li><a href="#usage">Usage</a></li> <li><a href="#example-applications">Example Applications</a></li> <li><a href="#advanced-components-and-sample-apps">Advanced Components and Sample Apps</a></li> <li><a href="#browser-support-and-requirements">Browser Support and Requirements</a></li> <li><a href="#documentation">Documentation</a></li> <li><a href="#faq">FAQ</a></li> <li><a href="#important-notes">Important Notes</a></li> <li><a href="#support">Support</a></li> <li><a href="#project-commands">Project Commands</a></li> <li><a href="#versioning-and-changelog">Versioning and Changelog</a></li> <li><a href="#built-tested-and-documented-with">Built, Tested and Documented With</a></li> <li><a href="#authors">Authors</a></li> <li><a href="#license">License</a></li> </ul> <a href="#getting-started-web-application" id="getting-started-web-application" style="color: inherit; text-decoration: none;"> <h2>Getting Started: Web Application</h2> </a> These instructions will help you set up the library for a quick and simple deployment as a JavaScript script included in your webpage / web application. You can use the <a href="https://jsdelivr.com">jsDelivr</a> or <a href="https://unpkg.com">UNPKG</a> CDN to easily <a href="https://semver.npmjs.com">specify a certain version (range)</a> and include our library as follows (example for <code>4.6.1</code>: the current version automatically retrieved when specifying a <code>4.x</code> version; check our latest available library <a href="https://docs.scandit.com/stable/web/CHANGELOG.md">here</a>): <pre><code class="language-html"><script src="https://cdn.jsdelivr.net/npm/scandit-sdk@4.x"></script></code></pre> or <pre><code class="language-html"><script src="https://unpkg.com/scandit-sdk@4.x"></script></code></pre> Or download the library with <a href="https://github.com/npm/npm">npm</a> / <a href="https://github.com/yarnpkg/yarn">Yarn</a>, save it and include it from your local files. Via NPM: <pre><code class="language-bash">npm install scandit-sdk --save</code></pre> Via Yarn: <pre><code class="language-bash">yarn add scandit-sdk</code></pre> Include as <a href="https://github.com/umdjs/umd">UMD module</a> (this is most probably what you need): <pre><code class="language-html"><script src="/node_modules/scandit-sdk/build/browser/index.min.js"></script></code></pre> Include as <a href="https://jakearchibald.com/2017/es-modules-in-browsers/">ES module</a>: <pre><code class="language-html"><script type="module" src="/node_modules/scandit-sdk/build/browser/index.esm.min.js"></script></code></pre> Non-minified modules are also available if needed: just include the non-".min" file. The library will then be accessible via the global <code>ScanditSDK</code> object. <a href="#getting-started-local-development" id="getting-started-local-development" style="color: inherit; text-decoration: none;"> <h2>Getting Started: Local Development</h2> </a> These instructions will help you set up the library for local development and testing purposes, include it in a more complex JavaScript or TypeScript project and make it part of your final deployed code later built and bundled via tools like <a href="https://github.com/webpack/webpack">Webpack</a>, <a href="https://github.com/rollup/rollup">Rollup</a> or <a href="https://github.com/browserify/browserify">Browserify</a>. Download the library with <a href="https://github.com/npm/npm">npm</a> / <a href="https://github.com/yarnpkg/yarn">Yarn</a>. Via NPM: <pre><code class="language-bash">npm install scandit-sdk --save</code></pre> Via Yarn: <pre><code class="language-bash">yarn add scandit-sdk</code></pre> We provide two different bundled versions of the library depending on your needs: <ul> <li><a href="http://www.commonjs.org/specs/modules/1.0/">CommonJS module</a> (with type definitions) - <code>build/main</code></li> <li><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import">ES6 module</a> (with type definitions) - <code>build/module</code></li> </ul> For reference, you also have the following browser bundles: <ul> <li><a href="https://github.com/umdjs/umd">UMD module</a> - <code>build/browser/index.js</code></li> <li><a href="https://jakearchibald.com/2017/es-modules-in-browsers/">ES module</a> - <code>build/browser/index.esm.js</code></li> </ul> The library can be included in your code via either CommonJS or ES imports. ES2015 (ES6): <pre><code class="language-javascript">import * as ScanditSDK from "scandit-sdk";</code></pre> CommonJS: <pre><code class="language-javascript">var ScanditSDK = require("scandit-sdk");</code></pre> With ES imports it's also possible to use single components. For example: <pre><code class="language-javascript">import { Barcode, BarcodePicker, ScanSettings, configure } from "scandit-sdk";</code></pre> <a href="#configuration" id="configuration" style="color: inherit; text-decoration: none;"> <h2>Configuration</h2> </a> The first thing that is needed to use the library is to do an initial configuration of the <code>ScanditSDK</code> object, this is required before any other function of the library can be used. The configuration function looks as follows: <pre><code class="language-typescript">ScanditSDK.configure(licenseKey: string, { engineLocation: string = "/" })</code></pre> The first required configuration option is a valid Scandit license key - this is necessary for the library to work and is verified at configuration time. In order to get your license key you must <a href="https://ssl.scandit.com/customers/new?p=test&source=websdk">register and login to your account</a>. The key will be available (and configurable) in your personal dashboard and is tied to your website / web application. The next (often required) optional configuration option is the location of the Scandit Engine library location (external WebAssembly files): <code>scandit-engine-sdk.min.js</code> and <code>scandit-engine-sdk.wasm</code>. WebAssembly requires these separate files which are loaded by our main library at runtime. They can be found inside the <code>build</code> folder in the library you either download or access via a CDN; if you download the library, these files should be put in a path that's accessible to be downloaded by the running library script. The configuration option that you provide should then point to the folder containing these files, either as a path of your website or an absolute URL (like the CDN one). By default the library will look at the root of your website. If you use a CDN to access the library, you will want to set this to <code>"https://cdn.jsdelivr.net/npm/scandit-sdk/build"</code>, <code>"https://unpkg.com/scandit-sdk/build"</code>, or similar. Please ensure that the version of the main library that you set up in the "Getting Started" section corresponds to the version of the external Scandit Engine library retrieved via the <code>engineLocation</code> option, either by ensuring the served files are up-to-date or the path/URL specifies a specific version. In case a common CDN is used here (jsDelivr or UNPKG) the library will automatically internally set up the correct URLs pointing directly at the files needed for the matching library version. It is highly recommended to handle the serving of these files yourself on your website/server, ensuring optimal compression, no request redirections and correct caching headers usage; thus resulting in faster loading. A configuration call could look as follows: <pre><code class="language-javascript">ScanditSDK.configure("LICENSE_KEY_HERE", { engineLocation: "build/" });</code></pre> Note that camera access requests and external Scandit Engine library loads are done lazily only when needed by a <code>BarcodePicker</code> (or <code>Scanner</code>) object. To make the loading process faster when scanning is actually needed, it is recommended depending on the use case to create in advance a (hidden and paused) <code>BarcodePicker</code> or <code>Scanner</code> object, to later simply show and unpause it when needed. You can also eagerly ask only for camera access permissions by calling the <code>ScanditSDK.CameraAccess.getCameras()</code> function. An example of this advanced usage can be found in the <code>example_background.html</code> file. More details are also given in the next section. <a href="#usage" id="usage" style="color: inherit; text-decoration: none;"> <h2>Usage</h2> </a> Once the library has been configured, there are two main ways to interact with it: via the <code>BarcodePicker</code> object, providing an easy to use high-level UI and API to setup barcode scanning via cameras, or via the <code>Scanner</code> object, providing only low level methods to process image data. In order to use the <code>BarcodePicker</code>, an HTML element must be provided to act as (parent) container for the UI. You can configure size and other styling properties/restrictions by simply setting rules on this element - the picker will fit inside it. A sample element could look as follows: <pre><code class="language-html"><div id="scandit-barcode-picker" style="max-width: 1280px; max-height: 80%;"></div></code></pre> The <code>BarcodePicker</code> can then be created by simply passing the previous HTML element plus optional settings; this will show the UI, access the camera, initialize the Scandit Engine library and start scanning. JavaScript: <pre><code class="language-javascript">ScanditSDK.BarcodePicker.create(document.getElementById("scandit-barcode-picker"), { playSoundOnScan: true, vibrateOnScan: true }).then(function(barcodePicker) { // barcodePicker is ready here to be used (rest of the tutorial code should go here) });</code></pre> Typescript: <pre><code class="language-typescript">BarcodePicker.create(document.getElementById("scandit-barcode-picker"), { playSoundOnScan: true, vibrateOnScan: true }).then((barcodePicker) => { // barcodePicker is ready here to be used (rest of the tutorial code should go here) });</code></pre> By default, no symbology is enabled for recognition so nothing special will happen; we can now quickly set up <code>ScanSettings</code> to enable wanted symbologies plus other more advanced options if needed (we could also already have done it via the previous constructor). Setting up some sample configuration looks as follows. JavaScript: <pre><code class="language-javascript">var scanSettings = new ScanditSDK.ScanSettings({ enabledSymbologies: ["ean8", "ean13", "upca", "upce", "code128", "code39", "code93", "itf"], codeDuplicateFilter: 1000 }); barcodePicker.applyScanSettings(scanSettings); // Note that enumeration variables for symbologies are recommended to be used instead (strings are used here for brevity)</code></pre> TypeScript: <pre><code class="language-typescript">const scanSettings = new ScanSettings({ enabledSymbologies: [ Barcode.Symbology.EAN8, Barcode.Symbology.EAN13, Barcode.Symbology.UPCA, Barcode.Symbology.UPCE, Barcode.Symbology.CODE128, Barcode.Symbology.CODE39, Barcode.Symbology.CODE93, Barcode.Symbology.INTERLEAVED_2_OF_5 ], codeDuplicateFilter: 1000 }); barcodePicker.applyScanSettings(scanSettings);</code></pre> The picker is now actively scanning the selected symbologies (detecting the same barcode a maximum of one time per second), if we later want to change the settings we just have to modify the object and apply it again to the picker. In order to react to a successful scan event with your code you can attach one or more listener functions to the picker. JavaScript: <pre><code class="language-javascript">barcodePicker.on("scan", function(scanResult) { alert(scanResult.barcodes.reduce(function(string, barcode) { return string + ScanditSDK.Barcode.Symbology.toHumanizedName(barcode.symbology) + ": " + barcode.data + "\n"; }, "")); });</code></pre> TypeScript: <pre><code class="language-typescript">barcodePicker.on("scan", (scanResult) => { alert(scanResult.barcodes.reduce((string, barcode) => { return string + `${Barcode.Symbology.toHumanizedName(barcode.symbology)}: ${barcode.data}\n`; }, "")); });</code></pre> That's it! Please refer to the <a href="#documentation">documentation</a> for all the other available configuration options and functions, as well as more advanced <code>ScanSettings</code> and <code>Scanner</code> usage. <a href="#example-applications" id="example-applications" style="color: inherit; text-decoration: none;"> <h2>Example Applications</h2> </a> You can have a look at the <code>example.html</code> file for a (almost) ready to use webpage using the library. A valid license key must be inserted replacing <code>"YOUR_LICENSE_KEY_IS_NEEDED_HERE"</code>; you then only need to serve the folder containing it for it to run. Note that it depends on the <code>build</code> folder contents. You can also find a more advanced sample webpage in the <code>example_background.html</code> file, showing how to create a <code>BarcodePicker</code> object which loads the library in the background and how to start/show it at will. This is the recommended way to use the library in many situations. You can use your own tools, or the following proposed simple way to quickly set up a local server. Globally install the <code>http-server</code> JavaScript package. Via NPM: <pre><code class="language-bash">npm install http-server -g</code></pre> Via Yarn: <pre><code class="language-bash">yarn global add http-server</code></pre> Run the new package from the folder containing <code>example.html</code> / <code>example_background.html</code> with: <pre><code class="language-bash">http-server</code></pre> Please note that this simple server will not compress files thus resulting in slower loading times than normal. Finally, access the webpage via your favourite (and supported) browser at <code>http://127.0.0.1:8080/example.html</code> / <code>http://127.0.0.1:8080/example_background.html</code>! <a href="#advanced-components-and-sample-apps" id="advanced-components-and-sample-apps" style="color: inherit; text-decoration: none;"> <h2>Advanced Components and Sample Apps</h2> </a> For the Angular framework you can use our <a href="https://www.npmjs.com/package/scandit-sdk-angular">scandit-sdk-angular</a> component. For the React framework you can use our <a href="https://www.npmjs.com/package/scandit-sdk-react">scandit-sdk-react</a> component. You can find online further sample applications making use of this library at <a href="https://github.com/Scandit/barcodescanner-sdk-for-web-samples">https://github.com/Scandit/barcodescanner-sdk-for-web-samples</a>. <a href="#browser-support-and-requirements" id="browser-support-and-requirements" style="color: inherit; text-decoration: none;"> <h2>Browser Support and Requirements</h2> </a> Due to the advanced features required and some limitations imposed by operating systems, only the browsers listed below are able to correctly use this library. The following is a list of the main required browser features together with links to updated support statistics: <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a> - <a href="https://caniuse.com/#feat=blobbuilder">current support?</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL">URL/createObjectURL</a> - <a href="https://caniuse.com/#feat=bloburls">current support?</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API">Web Workers</a> - <a href="https://caniuse.com/#feat=webworkers">current support?</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/WebAssembly">WebAssembly</a> - <a href="https://caniuse.com/#feat=wasm">current support?</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia">MediaDevices/getUserMedia</a> - <a href="https://caniuse.com/#feat=stream">current support?</a> (optional, required for camera video streaming)</li> </ul> This results in the current browser compatibility list: <ul> <li>Desktop<ul> <li>Chrome 57+</li> <li>Firefox 52+ (except ESR 52)</li> <li>Opera 44+</li> <li>Safari 11+</li> <li>Edge 16+</li> </ul> </li> <li>Mobile - Android<ul> <li>Chrome 59+</li> <li>Firefox 55+</li> <li>Samsung Internet 7+</li> <li>Opera 46+</li> </ul> </li> <li>Mobile - iOS<ul> <li>Safari 11+</li> <li>Chrome 59+ (no camera video streaming)</li> <li>Firefox 55+ (no camera video streaming)</li> </ul> </li> </ul> <a href="#documentation" id="documentation" style="color: inherit; text-decoration: none;"> <h2>Documentation</h2> </a> An updated in-depth documentation of all of the libraries' specifications and functionalities can be generated/found in the <code>docs</code> folder or can also be accessed online at <a href="https://docs.scandit.com/stable/web">https://docs.scandit.com/stable/web</a>. <a href="#faq" id="faq" style="color: inherit; text-decoration: none;"> <h2>FAQ</h2> </a> You can find answers in our list of <a href="https://support.scandit.com/hc/en-us/categories/115000369292-Barcode-Scanner-SDK-for-the-Web">frequently asked questions (FAQs)</a>. <a href="#important-notes" id="important-notes" style="color: inherit; text-decoration: none;"> <h2>Important Notes</h2> </a> <ul> <li>HTTPS deployment / Secure origin You must serve your final web application / website via HTTPS: due to browser security restrictions, camera video streaming access is only granted if a <a href="https://www.chromium.org/Home/chromium-security/prefer-secure-origins-for-powerful-new-features">secure origin</a> is used. This is not needed for local IP addresses during development, however note that depending on the browser camera permissions could be asked every time in this case. This does not apply for "single image mode". During development you can also circumvent these restrictions on your own browser by doing the following: on Chrome you can enable and configure the <code>chrome://flags/#unsafely-treat-insecure-origin-as-secure</code> flag, on Safari you can enable the menu item <code>Develop > WebRTC > Allow Media Capture on Insecure Sites</code>. </li> <li>WASM file format Please make sure that your webserver serves the <code>scandit-engine-sdk.wasm</code> file with <code>Content-Type: application/wasm</code> (it should be the default correct MIME type), failure to do so will result in some browsers failing to execute the external library or loading it more slowly. </li> <li>Cookies for device identification For licensing purposes we use cookies to assign and store/retrieve completely random device IDs of end users of the library. This may change in the future, but currently it cannot be disabled. </li> <li>Analytics data Our Scandit Engine library makes several different requests at initialization and during usage of the scanning library to our servers, in order to store and provide analytics data about the usage of the SDK. This request/information is the same as what we collect for other SDKs. </li> <li>License key A Scandit license key for this particular library is required. The license key is verified at runtime with each library usage and is linked/limited to your specified domain names to prevent abuse. Local addresses and private IPs are also allowed for testing independently from the domain name restriction in a valid license. </li> <li>Camera performance On desktop or Android devices, the Chrome browser provides more advanced camera controls and results in better performance than other browsers. At the moment, it is also the only browser to support manual camera focus operations (via tapping the screen) and mobile torch toggling, where available. More browsers are expected to support these advanced features soon. </li> <li>Scanning performance The performance of the scanner depends on the device and camera being used. Nonetheless for optimal speed/quality, please keep in mind the following guidelines/tips: <ul> <li>Enable only the symbologies you really need to scan (1D code scanning is usually faster than 2D code scanning, only having 1D codes enabled is faster).</li> <li>Only increase the maximum amount of codes per single frame from the default of 1 if it's really needed.</li> <li>If possible, restrict the scanning search area to be less than the default full frame.</li> <li>Depending on your use case, it might be worth to enable Full HD video quality, resulting in slower frame processing times but higher resolution recognition.</li> <li>"Single image mode" internally uses higher quality settings to scan images, this results in slower but much better scanning performance, with the limitation of having to take and provide single pictures from the camera.</li> <li>The first "single image mode" scan might be slower than subsequent ones depending on the network condition as the engine has to first verify the license key online before proceeding.</li> <li>GPU acceleration allows for faster and more accurate barcode localization at challenging positions and angles but is only available if the browser supports it.</li> <li>Blurry code recognition (enabled by default) allows for accurate scanning capabilities for out-of-focus (1D) codes at the expense of more computationally expensive frame analysis: check and adjust scan settings according to your needs.</li> </ul> </li> <li>Library performance In order to provide the best possible experience in your web application, please follow these guidelines to guarantee optimal performance of this library: <ul> <li>Ensure the JavaScript assets and the <code>scandit-engine-sdk.min.js</code> and <code>scandit-engine-sdk.wasm</code> files are served compressed, without redirections and with caching headers enabled by your web server. Note that some CDN services do not offer compression or, depending on used settings/URLs, implement redirections that don't allow for correct caching of assets.</li> <li>Ensure that the <code>scandit-engine-sdk.wasm</code> file is served with the <code>Content-Type</code> HTTP header set to <code>application/wasm</code> to ensure the correct and fast loading of the WebAssembly library component.</li> <li>Re-use <code>BarcodePicker</code> instances whenever possible by reassigning, hiding and showing them instead of destroying and recreating them: each object needs to load and initialize the external library on creation. Ideally only one instance should be used.</li> <li>If possible, create a (hidden and paused) <code>BarcodePicker</code> in the background and simply resume scanning by switching its visibility to <code>"show"</code> when needed, instead of creating it on the fly to provide instant scanning capabilities. You can also set it up to not access the camera immediately (<code>cameraAccess</code> option set to <code>false</code> on creation) and lazily do that later when needed (<code>BarcodePicker.accessCamera()</code> function call), or also pause and resume camera access when necessary. For a sample application, please refer to the <code>example_background.html</code> file.</li> <li>Remember to use <code>destroy()</code> methods on the <code>Scanner</code> or <code>BarcodePicker</code> objects when they are not needed anymore, before they are automatically garbage collected by JavaScript. This will ensure all needed resources are correctly cleaned up.</li> <li>Camera permissions can be asked to the user in advance via this library (background <code>BarcodePicker</code> creation or <code>ScanditSDK.CameraAccess.getCameras()</code> function call) or other external methods to ensure a more fluid experience depending on the situation. Remember that usually these permissions are stored forever and need only to be asked once. As an alternative you can consider "single image mode".</li> </ul> </li> <li>Scandit logo In accordance with our license terms, the Scandit logo displayed in the bottom right corner of the barcode picker must be displayed and cannot be hidden by any method. Workarounds are not allowed. </li> <li>iOS 11.2.2 / 11.2.5 / 11.2.6 support Apple released iOS version 11.2.2 on January 8, 2018, as an emergency update meant to mitigate the effects of the widespread Spectre vulnerability. This update also included changes related to WebKit and the Safari browser, as documented <a href="https://webkit.org/blog/8048/what-spectre-and-meltdown-mean-for-webkit/">here</a>. Unfortunately this update also introduced a critical WebAssembly bug, which caused this and many other libraries relying on this technology to randomly crash and fail to access memory with <code>Out of bounds memory access</code> or <code>None: abort(6)</code> errors on iOS versions 11.2.2, 11.2.5 and 11.2.6. This problem cannot be solved by us or other library developers; the issue has already been reported to Apple by multiple sources and a fix for it has been released in iOS 11.3. We suggest to conditionally use the library or show alerts to the affected users by utilizing the OS version information available in the browser via the user agent string. </li> </ul> <a href="#support" id="support" style="color: inherit; text-decoration: none;"> <h2>Support</h2> </a> For questions or support please use the form you can find <a href="https://support.scandit.com/hc/en-us/requests/new">here</a> or send us an email to <a href="mailto:support@scandit.com">support@scandit.com</a>. <a href="#project-commands" id="project-commands" style="color: inherit; text-decoration: none;"> <h2>Project Commands</h2> </a> If you want to work on this project, the following is a list of the most useful <a href="https://github.com/yarnpkg/yarn">Yarn</a> commands you can run in this project (here shown with Yarn). You should use <code>yarn</code> instead of <code>npm</code> to handle project dependencies to make use of the existing <code>yarn.lock</code> file. Build (rebuild) and create all output modules: <pre><code class="language-bash">yarn build</code></pre> Remove build and test output folders: <pre><code class="language-bash">yarn clean</code></pre> Lint all source files: <pre><code class="language-bash">yarn lint</code></pre> Try to automatically fix all linting problems: <pre><code class="language-bash">yarn fix</code></pre> Build (rebuild) main library and run unit tests: <pre><code class="language-bash">yarn test</code></pre> Run tests, generate HTML coverage report, and open it in a browser: <pre><code class="language-bash">yarn coverage</code></pre> Generate HTML API documentation and open it in a browser: <pre><code class="language-bash">yarn docs</code></pre> Generate LICENSE file with copyright and licenses of dependencies: <pre><code class="language-bash">yarn license</code></pre> Delete all untracked files, reset the repo to the last commit and install all needed packages: <pre><code class="language-bash">yarn reset</code></pre> Build (rebuild) browser UMD library and show bundle size information: <pre><code class="language-bash">yarn size-info</code></pre> Show all available commands: <pre><code class="language-bash">yarn info</code></pre> <a href="#versioning-and-changelog" id="versioning-and-changelog" style="color: inherit; text-decoration: none;"> <h2>Versioning and Changelog</h2> </a> We use <a href="https://semver.org/">SemVer</a> for versioning. A log of the project's releases over time with their features and changes can be found in the <a href="https://docs.scandit.com/stable/web/CHANGELOG.md">CHANGELOG.md</a> file (also found inside the project). <a href="#built-tested-and-documented-with" id="built-tested-and-documented-with" style="color: inherit; text-decoration: none;"> <h2>Built, Tested and Documented With</h2> </a> <ul> <li><a href="https://github.com/postcss/autoprefixer">Autoprefixer</a></li> <li><a href="https://github.com/avajs/ava">AVA</a></li> <li><a href="https://github.com/babel/babel">Babel</a></li> <li><a href="https://github.com/ben-eb/cssnano">cssnano</a></li> <li><a href="https://github.com/gulpjs/gulp">gulp</a></li> <li><a href="https://github.com/istanbuljs/nyc">Istanbul</a></li> <li><a href="https://github.com/jsdom/jsdom">jsdom</a></li> <li><a href="https://github.com/nightwatchjs/nightwatch">Nightwatch</a></li> <li><a href="https://github.com/postcss/postcss">PostCSS</a></li> <li><a href="https://github.com/prettier/prettier">Prettier</a></li> <li><a href="https://github.com/rollup/rollup">Rollup</a></li> <li><a href="https://github.com/sass/sass">Sass</a></li> <li><a href="https://github.com/sinonjs/sinon">Sinon.JS</a></li> <li><a href="https://github.com/stylelint/stylelint">stylelint</a></li> <li><a href="https://github.com/terser-js/terser">Terser</a></li> <li><a href="https://github.com/palantir/tslint">TSLint</a></li> <li><a href="https://github.com/TypeStrong/typedoc">TypeDoc</a></li> <li><a href="https://github.com/bitjson/typescript-starter">TypeScript Starter</a></li> <li><a href="https://github.com/Microsoft/TypeScript">TypeScript</a></li> </ul> <a href="#authors" id="authors" style="color: inherit; text-decoration: none;"> <h2>Authors</h2> </a> <ul> <li>Lorenzo Wölckner (Scandit)</li> </ul> <a href="#license" id="license" style="color: inherit; text-decoration: none;"> <h2>License</h2> </a> This project is licensed under a custom license - see the <a href="https://docs.scandit.com/stable/web/LICENSE">LICENSE</a> file for details (also found inside the project). </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="globals.html">Globals</a> </li> <li class=" tsd-kind-module"> <a href="modules/barcode.html">Barcode</a> </li> <li class=" tsd-kind-module"> <a href="modules/browsercompatibility.html">BrowserCompatibility</a> </li> <li class=" tsd-kind-module"> <a href="modules/browserhelper.html">BrowserHelper</a> </li> <li class=" tsd-kind-module"> <a href="modules/camera.html">Camera</a> </li> <li class=" tsd-kind-module"> <a href="modules/cameraaccess.html">CameraAccess</a> </li> <li class=" tsd-kind-module"> <a href="modules/camerasettings.html">CameraSettings</a> </li> <li class=" tsd-kind-module"> <a href="modules/imagesettings.html">ImageSettings</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-class"> <a href="classes/barcodepicker.html" class="tsd-kind-icon">BarcodePicker</a> </li> <li class=" tsd-kind-class"> <a href="classes/parser.html" class="tsd-kind-icon">Parser</a> </li> <li class=" tsd-kind-class"> <a href="classes/scanresult.html" class="tsd-kind-icon">ScanResult</a> </li> <li class=" tsd-kind-class"> <a href="classes/scansettings.html" class="tsd-kind-icon">ScanSettings</a> </li> <li class=" tsd-kind-class"> <a href="classes/scanner.html" class="tsd-kind-icon">Scanner</a> </li> <li class=" tsd-kind-class"> <a href="classes/symbologysettings.html" class="tsd-kind-icon">SymbologySettings</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/barcodeencodingrange.html" class="tsd-kind-icon">BarcodeEncodingRange</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/parserfield.html" class="tsd-kind-icon">ParserField</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/parserresult.html" class="tsd-kind-icon">ParserResult</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/point.html" class="tsd-kind-icon">Point</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/quadrilateral.html" class="tsd-kind-icon">Quadrilateral</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/searcharea.html" class="tsd-kind-icon">SearchArea</a> </li> <li class=" tsd-kind-variable tsd-is-not-exported"> <a href="globals.html#resizeobserver" class="tsd-kind-icon">ResizeObserver</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#configure" class="tsd-kind-icon">configure</a> </li> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-module">Module</li> <li class="tsd-kind-object-literal">Object literal</li> <li class="tsd-kind-variable">Variable</li> <li class="tsd-kind-function">Function</li> <li class="tsd-kind-function tsd-has-type-parameter">Function with type parameter</li> <li class="tsd-kind-index-signature">Index signature</li> <li class="tsd-kind-type-alias">Type alias</li> <li class="tsd-kind-type-alias tsd-has-type-parameter">Type alias with type parameter</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-enum">Enumeration</li> <li class="tsd-kind-enum-member">Enumeration member</li> <li class="tsd-kind-property tsd-parent-kind-enum">Property</li> <li class="tsd-kind-method tsd-parent-kind-enum">Method</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-interface">Interface</li> <li class="tsd-kind-interface tsd-has-type-parameter">Interface with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-interface">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-interface">Property</li> <li class="tsd-kind-method tsd-parent-kind-interface">Method</li> <li class="tsd-kind-index-signature tsd-parent-kind-interface">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-class">Class</li> <li class="tsd-kind-class tsd-has-type-parameter">Class with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-class">Property</li> <li class="tsd-kind-method tsd-parent-kind-class">Method</li> <li class="tsd-kind-accessor tsd-parent-kind-class">Accessor</li> <li class="tsd-kind-index-signature tsd-parent-kind-class">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited">Inherited constructor</li> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited">Inherited property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited">Inherited method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">Inherited accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected">Protected property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected">Protected method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected">Protected accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private">Private property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-private">Private method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private">Private accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-static">Static property</li> <li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static">Static method</li> </ul> </div> </div> </footer> <div class="container tsd-generator"> Generated using <a href="https://typedoc.org/" target="_blank">TypeDoc</a> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> <script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script> </body> </html>