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 |