@trully/trully-image-reader-react NPM

TrullyImageReader

Componente pensado para ser integrado en procesos de reconocimiento de imágenes

Props

Key	Description
`isDev`	Boolean. Allows to handle dev and prod url
`apiKey`	String. Allows entering the client apiKey for each use case
`endpoint`	String. Allows to handle the endpoint for the different images analysis
`user_id`	String. Allows matching the endpoint calls with the user. This is done to easily access the process data when need it
`tag`	UUID String. One process could have several analysis. The tag is used to link every analysis to the same process.
	If it isn't receive by prop. One will be created.
`Shape`	ReactElement. Allows to control the shape for the type of image that the model would be analyzing
`forcePortrait`	Boolean. Allows to declare if the user will be able to use their mobile device on landscape position
`handleData`	Should be a callback function receiving an ImageResponse parameter. This parameter will hold the process result.
`handleError`	Should be a callback function receiving an ErrorResponse parameter. This parameter will hold an error object.
`forceFrontCameraForMobile`	Boolean (optional). Allows to declare which camera will be open for mobile devices. Default back
`isFront`	Boolean (optional). If the model needs to knows which side of image will receive. Default back
`timeout`	Number (optional). Allows to declare how many seconds will the user have to take the photo. Default 30
`styles`	Styles object (optional). Allows the user to personalize the component styles

Example

import "../../node_modules/@trully/trully-image-reader-react/dist/styles/styles.css";
import { CanvasComponent } from "./CanvasComponent";
import { TrueDeepfakeDetection } from "@trully/true-deepfake-detection";

export const LectorImagen = () => {
  return (
    <TrullyImageReader
      configuration={{
        endpoint: "ENDPOINT",
        Shape: <CanvasComponent />,
        isDev: true,
        apiKey: "API_KEY",
        user_id: "USER_ID",
        isFront: true,
        handleData(handleData) {
          console.log(handleData);
        },
        handleError(error) {
          console.log(error);
        },
        forcePortrait: true,
      }}
    />
  );
};

Types

Styles

Key	Description
`images`	Images object. Allows changing the default images
`colors`	Colors objet. Allows changing the default colors
`textsStyles`	TextsStyles object. Allows the default font and color font

Images object

Key	Default value
`rotate`	@trully/trully-helpers-react - DEFAULT_IMAGES.ROTATE

Colors object

Key	Default value
`icons`	@trully/trully-helpers-react - COLORS.DODGER_BLUE
`primary`	@trully/trully-helpers-react - COLORS.DODGER_BLUE
`background`	@trully/trully-helpers-react - COLORS.WHITE

TextsStyles object

Key	Default value
`fontFamily`	@trully/trully-helpers-react - DEFAULT_FONT
`individualFamily?`	@trully/trully-helpers-react - IndividualFamily type
`primaryTextColor`	@trully/trully-helpers-react - COLORS.SHARK

ImageResponse

The object returned through the handleData callback. It get its values from a combination of the back-end response and some values obtained during the front-end execution.

Key	Description
`tag`	String uuid. The one from props
`session_id`	String uuid. backData?.identifier?.session_id
`images`	Images object.
`hasBack`	backData?.instructions?.has_back
`docType`	backData?.attributes?.doc_type
`retake`	backData?.instructions?.retake
`retakeReasons?`	backData?.retake_reasons

images object

Key	Description
`image`	String base64. Cropped analyzed image
`image_full`	String base64. Full analyzed image

retakeReasons object

This values are all booleans. Here is a list of the available keys

Key
`cameraNotAllowed`
`constraintsError`
`unknownCameraOpeningError`
`timeout`
`processingImageError`

ErrorResponse

The object returned through the handleError callback. It get its values from a combination of the back-end response and some values obtained during the front-end execution.

Key	Description
`type`	String. One of ERROR_TYPE enum. Used to identify if it is a front-end or a back-end error
`reasons`	ERROR_REASONS object
`error`	ProcessError object

ERROR_REASONS object

The ERROR_REASONS object is a constant use to hold every possible error reason. Every one of the keys declared in it are set to false. To use it, create a new copy of it and change the necessary key value to true. This will mean that the jey holding the true value is the error reason. Every error will result in the process shutting down

Key	Description
`cameraNotAllowed`	The user didn't allow for the camera to be used
`constraintsError`	Webcam configuration didn't work
`unknownCameraOpeningError`	Webcam couldn't be open
`googleImageCaptureError`	ImageCapture error
`timeout`	User didn't take the picture before the timeout declare in props
`processingImageError`	Back-end model error.
`serverTimeout`	Fetch to back took longer than 2 minutes

ProcessError object

Key	Description
`process`	String. One of PROCESS_STEP enum. Used to identify where the error occur
`message`	String. One of ERROR_MESSAGE enum.
`user_id`	The user_id passed through props.
`timestamp`	UTC timezone. new Date().toUTCString().
`error`	Object. The error that triggered the handleError execution