Integración con Angular

Aprenda cómo integrar la biblioteca tm-videoface-plus en su proyecto Angular creando un componente reutilizable para la funcionalidad de OCR, paso a paso.

---

Implementación Básica

Esta guía describe cómo configurar un componente en Angular para utilizar la biblioteca tm-videoface-plus. La integración incluye abrir la cámara, manejar eventos como movimientos y resultados, y gestionar errores.

import { Component, OnInit, OnDestroy } from '@angular/core';
import { VideoFace, CameraHelper, Envs, ChallengeMoves, ChallengeType, EventType } from 'tm-videoface-plus';

@Component({
    selector: 'app',
    template: `
      <div>
        <video [srcObject]="stream" autoplay playsinline></video>
        <button *ngIf="cameraPaused" (click)="resume()">Start Camera</button>
      </div>
    `
});
export class App implements OnInit, OnDestroy{
    mediaStream;
    videoface

    async ngOnInit(): void {
      const config = [
          { type: ChallengeType.CH_BLINK, enabled: true },
          { type: ChallengeType.CH_SMILE, enabled: true },
          { type: ChallengeType.CH_HEAD_POSE, enabled: true, moves: [ChallengeMoves.MV_HEAD_TURN_LEFT, ChallengeMoves.MV_HEAD_TURN_RIGHT] }
      ];
      this.videoface = new VideoFace('YOUR_KEY', Envs.DEV, config);
      this.mediaStream = await this.videoface.openCamera();  //Open camera
      this.pause();

      // Subscribe to events
      this.videoface.events(EventType.CONNECTED).subscribe((e) => {
        console.log('Connected');
      });

      this.videoface.events(EventType.MOVE).subscribe((move) => {
        // Handle move events e.g. ChallengeMoves.MV_HEAD_TURN_LEFT
        console.log('Move:', move);
      });

      this.videoface.events(EventType.RESULT).subscribe((result) => {
          console.log('Result:', result);
          this.stopCamera()
      });

      this.videoface.events(EventType.ERROR).subscribe(async (error) => {
          console.error('Error:', error);
       });

      await this.videoface.startStream(); //Start process
    }

    ngOnDestroy(): void {
        this.videoface.close();
    }

    pause(){
      this.mediaStream.getTracks().forEach((track) => {
        track.enabled = false;
      });
    }

    resume(){
      this.mediaStream.getTracks().forEach((track) => {
        track.enabled = true;
      });
    }

    stopCamera() {
      this.mediaStream.getTracks().forEach((track) => {
          track.stop();
      });
    }
}

---

Descripción del Flujo

1. Inicialización: Se configura el componente Angular para manejar la cámara y los eventos asociados a la detección de vivacidad.

2. Gestión de Eventos:

   • Eventos de Conexión: Confirma que la cámara y la biblioteca están listas para funcionar.
   • Eventos de Movimiento: Maneja los desafíos de movimientos como girar la cabeza hacia la izquierda o la derecha.
   • Resultados: Procesa y finaliza cuando se completa la detección de vivacidad.
   • Errores: Gestiona errores durante el proceso y los registra.

3. Gestión de la Cámara: Se proporciona control total sobre la cámara, con métodos para pausarla, reanudarla y detenerla una vez que el proceso ha terminado.

---