npm - @jaak.ai/stamps - Versions diffs - 1.0.0-beta.1 - Mend

@jaak.ai/stamps 1.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (122) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,385 @@
+# @jaak.ai/stamps
+![Versión NPM](https://img.shields.io/npm/v/@jaak.ai/stamps)
+![Licencia](https://img.shields.io/npm/l/@jaak.ai/stamps)
+Un componente web potente y personalizable para la identificación de documentos en aplicaciones web modernas. Construido con Stencil.js para un escaneo e identificación de documentos confiable.
+## Características
+- Escaneo e identificación de documentos con alta precisión
+- Funciona tanto con cámara como con carga de imágenes
+- Interfaz y comportamiento personalizables
+- Eventos para una integración completa con el flujo de tu aplicación
+- Compatibilidad con múltiples navegadores
+- Paquete ligero
+## Instalación
+```bash
+npm install @jaak.ai/stamps
+```
+## Uso
+### Integración Básica
+#### HTML
+```html
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ejemplo de Detector de Documentos</title>
+  <script type="module" src="https://unpkg.com/@jaak.ai/stamps/dist/stamps/stamps.esm.js"></script>
+  <script nomodule src="https://unpkg.com/@jaak.ai/stamps/dist/stamps/stamps.js"></script>
+</head>
+<body>
+  <document-detector
+    license-key="TU_CLAVE_DE_LICENCIA"
+    engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
+    worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
+  </document-detector>
+  <script>
+    const detector = document.querySelector('document-detector');
+    detector.addEventListener('ready', (ev) => {
+      console.log('El detector de documentos está listo');
+    });
+    detector.addEventListener('scanSuccess', (ev) => {
+      console.log('Escaneo completado con éxito', ev.detail);
+    });
+    detector.addEventListener('scanError', (ev) => {
+      console.error('Error de escaneo', ev.detail);
+    });
+    detector.addEventListener('fatalError', (ev) => {
+      console.error('Error fatal', ev.detail);
+    });
+  </script>
+</body>
+</html>
+```
+#### Frameworks de JavaScript
+##### React
+```jsx
+import React, { useEffect, useRef } from 'react';
+import { defineCustomElements } from '@jaak.ai/stamps/loader';
+// Registrar los componentes web
+defineCustomElements();
+function ComponenteEscánerDocumento() {
+  const detectorRef = useRef(null);
+  useEffect(() => {
+    const detector = detectorRef.current;
+    const handleReady = (ev) => {
+      console.log('El detector de documentos está listo');
+    };
+    const handleScanSuccess = (ev) => {
+      console.log('Escaneo completado con éxito', ev.detail);
+    };
+    const handleScanError = (ev) => {
+      console.error('Error de escaneo', ev.detail);
+    };
+    const handleFatalError = (ev) => {
+      console.error('Error fatal', ev.detail);
+    };
+    detector.addEventListener('ready', handleReady);
+    detector.addEventListener('scanSuccess', handleScanSuccess);
+    detector.addEventListener('scanError', handleScanError);
+    detector.addEventListener('fatalError', handleFatalError);
+    return () => {
+      detector.removeEventListener('ready', handleReady);
+      detector.removeEventListener('scanSuccess', handleScanSuccess);
+      detector.removeEventListener('scanError', handleScanError);
+      detector.removeEventListener('fatalError', handleFatalError);
+    };
+  }, []);
+  return (
+    <document-detector
+      ref={detectorRef}
+      license-key="TU_CLAVE_DE_LICENCIA"
+      engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
+      worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
+    </document-detector>
+  );
+}
+export default ComponenteEscánerDocumento;
+```
+##### Vue.js
+```javascript
+// main.js
+import { defineCustomElements } from '@jaak.ai/stamps/loader';
+// Registrar los componentes web
+defineCustomElements();
+```
+```vue
+<!-- EscánerDocumento.vue -->
+<template>
+  <document-detector
+    ref="detector"
+    :license-key="licenseKey"
+    :engine-location="engineLocation"
+    :worker-location="workerLocation">
+  </document-detector>
+</template>
+<script>
+export default {
+  name: 'EscánerDocumento',
+  data() {
+    return {
+      licenseKey: 'TU_CLAVE_DE_LICENCIA',
+      engineLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0',
+      workerLocation: 'https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js'
+    };
+  },
+  mounted() {
+    const detector = this.$refs.detector;
+    detector.addEventListener('ready', this.handleReady);
+    detector.addEventListener('scanSuccess', this.handleScanSuccess);
+    detector.addEventListener('scanError', this.handleScanError);
+    detector.addEventListener('fatalError', this.handleFatalError);
+  },
+  beforeUnmount() {
+    const detector = this.$refs.detector;
+    detector.removeEventListener('ready', this.handleReady);
+    detector.removeEventListener('scanSuccess', this.handleScanSuccess);
+    detector.removeEventListener('scanError', this.handleScanError);
+    detector.removeEventListener('fatalError', this.handleFatalError);
+  },
+  methods: {
+    handleReady(ev) {
+      console.log('El detector de documentos está listo');
+    },
+    handleScanSuccess(ev) {
+      console.log('Escaneo completado con éxito', ev.detail);
+      this.$emit('scan-success', ev.detail);
+    },
+    handleScanError(ev) {
+      console.error('Error de escaneo', ev.detail);
+      this.$emit('scan-error', ev.detail);
+    },
+    handleFatalError(ev) {
+      console.error('Error fatal', ev.detail);
+      this.$emit('fatal-error', ev.detail);
+    }
+  }
+};
+</script>
+```
+##### Angular
+```typescript
+// app.module.ts
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+// Importar el cargador
+import { defineCustomElements } from '@jaak.ai/stamps/loader';
+// Registrar los componentes web
+defineCustomElements();
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA] // Necesario para usar componentes web
+})
+export class AppModule {}
+```
+```typescript
+// escaner-documento.component.ts
+import { Component, ElementRef, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+@Component({
+  selector: 'app-escaner-documento',
+  template: `
+    <document-detector
+      #detector
+      license-key="TU_CLAVE_DE_LICENCIA"
+      engine-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0"
+      worker-location="https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js">
+    </document-detector>
+  `
+})
+export class EscanerDocumentoComponent implements OnInit, OnDestroy {
+  @ViewChild('detector') detectorRef: ElementRef;
+  @Output() ready = new EventEmitter<any>();
+  @Output() scanSuccess = new EventEmitter<any>();
+  @Output() scanError = new EventEmitter<any>();
+  @Output() fatalError = new EventEmitter<any>();
+  ngOnInit() {}
+  ngAfterViewInit() {
+    const detector = this.detectorRef.nativeElement;
+    detector.addEventListener('ready', this.handleReady.bind(this));
+    detector.addEventListener('scanSuccess', this.handleScanSuccess.bind(this));
+    detector.addEventListener('scanError', this.handleScanError.bind(this));
+    detector.addEventListener('fatalError', this.handleFatalError.bind(this));
+  }
+  ngOnDestroy() {
+    const detector = this.detectorRef.nativeElement;
+    detector.removeEventListener('ready', this.handleReady.bind(this));
+    detector.removeEventListener('scanSuccess', this.handleScanSuccess.bind(this));
+    detector.removeEventListener('scanError', this.handleScanError.bind(this));
+    detector.removeEventListener('fatalError', this.handleFatalError.bind(this));
+  }
+  handleReady(ev) {
+    console.log('El detector de documentos está listo');
+    this.ready.emit(ev.detail);
+  }
+  handleScanSuccess(ev) {
+    console.log('Escaneo completado con éxito', ev.detail);
+    this.scanSuccess.emit(ev.detail);
+  }
+  handleScanError(ev) {
+    console.error('Error de escaneo', ev.detail);
+    this.scanError.emit(ev.detail);
+  }
+  handleFatalError(ev) {
+    console.error('Error fatal', ev.detail);
+    this.fatalError.emit(ev.detail);
+  }
+}
+```
+## Referencia de API
+### Propiedades
+| Propiedad               | Tipo                     | Valor por defecto                               | Descripción                                        |
+|-------------------------|--------------------------|------------------------------------------------|---------------------------------------------------|
+| `license-key`           | string                   | -                                              | **Requerido** Clave de licencia                    |
+| `engine-location`       | string                   | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0" | Ruta a los archivos del motor WASM  |
+| `worker-location`       | string                   | "https://storage.googleapis.com/jaak-storage/models/web/document-detector/v2.0.0/BlinkIDWasmSDK.worker.min.js" | Ruta al archivo worker |
+| `allow-hello-message`   | boolean                  | false                                          | Habilitar mensaje de Hello a la API                |
+| `wasm-type`             | string                   | "ADVANCE"                                      | Tipo de WASM a utilizar (ADVANCE, BASIC, etc.)     |
+| `blink-id-variant`      | string                   | "lightweight"                                  | Variante a utilizar                                |
+| `raw-recognizers`       | string                   | -                                              | String JSON de reconocedores                       |
+| `recognizers`           | array                    | ['BlinkIdMultiSideRecognizer']                 | Array de nombres de reconocedores a utilizar       |
+| `recognizer-options`    | object                   | *Ver abajo*                                    | Opciones de configuración para reconocedores       |
+| `recognition-timeout`   | number                   | -                                              | Tiempo límite para reconocimiento en milisegundos  |
+| `recognition-pause-timeout` | number               | 3800                                           | Tiempo de pausa entre reconocimientos              |
+| `enable-drag`           | boolean                  | false                                          | Permitir arrastrar y soltar imágenes               |
+| `hide-feedback`         | boolean                  | true                                           | Ocultar mensajes de retroalimentación              |
+| `hide-loading-and-error-ui` | boolean              | false                                          | Ocultar elementos UI de carga y error              |
+| `scan-from-camera`      | boolean                  | true                                           | Permitir escaneo desde cámara                      |
+| `scan-from-image`       | boolean                  | false                                          | Permitir escaneo desde carga de imagen             |
+| `thorough-scan-from-image` | boolean               | false                                          | Realizar escaneo exhaustivo para imágenes          |
+| `gallery-overlay-type`  | "FULLSCREEN" \| "INLINE" | "INLINE"                                       | Tipo de visualización del overlay de galería       |
+| `gallery-drop-type`     | "FULLSCREEN" \| "INLINE" | "INLINE"                                       | Tipo de visualización del área de drop de galería  |
+| `show-action-labels`    | boolean                  | false                                          | Mostrar etiquetas de texto para acciones           |
+| `show-modal-windows`    | boolean                  | false                                          | Mostrar ventanas modales para mensajes             |
+| `show-scanning-line`    | boolean                  | -                                              | Mostrar animación de línea de escaneo              |
+Opciones por defecto del reconocedor:
+```javascript
+{
+  BlinkIdMultiSideRecognizer: {
+    returnEncodedFullDocumentImage: true,
+    returnEncodedFaceImage: true,
+    returnEncodedSignatureImage: true,
+    fullDocumentImageExtensionFactors: {
+      upFactor: 0.1,
+      downFactor: 0.1,
+      leftFactor: 0.1,
+      rightFactor: 0.1
+    },
+    fullDocumentImageDpi: 300
+  }
+}
+```
+### Eventos
+| Nombre del Evento    | Descripción                                      | Detalle del Evento                              |
+|----------------------|--------------------------------------------------|--------------------------------------------------|
+| `ready`              | Emitido cuando el componente está listo para escanear | Objeto `EventReady` con instancia del SDK       |
+| `scanSuccess`        | Emitido al escanear un documento con éxito       | Objeto `EventScanSuccess` con resultados del escaneo |
+| `scanError`          | Emitido cuando ocurre un error durante el escaneo | Objeto `EventScanError` con detalles del error   |
+| `fatalError`         | Emitido cuando ocurre un error fatal             | Objeto `SDKError` con detalles del error         |
+| `cameraScanStarted`  | Emitido cuando comienza el escaneo con cámara    | null                                             |
+| `imageScanStarted`   | Emitido cuando comienza el escaneo de imagen     | null                                             |
+### Métodos
+| Método                  | Parámetros                                    | Tipo de Retorno      | Descripción                                |
+|-------------------------|-----------------------------------------------|----------------------|--------------------------------------------|
+| `setUiState`            | state: "ERROR" \| "LOADING" \| "NONE" \| "SUCCESS" | Promise<any>         | Establecer el estado UI del componente      |
+| `setUiMessage`          | state: "FEEDBACK_ERROR" \| "FEEDBACK_INFO" \| "FEEDBACK_OK", message: string | Promise<any> | Establecer un mensaje UI |
+| `getProductIntegrationInfo` | Ninguno                                   | Promise<ProductIntegrationInfo> | Obtener información de integración del producto |
+## Tipos de Objetos de Eventos
+### EventReady
+```typescript
+{
+  sdk: WasmSDK; // Instancia del SDK
+}
+```
+### EventScanSuccess
+```typescript
+{
+  recognizer: string; // Nombre del reconocedor que produjo el resultado
+  recognizerResult: any; // El objeto resultado del reconocedor
+  resultDocument: any; // Datos del documento procesado
+  resultImages: any; // Imágenes resultantes (documento, cara, etc.)
+}
+```
+### EventScanError
+```typescript
+{
+  code: Code; // Código de error
+  fatal: boolean; // Si el error es fatal
+  message: string; // Mensaje de error
+  recognizerName: string; // Nombre del reconocedor que produjo el error
+  details?: any; // Detalles adicionales del error si están disponibles
+}
+```
+## Licencia
+MIT