auraehealth-facescan

v1.0.13

Published

10 months ago

Face scanning package

0High
0Medium
0Low

anafariya

face scan health analysis mediapipe face-mesh ppg vital-signs blink-detection

🔍 AuraeHealth FaceScan

Advanced Facial Analysis for Health Metrics

📋 Overview

AuraeHealth FaceScan is a powerful, browser-based facial analysis tool that uses advanced computer vision techniques to extract health metrics from facial video. Using MediaPipe's face mesh technology, this package provides a complete solution for capturing, analyzing, and processing facial data for health assessment applications.

✨ Features

Real-time Face Mesh Analysis: Leverages MediaPipe's face mesh for precise facial landmark detection
Remote PPG Analysis: Extracts pulse signals from facial regions for contactless vitals monitoring
Blink Detection: Advanced algorithms for accurate eye blink detection
User-friendly UI: Intuitive interface with real-time progress indicators
Responsive Design: Works across desktop and mobile devices with adaptive layouts
Camera Controls: Easy switching between front and back cameras on mobile devices
Comprehensive Error Handling: Detailed feedback for optimal face positioning and connectivity issues
Secure Data Processing: Integrates with AuraeHealth's secure API endpoints

🚀 Installation

npm install auraehealth-facescan --save

🛠️ Quick Start

HTML Setup

<!DOCTYPE html>
<html>
<head>
  <title>AuraeHealth FaceScan Demo</title>
</head>
<body>
  <!-- Container for the face scan -->
  <div id="scan-container" class="container">
    <!-- Video element for camera feed -->
    <video class="input_video"></video>
    
    <!-- Canvas for rendering face mesh -->
    <canvas class="output_canvas"></canvas>
    
    <!-- UI Elements -->
    <div class="color-display"></div>
    <div class="progress-box-1">
      <div class="progress-indicator">
        <div class="progress-circle">
          <div class="progress-value">0%</div>
        </div>
        <div id="scan-progress-message">Scan in progress...</div>
      </div>
      <div class="buttons-container">
        <button class="start-scan-button">Start Scan</button>
        <button class="homepage-button">Back</button>
      </div>
    </div>
    <div class="progress-box-2">
      <p>Scan completed successfully!</p>
    </div>
    
    <!-- Loading indicator -->
    <div id="loading-indicator">
      <div class="loading-circle"></div>
      <p>Loading...</p>
    </div>
    
    <!-- Error dialog -->
    <div id="error-dialog" style="display: none;">
      <div class="error-dialog-content">
        <p id="error-dialog-message"></p>
        <button id="error-dialog-close" class="error-dialog-close">OK</button>
      </div>
    </div>
    
    <!-- Network error overlay -->
    <div id="network-error-overlay" style="display: none;">
      <div class="network-error-content">
        <svg class="network-error-icon" viewBox="0 0 24 24">
          <path d="M1.4 4.8L2.8 3.4 21.4 22 20 23.4 16.6 20H6C4.9 20 4 19.1 4 18V13.2L1.4 10.6V4.8M20 4V15.8L7.2 3H15V1H9V3.2L6 6.2V7.8L16.5 18.3 18 16.8V4H20Z"/>
        </svg>
        <h3 class="network-error-title">Connection Error</h3>
        <p class="network-error-message">We couldn't connect to our servers. Please check your internet connection and try again.</p>
        <button id="network-error-home-button" class="network-error-button">Back to Home</button>
      </div>
    </div>
  </div>
</body>
</html>

JavaScript Integration

// Import the package
import AuraeHealthFaceScan from 'auraehealth-facescan';

// Initialize with configuration
document.addEventListener('DOMContentLoaded', function() {
  AuraeHealthFaceScan.init({
    // DOM elements
    videoElement: document.querySelector('.input_video'),
    canvasElement: document.querySelector('.output_canvas'),
    colorDisplayElement: document.querySelector('.color-display'),
    progressBox1: document.querySelector('.progress-box-1'),
    progressBox2: document.querySelector('.progress-box-2'),
    startScanButton: document.querySelector('.start-scan-button'),
    backButton: document.querySelector('.homepage-button'),
    progressCircleElement: document.querySelector('.progress-circle'),
    progressValueElement: document.querySelector('.progress-value'),
    scanProgressMessageElement: document.querySelector('#scan-progress-message'),
    errorMessageElement: document.querySelector('#error-dialog-message'),
    container: document.querySelector('#scan-container')
  });
});

⚙️ Configuration Options

The init() function accepts a configuration object with these properties:

| Property | Type | Description | |----------|------|-------------| | videoElement | HTMLElement | The video element for camera input | | canvasElement | HTMLElement | The canvas element for rendering face mesh | | colorDisplayElement | HTMLElement | Element to display color information | | progressBox1 | HTMLElement | Container for scan controls | | progressBox2 | HTMLElement | Container for scan completion message | | startScanButton | HTMLElement | Button to start/cancel the scan | | backButton | HTMLElement | Button to return to homepage | | progressCircleElement | HTMLElement | Element for progress circle animation | | progressValueElement | HTMLElement | Element to display progress percentage | | scanProgressMessageElement | HTMLElement | Element to display scan status | | errorMessageElement | HTMLElement | Element to display error messages | | container | HTMLElement | Main container for the scan interface |

🔄 Data Flow

Initialization: Set up face mesh and camera
Face Detection: Real-time analysis of facial landmarks
Color Extraction: Process RGB values from facial regions
Frame Capture: Save compressed image frame for analysis
Blink Detection: Monitor eye aspect ratio for natural interaction
Data Processing: Send collected data to AuraeHealth API
Result Handling: Process API response and notify the application

📊 API Integration

The scan results are sent to the AuraeHealth API endpoint with the following data structure:

{
  "redChannel": [/* Array of red channel values */],
  "greenChannel": [/* Array of green channel values */],
  "blueChannel": [/* Array of blue channel values */],
  "image": "base64EncodedImage",
  "metadata": {
    "fps": 30,
    "user_id": "user123",
    "gender": "female",
    "email": "[email protected]",
    "fullname": "Jane Doe",
    "height": 170,
    "weight": 65,
    "waist": 75,
    "age": 35
  }
}

📱 Browser Compatibility

Chrome (Desktop & Mobile): Full support
Firefox (Desktop & Mobile): Full support
Safari (Desktop & Mobile): Supported with camera permissions
Edge: Full support

🧩 Dependencies

MediaPipe Face Mesh - For facial landmark detection
Camera Utils - For camera management
Control Utils - For UI controls
Drawing Utils - For rendering mesh

❓ Troubleshooting

Common Issues

| Issue | Solution | |-------|----------| | Camera not starting | Ensure camera permissions are granted in browser settings | | "No face detected" error | Position face directly in front of camera in good lighting | | "Keep camera closer" warning | Move device closer to face for optimal scanning | | Network errors | Check internet connection and try again | | Performance issues | Close other browser tabs and applications using the camera |

Developer Tips

Enable browser developer tools to view console logs for detailed diagnostics
Verify all required DOM elements are properly initialized in your configuration
Test on multiple devices to ensure responsive behavior

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📞 Support

For questions, issues, or feature requests, please contact:

[email protected]

Made with ❤️ by AuraeHealth