Fedo Face Alignment

This package provides a custom Web Component called fedo-face-alignment, designed to detect the device orientation and display a UI element that shows eyes and nose markers to help align a face properly.

Features

• UI Element for Face Alignment: Displays a visual marker that consists of an image showing the positions for eyes and nose.
• Device Orientation Support: Detects device orientation and updates the face alignment marker based on the tilt of the device.
  • Displays a neutral marker when orientation cannot be determined.
  • Shows a good alignment marker when the device is within the correct range.
  • Shows an error marker when the device is tilted too far.

Installation

To install the package, you can use npm:

npm install fedo-face-alignment

To import the package in your application:

import 'fedo-face-alignment';

Usage:

<fedo-face-alignment></fedo-face-alignment>

To access gyroscope feature:

async function requestOrientation() {

    try {
        await DeviceOrientationEvent.requestPermission();
    }

    catch (e) {
        console.error(e);
    }

}