@extrieve_technologies/quickcapture_react_native

v1.0.19

Published

13 days ago

A react native port for QuickCapture AI Document and Asset Scanning SDK with QR & BAR code Generation and scanning, image information reading, custom text stamping at the bottom of images, device and location information with DigiPin support, live monitor

0High
0Medium
0Low

extrieve_tech

react-native ios android

quickcapture_react_native

A React Native port of quickcapture for easy integration into mobile applications.

The Quickcapture plugin offers functionalities for capturing documents and assets, scanning optical codes (like QR codes and barcodes), building PDFs from captured images, and generating QR and barcode images from provided data, along with reading image information, stamping custom text at the bottom of images, device and location information with DigiPin support, live monitoring for VPN and developer mode, location spoofing security control, detailed security information, and screenshot and screen recording protection.

This document guides you through the installation and utilization of the Quickcapture plugin in your React Native application.

Support

JDK : 17 & NPM :18 React-native verison : 0.72+

Installation

Follow these steps to install the Quickcapture plugin using either npm or Yarn, depending on your preference:

Using npm

Add the Package:

npm install @extrieve_technologies/quickcapture_react_native

Link the Package: If you are using React Native 0.60 or above, autolinking will handle the rest. For iOS, you must run:
```
cd ios && pod  install && cd..
```
Rebuild Your Application:
Rebuild your application to ensure all native dependencies are properly linked. For iOS:
```
npx react-native run-ios
```
For Android:
```
npx react-native run-android
```

Using Yarn

Add the Package:

yarn add @extrieve_technologies/quickcapture_react_native

📋 Feature Support Matrix

| Feature | Android | iOS | |--------------------------------|----------|-----| | captureDocument | ✅ | ✅ | | buildPdfForLastCapture | ✅ | ✅ | | captureOpticalCode | ✅ | ✅ | | generateQRCode | ✅ | ✅ | | generateBarcode | ✅ | ✅ | | assetCapture | ✅ | ✅ | | readImageInfo | ✅ | ✅ | | setBottomStampData | ✅ | ✅ | | getDeviceDetails | ✅ | ✅ | | getLocationDetails | ✅ | ✅ | | getCurrentDigiPin | ✅ | ✅ | | getSecurityInfo | ✅ | ❌ | | enableScreenProtection | ✅ | ❌ | | disableScreenProtection | ✅ | ❌ | | startDeviceMonitoring | ✅ | ❌ | | stopDeviceMonitoring | ✅ | ❌ | | setCameraToggleEnabled | ✅ | ✅ | | setDefaultCameraMode | ✅ | ✅ | | setMaxPageLimit | ✅ | ✅ |

Usage

First, import the necessary modules and initialize quickcapture:

import {
	//If need to activate the SDK without restrictions - optional
	activateLicense,
	//TO initialise license - mandatory
	initialise,
	//For Document Capture,assetCapture capabilities, add following - optional
	captureDocument,
	assetCapture,
	buildPdfForLastDocumentCapture,
	//For Bar/QR Code capabilities, add following - optional
	captureOpticalCode,
	generateQRCode,
	generateBarcode,
	// Image & Stamp Utilities
	readImageInfo,
	setBottomStampData,
	// Device & Location
	getDeviceDetails,
	getLocationDetails,
	getDeviceSecurityInfo,
	getCurrentDigiPin,
	// Screen Protection & Monitoring
	enableScreenProtection,
	disableScreenProtection,
	startDeviceMonitoring,
	stopDeviceMonitoring,
	// Camera & Capture Controls
	setCameraToggleEnabled,
	setDefaultCameraMode,
	CameraToggleOption,
	setMaxPageLimit

} from  '@extrieve_technologies/quickcapture_react_native';

Initialising QuickCapture package in React Native

You should activate the license and initialise the plugin when your component loads. This can be done using useEffect.

useEffect(() => { 
	const initQuickCapture = async () => { 
		try { 
			// Activate license 
			const response = await activateLicense(androidLicense, iosLicense); 
			// response will be true/false depending on activation status 
			console.log('License activation status:', response); 
			// Initialise the plugin 
			initialise(); 
			} catch (error) { 
				console.error('QuickCapture initialisation failed:', error); 
			} 
		}; 
		initQuickCapture(); 
	}, []);

Explanation

useEffect with an empty dependency array ([]) ensures the code runs once when the component mounts.
activateLicense() activates the SDK license for Android and iOS.
After successful activation, initialise() prepares the plugin for use.
Using async/await makes the initialization flow easier to manage.

Important

The order of execution must be maintained.

activateLicense() must always be called before initialise().

If initialise() is executed before the license activation completes, the SDK may fail to start or behave unexpectedly.

captureDocument : To start capturing images, call captureDocument. This function returns a promise that resolves with the JSON string having an array of the captured images file path:
```
captureDocument().then((resultString) => {
	const result = JSON.parse(resultString);
})
.catch((error) => {
	console.error('Error starting capture:', error);
});
```
buildPdfForLastDocumentCapture : To build a PDF from the last capture set, use buildPdfForLastCapture. This function also returns a promise that resolves with the path to the generated PDF:
```
buildPdfForLastCapture().then(pdfFilePath  => {
	console.log(`Generated PDF path: ${pdfFilePath}`);
}).catch(error  => {
	console.error(`PDF generation error: ${error}`);
});
```

captureOpticalCode : To Captures an optical code (QR code or barcode) using the device camera.Will returns a promise that resolves to the scanned code data in JSON string

captureOpticalCode().then((resultString) => {
	//handle JSON data here.
	const  result = JSON.parse(resultString);
	console.log('Scanned code : ', result.DATA);
})
.catch((error) => {
	console.error('Error Scanning code:', error);
});

generateQRCode : Generates a QR code from provided data.Need to provide a data in string.in return, a promise that resolves data with Base64 data of the generated QR code image will get.

generateQRCode(qrText).then((base64String) => {
	// use barcode image in Base64 data format here.
	//image encoded and a PNG image in Base64 format
	//setBase64Image(base64String);
	Alert.alert('The QR code was generated successfully');
})
.catch((error) => {
	console.error('Error generating QR code:', error);
	Alert.alert('QR Generation Error', `Error: ${error.message}`);
});

generateBarcode : Generates a BAR code from provided data.Need to provide a data in string and also can specify if the BARcode with text needed.In return, a promise that resolves data with Base64 data of the generated BAR code image will get.

generateBarcode(qrText, enableText).then((base64String) => {
	// use barcode image in Base64 data format here.
	//image encoded and a PNG image in Base64 format
	//setBase64Image(base64String);
	Alert.alert('Barcode generated successfully.');
})
.catch((error) => {
	console.error('Error generating QR code:', error);
	Alert.alert('QR Generation Error', `Error: ${error.message}`);
});

assetCapture : To start capturing assets, call assetCapture. This function returns a promise that resolves with the JSON string having an array of the captured images file path:
```
assetCapture().then((resultString) => {
	const result = JSON.parse(resultString);
})
.catch((error) => {
	console.error('Error starting capture:', error);
});
```
readImageInfo : To retrieve metadata from an image file such as height, width, color type, and page count, call readImageInfo.
Supported image formats:
- TIFF
- JPEG / JPG
- PNG
- BMP
Usage
```
readImageInfo(FilePath).then((resultString) => {
	const result = JSON.parse(resultString);
})
.catch((error) => {
	console.error('Error reading image information:', error);
});
```
This function returns a promise that resolves to a JSON string :
Failure Response (Returned as String containing JSON)
```
{  "STATUS":  false,  "ERROR_MESSAGE":  "Reason for failure"  }
```
Success Response (Returned as String containing JSON)
```
{
	"FILESIZE":  146 KB,
	"TOTAL_PAGES":  1,
	"INFORMATION":  [
		{
			"PAGENO":  1,
			"WIDTH":  475,
			"HEIGHT":  307,
			"COLOR_TYPE":  "GREY"
		}
	]
}
```
Field Description
| Field | Description | | --------------- | -------------------------------------------------------- | | FILESIZE | Total size of the image file in KB | | TOTAL_PAGES | Number of pages (TIFF may contain multiple; JPG/PNG = 1) | | PAGE_NO | Current page number in the image | | WIDTH | Width of the image in pixels | | HEIGHT | Height of the image in pixels | | COLOR_TYPE | Image color type: COLOR, GREY, or BW |

setBottomStampData :To set a custom bottom stamp string to be added to the bottom of the image, call setBottomStampData.

// {DATETIME} - Placeholder that will be replaced with the current data and time from the device at the time of stamping
// $ - for new line print
String inputText = "{DATETIME} $ Extrieve Technology Private Limited $ Kolkata, India";
setBottomStampData(inputText);

Example

 let res: string = "{DATETIME} $ Extrieve Technology Private Limited";
   
// To set the location detail in the stamping
getLocationDetails().then((resultString) => {
  const result = JSON.parse(resultString)
  res += `$ Latitude: ${result.Latitude} , Longitude: ${result.Longitude}, $DigiPin: ${result.DigiPIN}`;
  setBottomStampData(res);
}).catch((error) => {
  console.error('Error getting location info:', error);
});

getDeviceDetails : To retrieve detailed device specifications, call getDeviceDetails.
```
getDeviceDetails().then((resultString) => {
	const result = JSON.parse(resultString)
}).catch((error) => {
	console.error('Error getting device info:', error);
});
```
This function returns a promise that resolves to a JSON string :
Response (Returned as String containing JSON)
```
{
	"manufacturer": "Xiaomi",
	"model": "M2101K6I",
	"os_release": "13",
	"sdk_int": 33,
	"cpu_hardware": "qcom",
	"ram_total_mb": 5569,
	"free_storage_gb": 6,
	"battery_pct": 73,
	"battery_is_charging": true,
	"screen_density_dpi": 440
}
```
The returned JSON contains basic device, OS, hardware, memory, storage, battery, and screen information
Note
- iOS limitation: Battery percentage reported on iOS may not always be fully precise due to system-level restrictions and optimizations imposed by the OS.
getLocationDetails : To retrieve location details, call getLocationDetails.
```
getLocationDetails().then((resultString) => {
	const result = JSON.parse(resultString)
	}).catch((error) => {
	console.error('Error getting location info:', error);
	});
```
This function returns a promise that resolves to a JSON string :
Response (Returned as String containing JSON)
```
{
	"DigiPIN": "2TF-J95-MTML",
	"Postal Code": "711106",
	"Latitude": 22.58301529,
	"Longitude": 88.34189296,
	"Accuracy (m)": 154.37572
}
```
The returned JSON contains the DigiPIN, postal code, latitude, longitude, and location accuracy in meters for the current device location.
getCurrentDigiPin :To retrieve the current DigiPIN string, call getCurrentDigiPin.
```
getCurrentDigiPin().then((digiPin) => {
	console.log(digiPin);
	}).catch((error) => {
	console.error('Error getting Digi Pin:', error);
	});	
```
This function returns a promise that resolves to a string that contains the current DigiPIN.
getSecurityInfo : To get the security level info, call getSecurityInfo.
```
getDeviceSecurityInfo().then((resultString) => {
  const result = JSON.parse(resultString)
}).catch((error) => {
  console.error('Error getting security info:', error);
});
```
This function returns a promise that resolves to a JSON string :
Response (Returned as String containing JSON)
```
{
	"isRooted": false,
	"isEmulator": false,
	"isDevOptionsEnabled": true,
	"isAdbEnabled": true,
	"isVpnActive": false,
	"isLocationSpoofed": false,
	"locationSpoofedMessage": "Authentic"
}
```
Field Description
| Field | Description | | --------------- | -------------------------------------------------------- | | isRooted | Indicates whether the device is rooted.| | isEmulator |Indicates whether the app is running on an emulator/simulator.| | isDevOptionsEnabled |Indicates whether developer options are enabled on the device.| | isAdbEnabled |: Indicates whether ADB (Android Debug Bridge) is enabled. | | isVpnActive | Indicates whether a VPN connection is currently active.| | isLocationSpoofed | Indicates whether the device location appears to be spoofed or mocked. | locationSpoofedMessage | message describing the location authenticity status like Mock Provider Detected and Authentic .
enableScreenProtection - To restrict the user to take screenshot and screen recording, call enableScreenProtection.
```
enableScreenProtection()
```
disableScreenProtection = To allow the user to take screenshots and screen recording, call disableScreenProtection.
```
disableScreenProtection()
```

startDeviceMonitoring -To start live device security monitoring, call startDeviceMonitoring.This function monitors the device for security-related events and emits them via a specified event name.You can then listen to these events in React Native using DeviceEventEmitter.

String eventName = 'DeviceGuardEvent'
startDeviceMonitoring('DeviceGuardEvent');

eventName: string – The name of the event that will be emitted for security notifications (e.g., 'DeviceGuardEvent').

Listening to Device Guard Events

import { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';

useEffect(() => {
const subscription = DeviceEventEmitter.addListener(
	'DeviceGuardEvent',
	(data: { threatType: string; message: string }) => {
	console.log('Security Threat \n' +  'Type: ' + data.threatType + '\n' + data.message);
	}
);

// Clean up the listener when the component unmounts
return () => {
	subscription.remove();
};
}, []);

Event Payload

Each event object emitted contains:

{
	threatType: string; // Type of security threat (e.g., VPN, DEV_MODE)
	message: string;    // Human-readable description of the event
}

stopDeviceMonitoring : To stop the device monitoring, call stopDeviceMonitoring.
```
stopDeviceMonitoring();
```
setCameraToggleEnabled : To configure the camera toggle behavior, use setCameraToggleEnabled.This allows you to control whether users can switch between cameras during capture.
```
setCameraToggleOption(true); 
```
Parameters
- CameraToggleBehaviour: boolean — The camera toggle behavior to set for the capture screen:
  - false - Disable camera toggle option.
  - true - Enable camera toggle option with Back camera set as default.
Notes
- This method must be called before starting the capture session for the setting to take effect.
- Once configured, the toggle behavior will remain the same for all subsequent capture sessions until changed again.
setDefaultCameraMode :To configure the default camera (front or back) when the capture screen is launched, use setDefaultCameraMode
```
setDefaultCameraMode(CameraToggleOption.FRONT_CAMERA);
```
Parameters
- DefaultCameraMode: CameraToggleOption - Specifies the camera mode to be set as default for the capture screen.
  - CameraToggleOption.FRONT_CAMERA -Starts the camera with the front camera as default.
  - CameraToggleOption.BACK_CAMERA - Starts the camera with the back camera as default.
Notes
- This method must be called before starting the capture session for the setting to take effect.
- Once configured, the selected camera mode will remain the default for all subsequent capture sessions until it is changed again.
setMaxPageLimit : To set the maximum page limit for capture, use setMaxPageLimit.
```
setMaxPageLimit(1)
```
Parameters
- maxPageLimit
  - Pass 0 for no limit.
  - Pass any positive integer to restrict the maximum number of pages that can be captured.
Notes
- This method must be called before starting the capture session for the setting to take effect.
- Once configured, the maxPageLimit will remain the same for all subsequent capture sessions unless changed again.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

quickcapture_react_native

Support

Installation

📋 Feature Support Matrix

Usage

This function returns a promise that resolves to a JSON string :

Failure Response (Returned as String containing JSON)

Success Response (Returned as String containing JSON)

Field Description

Example

This function returns a promise that resolves to a JSON string :

Response (Returned as String containing JSON)

This function returns a promise that resolves to a JSON string :

Response (Returned as String containing JSON)

This function returns a promise that resolves to a string that contains the current DigiPIN.

This function returns a promise that resolves to a JSON string :

Response (Returned as String containing JSON)

Field Description

Listening to Device Guard Events

Event Payload

Contributing

License