@xcelet/selfie-angular

Standalone Angular 18+ selfie-capture component powered by @xcelet/selfie-core and Google MediaPipe Face Landmarker.

Install

npm install @xcelet/selfie-angular \
  @xcelet/selfie-core \
  @mediapipe/tasks-vision

Import

import { Component } from '@angular/core';
import { SelfieCaptureComponent } from '@xcelet/selfie-angular';
import type { CapturedResult } from '@xcelet/selfie-core';

@Component({
  standalone: true,
  imports: [SelfieCaptureComponent],
  template: `
    <selfie-capture
      captureMode="smart"
      [autoCapture]="true"
      [countdown]="1"
      [quality]="85"
      [minSharpness]="3"
      outputType="blob"
      (captured)="onCaptured($event)">
    </selfie-capture>
  `
})
export class VerificationComponent {
  onCaptured(result: CapturedResult): void {
    const formData = new FormData();
    formData.append('selfie', result.blob, 'selfie.jpg');
  }
}

Camera access requires HTTPS or localhost. See the repository README for all inputs, outputs, capture modes, custom model hosting, the core API, and troubleshooting.