Vision SDK

React Native

# Overview

Barcode and QR Code scanner framework for support in react-native(can be used with both iOS and Android). VisionSDK provides a way to detect barcodes and qr codes. It also provides the functionality for information extraction from different kind of logistic labels like shipping labels, inventory labels, bill of ladings, receipts & invoices

# Installation

Install the SDK from your preferred package manager like npm, yarn, or pnpm

yarn add react-native-vision-sdk
npm install --save react-native-vision-sdk

# Permissions

To use the camera,

1. On Android you need to ask for camera permission:

         <uses-permission android:name="android.permission.CAMERA" />

      

2. On iOS, you need to update Info.plist with a usage description for camera

        <key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>

      

# IOS Development Requirements

• iOS 13.0+
• Swift: 5.4.2
• Xcode Version: 13.0

# Initialization

To use the OCR API, you must set the apiKey to your unique API key and specify the corresponding API environment. Ensure these configurations are made before making any API calls. You can generate your API key on our platform.

        import React, { useEffect, useRef } from 'react';
import VisionSdkView from 'react-native-vision-sdk';
const ScannerView = () => {
  const visionSdk = useRef(null);
  useEffect(() => {
    visionSdk?.current?.setHeight(1);
    visionSdk?.current?.startRunningHandler();
  }, []);
  return (
    <VisionSdkView
      refProp={visionSdk}
      mode="barcode"
      onBarcodeScan={(value) => console.log('BarCodeScanHandler', value)}
      onOCRScan={(value) => console.log('on OCR Detected', value)}
      onDetected={(value) => {
        console.log(
          'Detected Barcode =',
          value.nativeEvent ? value.nativeEvent.barCode : value.barcode
        );
        console.log(
          'Detected Text =',
          value.nativeEvent ? value.nativeEvent.text : value.text
        );
      }}
      onError={(e: any) => {
        console.log('error', e);
      }}
    />
  );
};

      

# Camera View Height

Set the camera view height

        // This is only required for IOS
visionSdk.current.setHeight(1); // value should be in between 0 to 1.

      

# Start Camera

Start the camera session and scanning.

        visionSdk.current.startRunningHandler();

      

# Close Camera

Stop the camera session and scanning.

        visionSdk.current.stopRunningHandler();

      

# Capture Image

You can capture an image when captureMode is manual.

        visionSdk.current.cameraCaptureHandler();

      

# Set Zoom Value

You can set the zoom values. Zoom value is device dependent. It will be vary between 1 to 5.

        visionSdk.current.setToDefaultZoom(1.8); 

      

# Toggle Torch

Toggle the torch ON/OFF.

        visionSdk.current.onPressToggleTorchHandler(true); //false for OFF

      

# Configure On-Device Model

Configure on-device model by passing model type and model size. Before calling configureOnDeviceModel you have to set isOnDeviceOCR prop with true.

        visionSdk.current.configureOnDeviceModel({ type: 'shipping_label', size: 'large' });

      

# Props

refProp
Set reference for vision sdk to manipulate modes or to access callback functions.

isOnDeviceOCR
This prop will work if the mode is ocr. OnDevice/Cloud is selected based on the value.

mode
The type of scan you would like to perform. Options include barCode, qrCode, and ocr

• barCode Detects only barcodes in this mode.
• qrCode - Detects qr codes only in this mode.
• ocr - Use this mode to capture photos for later user in the OCR call.

captureMode
Default captureMode in auto, you can either use ‘manual’

locationId
The PackageX location ID for this scan. If your API key is scoped to a location, you can find the location ID on the key.

environment
The PackageX environment that is being used. sandbox or production

showScanFrame You can use rectangle frame by setting it true, (Default value is false)

captureWithScanFrame
You can choose the capture area to be full screen or rectangular frame.

showDocumentBoundaries
To draw boundaries around detected document in camera stream. (Default value is false)

delayTime
Time threshold to wait before capturing a document automatically in OCR mode. (Default value is 100 milliseconds)

# API Key

In order to use the OCR API, you have to set API key. Also, you also need to specify the API environment that you have the API key for. Please note that these have to be set before using the API call. You can generate your own API key at cloud.packagex.io. You can find the instruction guide here.

# Mode Details

barCode - Detects barcodes only in this mode. qrCode - Detects qr codes only in this mode. ocr - Use this mode to capture photos for later user in OCR API call. photo - You can capture simple photos.

# The Response Object

In the callbacks, success or error response will be returned. It returns with the OCR Response from PackageX Platform API Response.

        onOCRScan: Return ocr detected data
onDetected: Return the detected data for ‘barcode’,'qrcode' and ‘text’
onBarcodeScan: Return the detected data for barcode in barcode mode
onModelDownloadProgress: Return the OCR model downloading status
onError: Description of the error, use it for debug purpose only
onImageCaptured: whenever image is capture in photo mode
ErrorCode: Description camera_unavailable camera not available on device
permission: Permission not satisfied
others: other errors (check errorMessage for description)