SCANFLOW_WEB_SDK

This library is used to support the developers in order to perform the scanning of the ID's, QRCodes and get the data to be displayed on their website with ease.

Installation:

To install the Scanflow WebSDK package into your project use the below installation command from your command prompt.The npm package is available globally on the website https://www.npmjs.com/package/scanflow_websdk

  Installation Command - npm install scanflow_websdk (Latest Version 1.1.19)

  Demo Code Repository - [https://github.com/Scanflow-ai/scanflow-websdk-samples](https://github.com/Scanflow-ai/scanflow-websdk-samples)

  WebSDK Demo App - [https://demo.scanflow.ai](https://demo.scanflow.ai)

Prerequisite:

Hardware Requirements:

    Recommended Camera - Full HD (1080p) or above resolution Web Camera for capturing the ID Card to get accurate results. 
    Recommended CPU - 2.0GHz or more

Software Requirements:

    Recommended Browsers:
        Chrome Version - 106.0.5249.119 and +
        Firefox Version -  104.0.2 and  + 
        Opera Version  -  91.0.4516.20 and  +
        Safari Version -  15.6 and  +
        Edge -  106.0.1370.34 and +

Other Requirements:

    Scanflow License Key - It is an important key to make the package work and 	get the results of the ID Card data.

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:
• Depending on your use case, it might be worth to enable Full HD or Ultra HD video quality, resulting in slower frame processing times but higher resolution recognition. The accuracy of output will be very high.
• The ID card holding distance can be < a feet to get the better accuracy.
• The first Single Image Mode scan might be slower than subsequent ones depending on the network condition as the Scanflow Data Capture Library has to first verify the license key online before proceeding to capture data through inbuilt camera.

Usage

Configuration

• For optimal performance, this configuration/initialization should be done as soon as possible in your application (even before scanning is actually required) to ensure needed components are preloaded and initialized ahead of time. It takes two parameters which are mandatory as follows:

  License Key : License Key which is generated by scanflow support team.
  
  Domain Name : Users domain name while generating the license key.

• The configuration function needs to be initialized as follows and it returns a promise.

  Example

        import * as ScanflowSDK from 'scanflow_websdk';
        ScanflowSDK.configureSDK('USE YOUR LICENSE KEY HERE','YOUR DOMAIN ID HERE') //important
          .then((res) => {
            const rootElement = document.getElementById("camera_view");
            const configuration = {
              captureMode: "auto", //available modes 'auto','manual'
            };
            const rootElement = document.getElementById("camera_view");
            const captureObj = new ScanflowSDK.CaptureView(
              rootElement,
              configuration
            );
            captureObj.getMediaDevices().then((res) => {
              console.log(res) //returns all the available media devices
            });
          })
          .catch((err) => {
            console.log(err);
          });

• The first required configuration option is a valid Scanflow license key - this is necessary for the library to work and is verified at configuration time. In order to get your license key, please contact scanflow support team.

• The “configureSDK” method needs to be imported from the package as given below and the user needs to use the valid license key in order to make the package work and get the scanned results of the ID Card (Aadhar Card). This step is an important part in the package, without the valid key the package will throw ‘Invalid License Key Error’

• On successful configuration of the package with the license key, then the user needs to create a class for the capture view as shown in the above snippet and pass the root element eg: DIV ELEMENT ID () with an optional configuration for facing mode and capture element width. It displays a camera view with a button to capture image to render view on the screen with the capture element.

• Note: This step is important and without a valid license key you can’t initialize the capture view.

• Once the card is fit with the frame and then the user needs to click the Start Capture button to capture the image and then SDK process it and once on successful process the user needs to show the back side of the card which needs to be fit on the frame , then user can wait for processing by SDK and the result is emitted by the emitter(getData).

• To listen to the emitter the user needs to create object for IDCapture Class then call addListener method which returns the emitter and then user needs to listen on getData emitter which returns data processed.

  Example

  const eventEmitter = new ScanflowSDK.IDCapture().addListener();
      eventEmitter.on("getData", (data) => {
        //User Will get Processed Data
        console.log(data)
      });

• If the card is misplaced or not clear or does not fit in the frame there will be an error emitted from the SDK which the developer can customize the error and populate to end user.

  Example

  const eventEmitter = new ScanflowSDK.IDCapture().addListener();
  eventEmitter.on("scan_error", (error) => {
   // This event emits the data processed by SDK.
    alert(error)
  });

• The mode of capture is by default is listed as auto and the user can change the mode to manual mode if the user wants to change the mode of capture. This can be done by following the snippet given below.

  Example

  const modes = new ScanflowSDK.IDCapture().getcaptureModeData(); //Return available modes
  const changeCaptureMode = (event) => {
  const modeOfCapture = event.target.checked ? modes[0] : modes[1];
  setCaptureMode(modeOfCapture);
  setChecked(event.target.checked);
  const constraints = {
    deviceId: deviceId,
  };
  const configuration = {
    licenseKey,
    captureMode: modeOfCapture,
  };
  console.log(configuration);
  const rootElement = document.getElementById("camera_view");
  new ScanflowSDK.CaptureView(rootElement, configuration, constraints);
  };

• The user can also change the card type for capturing multiple ID Cards [Currently available cards are aadhar card and pan card] captures.By default the package will start with capturing aadhar card in the auto mode. This can be modified by following the snippet below

  Example

  let cardType = '';
  const cardsList = new ScanflowSDK.IDCapture().getCardTypes(); //Return available card types
  //needs to set cardsLIst in the select or radio element to change the value
  const changeCardType = (event) => {
     event.preventDefault();
     cardType = event.target.value
  }
  const configuration = {
      licenseKey,
      captureMode: "auto",
      cardType:cardType,
      };
  const rootElement = document.getElementById("camera_view");
  new ScanflowSDK.CaptureView(rootElement, configuration, constraints);
  }

• The result model for the scanned card will be available in the interfaces for all scanned cards data by the package. This data will be emitted by getData emitterCurrently available model for the below cards

  Aadhar Card - Interface with Aadhar card Details
  
  Pan Card - Interface with Pan Card Result Details

• Demo code will be available in the following repository for both angular integration and react integration.

  • Demo Code Repository https://github.com/Scanflow-ai/scanflow-websdk-samples

Release Notes

1.1.20 (Latest):-

    1. Added YOB - YOB was added in Aadhar Card to get the data if it is present.
    2. Sonar Fixes - Sonar bugs was fixed and checked for the security features and code fixes.
    3. Test Cases - New Test cases were added to ensure correct workflow in the app.

1.1.19 :-

    1. Barcode Scanning (Beta) - Barcode scanning was created and it is in the testing process to make the package to scan barcodes without much efforts.
    2. Performance Fixes - Performance of the app was improved by adding maximum API call requests to scan the card.

1.1.18 :-

    1. PAN Card Scanning (Manual) - Pan Card Scanning was added in the app and it is in testing process to scan PAN Cards in manual mode.
    2. Data Repeatition Fixes - Fixed the data repetition in PAN Card Scanning and tested.

1.1.17 :-

    1. PAN Card Scanning (Auto) -  Pan Card Scanning was added in the app and it is in testing process to scan PAN Cards with auto mode.
    2. Capture Image Fixes - On single click on start capture multiple calls has been made and it is fixed and tested.

1.1.16:

    1.Card Type Initialization- PAN Card was initialized to perform pan card scanning through package.
    2.Pan Card Result Model- PAN card result model was initialized and checked.

1.1.15

    1. Cropping Issue - The cropping issue was fixed and tested to crop the correct image shown on canvas.
    2. Unit Tests Added - Unit test cases was added to the new codes and the code coverage was checked to ensure the results are delivered as expected.

1.1.14

    1.Bouncing text Added- Added bouncing text for error and bug fixes in manual capture mode.
    2.Automatic Capture Fixes- Bug fixes and Improvements made on Automatic capture mode.
    3.Error Emitter Added- Added error emitter for any errors in auto   capture mode to emit any error from the package.

1.1.13:

    1.Mode of Capture is Added- Uses two modes for Capture of ID Card [auto, manual] mode.
    2.Fixed issues on automatic capture- On capturing back side it moves to front without clearing the data and it is fixed.
    3.User ID Card Interface Fixes- Added clear user data and fixes on data model for the captured image on the manual capture mode.

1.1.12:

    1.Fixed issues on sound- On successful capture of front side in automatic capture mode sound is not played and it is fixed.
    2.License Key Improvements- Licensing feature is improved in order to restrict permissions for unauthorized user than authorized user in order to prevent the unauthorized access
    3.Loader Added- Loader is added for initial camera access and the error message is displayed for invalid license key and camera access denied errors.

1.1.11:

    1.Canvas Fixes- Canvas Context was fixed with the change in configuration settings for overlay and tested.
    2.Utility for Audio Class- Added Audio Utility class for playing audio on successful capture on the capture and completion of capturing process.

1.1.10:

    1.Event Emitter Fixes- Event emitter has an issue on emitting data and it has been fixed.
    2.Canvas Fixes- Canvas Context was fixed with the change in configuration settings for overlay and tested.
    3.Capture View Changes- CaptureView class a public exportable class is added with the configuration and constraints parameters for the configuration of the overlay element and constraints for the camera class initialization to start the capture and process of the image data from the WebSDK to the user.

1.1.9:

    1.License Key Added- Licensing is the important aspect and it is added to prevent unauthorized access of the WebSDK.
    2.Config Class Added- Added default configuration for the overlay height width and overlay height for the overlay capture element.

1.1.8:

    1.Event Emitter Added- Event Emitter is created and added to emit data processed by the WebSDK to the user of the package.
    2.ID Capture Class Added-IDCapture class a public exportable class is created in order to get the event emitter and by listening on the event emitter user will get processed results with ease.

1.1.7:

    1.Browser Compatibility Checks- Browser Compatibility checks was revised and more checks were added and this helps the application to run without any changes on correct browser.
    2.Camera Fixes-Bugs seen in the initialization of the camera has been fixed and verified.

1.1.6 and Below:

    1.Camera Class Added: Camera class which is used for starting of the camera. As it is most important for the capture and process of the data has been added and initialized in this class.
    2.Browser Compatibility Checks: Browser compatibility checks was added and this is to ensure correct browser is used for the capture of the data and further process.
    3.GUI Class: GUI class is added to setup and display the video element on the browser with the camera stream if user is allowed to access camera. Some styles have been applied in order to make the action done.

Tech

- [Node v14.17.1](http://nodejs.org/)
- [Axios](https://www.npmjs.com/package/axios)
- [ESLint](https://www.npmjs.com/package/eslint) + [Prettier](https://www.npmjs.com/package/prettier)