Ionic Quick Start Guide

Get started with FacePing's face recognition API using Ionic

Prerequisites

A FacePing API key
Ionic CLI installed
Basic knowledge of Angular

Installation

Create a new Ionic project:

ionic start faceping-demo blank --type=angular
cd faceping-demo
npm install @capacitor/camera
ionic serve

Step 1: Create Face Group Component

Create src/app/face-group/face-group.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-face-group',
  templateUrl: './face-group.component.html',
  styleUrls: ['./face-group.component.scss']
})
export class FaceGroupComponent {
  groupName = '';
  status = '';

  async createGroup() {
    try {
      const response = await fetch(
        `https://api.faceping.ai/groups/${this.groupName}`,
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          }
        }
      );
      
      if (response.ok) {
        this.status = 'Group created successfully';
      } else {
        throw new Error('Failed to create group');
      }
    } catch (error) {
      this.status = 'Error creating group';
    }
  }
}

Create src/app/face-group/face-group.component.html:

<div class="container">
  <div class="form-group">
    <input type="text" [(ngModel)]="groupName" placeholder="Enter group name">
    <button (click)="createGroup()">Create Group</button>
  </div>
  <div *ngIf="status" class="status">{{ status }}</div>
</div>

Step 2: Create Face Upload Component

Create src/app/face-upload/face-upload.component.ts:

import { Component } from '@angular/core';
import { Camera, CameraResultType } from '@capacitor/camera';

@Component({
  selector: 'app-face-upload',
  templateUrl: './face-upload.component.html',
  styleUrls: ['./face-upload.component.scss']
})
export class FaceUploadComponent {
  photo: string | undefined;
  status = '';

  async takePicture() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Base64
    });
    
    this.photo = `data:image/jpeg;base64,${image.base64String}`;
  }

  async uploadFace() {
    if (!this.photo) return;

    try {
      const formData = new FormData();
      const blob = this.dataURItoBlob(this.photo);
      formData.append('image', blob, 'image.jpg');

      const response = await fetch(
        'https://api.faceping.ai/groups/my-group/faces',
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          },
          body: formData
        }
      );
      
      if (response.ok) {
        this.status = 'Face uploaded successfully';
      } else {
        throw new Error('Failed to upload face');
      }
    } catch (error) {
      this.status = 'Error uploading face';
    }
  }

  private dataURItoBlob(dataURI: string): Blob {
    const byteString = atob(dataURI.split(',')[1]);
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    
    return new Blob([ab], { type: 'image/jpeg' });
  }
}

Create src/app/face-upload/face-upload.component.html:

<div class="container">
  <div class="buttons">
    <button (click)="takePicture()">Take Picture</button>
  </div>

  <img *ngIf="photo" [src]="photo" class="preview">

  <div class="buttons">
    <button (click)="uploadFace()" [disabled]="!photo">Upload Face</button>
  </div>

  <div *ngIf="status" class="status">{{ status }}</div>
</div>

Step 3: Create Face Search Component

Create src/app/face-search/face-search.component.ts:

import { Component } from '@angular/core';
import { Camera, CameraResultType } from '@capacitor/camera';

interface MatchResult {
  score: number;
}

@Component({
  selector: 'app-face-search',
  templateUrl: './face-search.component.html',
  styleUrls: ['./face-search.component.scss']
})
export class FaceSearchComponent {
  photo: string | undefined;
  status = '';
  matches: MatchResult[] = [];

  async takePicture() {
    const image = await Camera.getPhoto({
      quality: 90,
      allowEditing: true,
      resultType: CameraResultType.Base64
    });
    
    this.photo = `data:image/jpeg;base64,${image.base64String}`;
  }

  async searchFaces() {
    if (!this.photo) return;

    try {
      const formData = new FormData();
      const blob = this.dataURItoBlob(this.photo);
      formData.append('image', blob, 'image.jpg');

      const response = await fetch(
        'https://api.faceping.ai/groups/my-group/search',
        {
          method: 'POST',
          headers: {
            'Authorization': 'Bearer your_api_key_here'
          },
          body: formData
        }
      );
      
      const data = await response.json();
      this.matches = data.matches || [];
      this.status = `Found ${this.matches.length} matches`;
    } catch (error) {
      this.status = 'Error searching faces';
      this.matches = [];
    }
  }

  private dataURItoBlob(dataURI: string): Blob {
    const byteString = atob(dataURI.split(',')[1]);
    const ab = new ArrayBuffer(byteString.length);
    const ia = new Uint8Array(ab);
    
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    }
    
    return new Blob([ab], { type: 'image/jpeg' });
  }
}

Create src/app/face-search/face-search.component.html:

<div class="container">
  <div class="buttons">
    <button (click)="takePicture()">Take Picture</button>
  </div>

  <img *ngIf="photo" [src]="photo" class="preview">

  <div class="buttons">
    <button (click)="searchFaces()" [disabled]="!photo">Search Faces</button>
  </div>

  <div *ngIf="status" class="status">{{ status }}</div>

  <div *ngIf="matches.length" class="matches">
    <div *ngFor="let match of matches" class="match-item">
      Match Score: {{ match.score }}
    </div>
  </div>
</div>

Security Notes

Images are immediately discarded after vector conversion
Face vectors cannot be reverse-engineered into images
Always use HTTPS for all API calls
Store your API keys securely in environment variables