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.

To install the package, use the following command:

npm i @jaak.ai/document-detector

• 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.

• 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.

<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>

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>

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;

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>

Detailed interface for configuring the DocumentDetectorComponent:

Interface detailing the result of a file operation:

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

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://jaak.ai