@jaak.ai/document-detector v1.2.0

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

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:

FileResult Interface

Interface detailing the result of a file operation:

StatusDocumentDetector Enum

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

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