Scandit Barcode Scanner SDK for the Web - React Component

React component for the Scandit WebSDK.

Enterprise barcode scanning performance in your browser via JavaScript and WebAssembly.

Made by Scandit

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.

To use this library you must possess a valid Scandit account and license key. You can register for a free trial here.

Table of Contents:

• React project integration
  • Install the Scandit WebSDK
  • Add the component to your project
  • Use the component in your project
• Documentation
• Breaking changes
  • v4.x
• Support
• License
• React component development
  • Installation
  • Demo Development Server
  • Building

React project integration

Install the Scandit WebSDK

Run npm install scandit-sdk --save to install the WebSDK library and save it to your dependencies.

Add the component to your project

In the component where you want to use it, add the ScanditBarcodeScanner component to your app:

• import the needed parts:

  import ScanditBarcodeScanner from "scandit-sdk-react";

• import optional parts from the main Scandit WebSDK if needed:

  import {
    Barcode,
    BarcodePicker,
    Camera,
    CameraAccess,
    CameraSettings,
    ScanSettings,
    SingleImageModeSettings,
  } from "scandit-sdk";

Use the component in your project

Add the component to your render function:

<ScanditBarcodeScanner
  // Library licensing & configuration options (see https://docs.scandit.com/stable/web/globals.html#configure)
  licenseKey={this.licenseKey}
  engineLocation="https://cdn.jsdelivr.net/npm/[email protected]/build" // could also be a local folder, e.g. "build"
  // Picker events
  onReady={() => this.setState({ scannerReady: true })}
  onScan={console.log}
  onScanError={console.log}
  // Picker options
  scanSettings={this.getScanSettings()}
/>

For the above example you also need in your component the following (example), to retrieve the scan settings:

getScanSettings = () => {
  return new ScanSettings({ enabledSymbologies: [Barcode.Symbology.CODE128] });
};

For a fully customized picker, see the example below:

<ScanditBarcodeScanner
  licenseKey={this.licenseKey}
  engineLocation="https://cdn.jsdelivr.net/npm/[email protected]/build"
  preloadBlurryRecognition={true}
  preloadEngine={true}
  onReady={console.log}
  onScan={console.log}
  onScanError={console.log}
  onSubmitFrame={console.log}
  onProcessFrame={console.log}
  scanSettings={this.getScanSettings()}
  paused={false}
  /*️
    ⚠️ Make sure to keep accessCamera and paused synchronized in a sensible way, as resuming scanning accesses
    the camera, so your state might become outdated.
    For example, set accessCamera to true whenever scanning is resumed.
  */
  accessCamera={true}
  camera={undefined}
  cameraSettings={undefined}
  enableCameraSwitcher={true}
  enablePinchToZoom={true}
  enableTapToFocus={true}
  enableTorchToggle={true}
  guiStyle={BarcodePicker.GuiStyle.LASER}
  laserArea={{ x: 0, y: 0, width: 1, height: 1 }}
  playSoundOnScan={true}
  targetScanningFPS={30}
  vibrateOnScan={true}
  videoFit={BarcodePicker.ObjectFit.CONTAIN}
  visible={true}
  viewfinderArea={{ x: 0, y: 0, width: 1, height: 1 }}
  zoom={0}
  // only set on component creation, can not be changed afterwards
  cameraType={Camera.Type.BACK}
  singleImageModeSettings={this.getSingleImageModeSettings()}
/>

For the above example you also need in your component the following (example), to retrieve the single image mode settings:

getSingleImageModeSettings = () => {
  return {
    desktop: {
      usageStrategy: SingleImageModeSettings.UsageStrategy.FALLBACK,
    },
    mobile: {
      usageStrategy: SingleImageModeSettings.UsageStrategy.FALLBACK,
    },
  };
};

Documentation

This component has been made to follow the BarcodePicker creation parameters and methods available in the main Scandit WebSDK library. In addition to that it also integrates the parameters for its configuration. Please refer to the demo application code, WebSDK BarcodePicker documentation and WebSDK configuration documentation for available options and details.

Breaking changes

v4.x

• The component's singleImageMode attribute is now replaced by singleImageModeSettings, accepting a newly structured settings object.
• The component's onScannerInitialized and scanner attributes are not available anymore, optimal performance regarding reuse of internal parts is now automatically handled by the library as part of the component's lifecycle.

Support

For questions or support please use the form you can find here or send us an email to [email protected].

License

This project is licensed under the Apache License, Version 2.0.

React component development

In case you want to work and modify the component itself.

Installation

• Running npm install in the component's root directory will install everything you need for development.

Demo Development Server

• npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading.

Building

• npm run build will build the component and also bundle the demo app.
• npm run clean will delete built resources.