@trully/trully-image-reader-react

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