auraehealth-facescan

# 🔍 AuraeHealth FaceScan Advanced Facial Analysis for Health Metrics [![npm version](https://img.shields.io/badge/npm-1.0.7-DC7D57.svg)](https://www.npmjs.com/package/auraehealth-facescan) ## 📋 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 ```bash npm install auraehealth-facescan --save ``` ## 🛠️ Quick Start ### HTML Setup ```html <!DOCTYPE html> <html> <head> <title>AuraeHealth FaceScan Demo</title> </head> <body>  <div id="scan-container" class="container">  <video class="input_video"></video>  <canvas class="output_canvas"></canvas>  <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>  <div id="loading-indicator"> <div class="loading-circle"></div> <p>Loading...</p> </div>  <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>  <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 ```javascript // 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 1. **Initialization**: Set up face mesh and camera 2. **Face Detection**: Real-time analysis of facial landmarks 3. **Color Extraction**: Process RGB values from facial regions 4. **Frame Capture**: Save compressed image frame for analysis 5. **Blink Detection**: Monitor eye aspect ratio for natural interaction 6. **Data Processing**: Send collected data to AuraeHealth API 7. **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: ```javascript { "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": "user@example.com", "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](https://github.com/google/mediapipe) - For facial landmark detection - [Camera Utils](https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils) - For camera management - [Control Utils](https://cdn.jsdelivr.net/npm/@mediapipe/control_utils) - For UI controls - [Drawing Utils](https://cdn.jsdelivr.net/npm/@mediapipe/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: - hello@auraehealth.com --- Made with ❤️ by AuraeHealth