Angular Integration

Learn how to integrate the tm-videoface-plus library into your Angular project by creating a reusable component for OCR functionality, step by step.

---

Basic Implementation

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();
      });
    }
}

---

Flow Description

1. Initialization: The Angular component is set up to manage the camera and events related to liveness detection.

2. Event Management:

   • Connection Events: Confirms that the camera and the library are ready to operate.
   • Move Events: Handles movement challenges such as turning the head to the left or right.
   • Results: Processes and concludes when the liveness detection is completed.
   • Errors: Manages errors during the process and logs them.

3. Camera Management: Provides full control over the camera with methods to pause, resume, and stop it once the process is finished.