# 🔍 AuraeHealth FaceScan
Advanced Facial Analysis for Health Metrics
[](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
AuraeHealth FaceScan Demo
0%
Scan in progress...
Scan completed successfully!
Loading...
Connection Error
We couldn't connect to our servers. Please check your internet connection and try again.
```
### 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