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

Release Notes was found in ["./RELEASENOTES.md"]

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)