@haseeamarathunga/face-detect

@haseeamarathunga/face-detect


Faces and Iris detection using web-cam

Features

* Webcam live view
* Face Detection
* Iris Detection
* Return Face image from capture
* Return Iris images from capture

Prerequisites

You must install ngx-webcam and ng-open-cv libraries.

$3

* Angular: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
* RxJs: ^5.0.0 || ^6.0.0
* App must be served on a secure context (https or localhost)

$3

* Current Browser w/ HTML5 and WebRTC/UserMedia support (Chrome >53, Safari >11, Firefox >38, Edge)
* Webcam :)
* User permissions to access the webcam

Usage

1) Install ngx-webcam library via standard npm command:

npm install --save ngx-webcam

2) Install ng-open-cv library via standard npm command:

npm install ng-open-cv

3) Install face-detect library via standard npm command:

npm install @haseeamarathunga/face-detect

2) Import the FaceDetectModule into your Angular module:

``typescript
import {FaceDetectModule} from '@haseeamarathunga/face-detect';
import {NgOpenCVModule, OpenCVOptions} from 'ng-open-cv';
import {WebcamModule} from 'ngx-webcam';
@NgModule({
imports: [
NgOpenCVModule,
WebcamModule,
FaceDetectModule,
...
],
...
})
export class AppModule { }
`

3) Use the FaceDetectComponent on your pages:

In .html file

`html
(imageCapture)="viewChange($event)">

Detect Face

`

In .ts file

`typescript
private trigger: Subject = new Subject();
public triggerSnapshot(): void {
this.trigger.next();
}

public get triggerObservable(): Observable {
return this.trigger.asObservable();
}

viewChange(event) {
console.log(event);
this.fullFace = event.fullImage;
this.face = event.face;
this.eyeRight = event.eyeRight;
this.eyeLeft = event.eyeLeft;
}
`


Options and Events

This section describes the basic inputs/outputs of the component. All inputs are optional.

$3

* triggerFace: Observable: An Observable to trigger image capturing. When it fires, an image will be captured and emitted (see Outputs).
* width: number: The maximal video width of the webcam live view.
* height: number: The maximal video height of the webcam live view. The actual view will be placed within these boundaries, respecting the aspect ratio of the video stream.

$3

* imageCapture: EventEmitter: Whenever an image is captured it return the event object that include fullImage, Face, eyeLeft and eyeRight.

`typescript
viewChange(event) {
console.log(event);
this.fullFace = event.fullImage;
this.face = event.face;
this.eyeRight = event.eyeRight;
this.eyeLeft = event.eyeLeft;
}
`

Development

Here you can find instructions on how to start developing this library.

$3

Run npm run packagr to build the library. The build artifacts will be stored in the dist/ directory.

$3

Run npm start to build and run the surrounding webapp with the FaceDetectModule. Essential for live-developing.

$3

Run npm run docs to generate the live-demo documentation pages in the docs/ directory.

$3

Run npm run test` to run unit-tests.