document-detector Component

The DocumentDetectorComponent is a web component built using StencilJs designed to handle video and image inputs for face detection purposes. It can operate in either video camera or file upload mode, depending on configuration.

Installation

To install the package, use the following command:

npm i @jaak.ai/document-detector

Properties

| Property | Type | Description | |-------------------------|---------------------|------------------------------------------------------| | config | ConfigComponent | Configuration for the face detector component. | | config.width | string | Width of the video element. Default: '500px'. | | config.height | string | Height of the video element. Default: '400px'. | | config.enableMicrophone | boolean | Indicates whether the microphone should be enabled. Default: false. | | config.mode | string | Operational mode, either 'video-camera' or 'upload-file'. Default: 'upload-file'. | | config.placeholder | string | Placeholder text for file input. | | config.buttonText | string | Text displayed on the upload button. | | config.documentAccept | string | Specifies the types of files that can be uploaded. | | config.description | string | Description displayed near the file input. | | config.size | number | Maximum file size allowed in kilobytes. Default: 5000. | | config.videoDuration | number | Duration for video recording in seconds. Default: 4. |

Events

• status: Fired when the component's status changes.
• componentError: Fired when an error occurs in the component.
• fileResult: Fired with the result of the file operation.

Methods

• switchMode(newMode: 'video-camera' | 'upload-file'): Switches the operational mode of the component.
• getMode(): Returns the current mode of the component.
• recordVideo(): Starts recording video based on the config.videoDuration.
• takeSnapshot(): Takes a snapshot using the video component.
• getVideoElement(): Returns the video element if available.
• getStream(): Returns the current video stream.

Usage Example

<document-detector
  config={{
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    mode: 'video-camera',
    placeholder: 'Upload your document',
    buttonText: 'Upload',
    documentAccept: 'image/*',
    description: 'Please upload an image file.',
    size: 2048
  }}
  onStatus={(event) => handleStatusChange(event.detail)}
  onComponentError={(event) => handleComponentError(event.detail)}
  onFileResult={(event) => handleFileResult(event.detail)}
></document-detector>

Usage in JavaScript

You can import a small bootstrap script to lazy load the component.

<script type="module" src="https://unpkg.com/@jaak.ai/document-detector"></script>

<document-detector></document-detector>

<script>
  const fileUploader = document.querySelector('document-detector');
  fileUploader.config = {
    width: '640px',
    height: '480px',
    enableMicrophone: true,
    mode: 'video-camera',
    placeholder: 'Upload your document',
    buttonText: 'Upload',
    documentAccept: 'image/*',
    description: 'Please upload an image file.',
    size: 2048
  };
</script>

Usage in React

To use as part of a React component, you can import the component directly via:

import '@jaak.ai/document-detector';

function App() {
  return (
    <>
      <div>
        <document-detector
          config={{
            width: '640px',
            height: '480px',
            enableMicrophone: true,
            mode: 'video-camera',
            placeholder: 'Upload your document',
            buttonText: 'Upload',
            documentAccept: 'image/*',
            description: 'Please upload an image file.',
            size: 2048
          }}
        ></document-detector>
      </div>
    </>
  );
}

export default App;

Usage in Angular

In Angular you additionally have to configure CUSTOM_ELEMENTS_SCHEMA in the module

schemas: [CUSTOM_ELEMENTS_SCHEMA]

Import to main.ts file

import '@jaak.ai/document-detector';

  <document-detector
    [config]="{
      width: '640px',
      height: '480px',
      enableMicrophone: true,
      mode: 'video-camera',
      placeholder: 'Upload your document',
      buttonText: 'Upload',
      documentAccept: 'image/*',
      description: 'Please upload an image file.',
      size: 2048
    }"
  ></document-detector>

ConfigComponent Interface

Detailed interface for configuring the DocumentDetectorComponent:

| Property | Type | Description | |-----------------|-----------|------------------------------------------------------------| | width | string | Width of the video element. Default: '500px'. | | height | string | Height of the video element. Default: '400px'. | | enableMicrophone | boolean | Indicates whether the microphone should be enabled. Default: false. | | mode | string | Operational mode, either 'video-camera' or 'upload-file'. | | placeholder | string | Placeholder text for file input. | | buttonText | string | Text displayed on the upload button. | | documentAccept| string | Specifies the types of files that can be uploaded. | | description | string | Description displayed near the file input. | | size | number | Maximum file size allowed in kilobytes. | | videoDuration | number | Duration for video recording in seconds. | | cameraSource | string | Specifies which camera to use for video capture when multiple sources are available, such as 'user' (front camera) or 'environment' (rear camera). This helps in selecting the appropriate camera based on the application's needs. | | videoFormat | string | Defines the preferred video resolution and frame rate format, such as '1920x1080@30' for 1080p video at 30 frames per second. This setting is used to configure the video output according to the capabilities of the media device and the requirements of the application. |

FileResult Interface

Interface detailing the result of a file operation:

| Property | Type | Description | |----------|----------|---------------------------------------------------------| | base64 | string | Base64 encoded string of the file content. | | type | string | MIME type of the file (optional). | | name | string | Original name of the file (optional). | | size | number | Size of the file in bytes (optional). |

StatusDocumentDetector Enum

This enum represents the various status states that the DocumentDetectorComponent can emit during its operation:

| Status | Description | |----------------|------------------------------------| | NOT_LOADED | Initial state before any operations have started. | | LOADING | The component is currently loading necessary resources. | | LOADED | All resources are loaded, and the component is ready to be used. | | RECORDING | The component is currently recording video. | | ERROR | An error has occurred in one of the processes. | | UPLOADING | The component is uploading a file. | | RUNNING | The component is actively processing. | | SNAPSHOTTING | The component is taking a snapshot. |

Aditional Info

This package needs library dependencies, if is necessary you can install manually dependencies using this command:

npm install @jaak.ai/video-camera @jaak.ai/document-detector

This component is designed, developed and owned by JAAK and is their intellectual property. Visit more details in https://docs.jaak.ai