ngx-scanner-face-mesh

ngx-scanner-face-mesh

This library is built to provide a solution for detecting and marking human faces.
This library analyzes each face and provides statistics for Angular web applications easily.
Demo on the stackblitz or github.

Installation

Install ngx-scanner-face-mesh from npm:

npm install ngx-scanner-face-mesh --save

Add wanted package to NgModule imports:

import { NgxScannerFaceMeshModule } from 'ngx-scanner-face-mesh';
@NgModule({
    imports: [
        NgxScannerFaceMeshModule,
    ]
})

In the Component:

<ngx-scanner-face-mesh #action="scanner" [isAuto]="true"></ngx-scanner-face-mesh>

<span>{{ action.data.value | json }}</span> <!-- value -->
<span>{{ action.data | async | json }}</span> <!-- async -->

For select files :syringe:

public faceResult: ScannerFaceResult[] = [];

constructor(private face: NgxScannerFaceMeshService) {}

public onSelects(files: any) {
    this.face.loadFiles(files, this.config).subscribe((res: any) => this.faceResult = res);
}

<input #file type="file" (change)="onSelects(file.files)" [accept]="'.jpg, .png, .gif, .jpeg'"/>

<div *ngFor="let item of faceResult">
    <img [src]="item.url || '' | safe: 'url'" [alt]="item.name"> <!-- Need bypassSecurityTrustUrl -->
</div>

API Documentation

Input :hammer_and_wrench:

Field	Description	Type	Default
[isAuto]	auto load	boolean	false
[src]	image url	string	-
[mesh]	options	Options	-
[config]	config all	ScannerFaceConfig	-
[style]	style for canvas	HtmlStyles	{width:'100%',height:'100%',background:''#000000''}
[frame]	style for canvas	CanvasRenderingContext2D	{color:'#0BF6F4',lineWidth:.5}
[medias]	media config	MediaStreamConstraints	{audio:false,video:{width:{ideal:1280},height:{ideal:720},facingMode:'environment'}}

Ouput :hammer_and_wrench:

Field	Description	Type	Default
(event)	data	any	-
(error)	error	any	-

Component export :hammer_and_wrench:

Field	Description	Type	Default
isLoading	status	boolean	false
isStart	status	boolean	false
isPause	status	boolean	false
data	data	BehaviorSubject	null
---	---	---	---
(start)	start camera	AsyncSubject	-
(stop)	stop camera	AsyncSubject	-
(download)	download with file name	AsyncSubject	-

Models

ScannerFaceConfig

interface ScannerFaceConfig {
  src?: string;
  isAuto?: boolean;
  isLoading?: boolean;
  mesh?: Options;
  frame?: HtmlStyles;
  style?: HtmlStyles;
  medias?: MediaStreamConstraints;
}

ScannerFaceResult

interface ScannerFaceResult {
  canvas?: HTMLCanvasElement;
  file?: File;
  name?: string;
  url?: string;
  blob?: any;
  base64?: string;
  result?: Results;
}

HtmlStyles

interface HtmlStyles {
  [key: string]: any;
}

Support versions

Support versions
Angular 14	1.0.8
Angular 6	1.0.7

Author Information

Author Information
Author	DaiDH
Phone	[phone]

MIT License. Copyright (c) 2021 DaiDH