faceapidetectionweb 1.0.0+6 copy "faceapidetectionweb: ^1.0.0+6" to clipboard
faceapidetectionweb: ^1.0.0+6 copied to clipboard

Platformweb

A Flutter package for face detection and expression analysis using JavaScript interop, providing camera controls and photo capture capabilities for web applications.

faceapidetectionweb #

A Flutter package that enables face detection and expression analysis through JavaScript interoperability.

Demo Video Using Virtual Camera

Demo Video Using Virtual Camera

Prerequisites #

Before using this package, you must download the required face detection model files.

  1. Download the model files from: https://github.com/bagusandrewijaya/modelfaceapidetection

  2. Create the following directory structure in your project:

    web/
    └── js/
        ├── camera_logic.js
        ├── face-api.js
        └── models/
            └── [model files]
    
    copied to clipboard
  3. Add the required scripts to your index.html:

    <head>
        <script src="js/camera_logic.js" defer></script>
        <script src="js/face-api.js" defer></script>
        <!-- Other head elements -->
    </head>
    
    copied to clipboard

Usage Guide #

JSBridge Class #

The JSBridge class provides the interface between Flutter and JavaScript for camera control and face detection.

Methods

initialize

void initialize({
    required Function(bool) onCameraStateChanged,
    required Function(String) onCameraError,
    required Function(String, String) onPhotoTaken,
    required Function(bool, List<Map<String, dynamic>>) onFaceDetectionStatus
})
copied to clipboard

Initializes the bridge with callback functions for various events:

  • onCameraStateChanged: Notifies when camera state changes
  • onCameraError: Provides camera error messages
  • onPhotoTaken: Called when a photo is captured
  • onFaceDetectionStatus: Reports face detection results

openCamera

Future<bool> openCamera()
copied to clipboard

Activates the camera. Returns a Future that resolves to:

  • true: Camera opened successfully
  • false: Camera failed to open

closeCamera

void closeCamera()
copied to clipboard

Deactivates the camera.

takePhoto

void takePhoto()
copied to clipboard

Captures a photo using the active camera.

State Properties

bool _isCameraOpen
String _lastPhotoTaken
String _lastPhotoWithBox
bool _faceDetected
List<Map<String, dynamic>> _expressions
copied to clipboard

Key Features

The widget provides:

  • Camera view container
  • Face detection status display
  • Expression analysis results
  • Camera control buttons
  • Photo preview with and without detection boxes

Example Implementation

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  final JSBridge _bridge = JSBridge();
  
  void _toggleCamera() {
    if (_isCameraOpen) {
      _bridge.closeCamera();
    } else {
      _bridge.openCamera();
    }
  }
  
  // ... rest of the implementation
}
copied to clipboard

UI Components #

The package includes several UI components:

  • Camera viewport container
  • Status indicators for face detection
  • Expression analysis display
  • Camera control interface
  • Photo preview displays

Each component is designed to work seamlessly with the face detection functionality while maintaining a responsive layout.

1
likes
130
points
8
downloads

Publisher

verified publisherkitahealth.my.id

Weekly Downloads

2024.09.27 - 2025.04.11

A Flutter package for face detection and expression analysis using JavaScript interop, providing camera controls and photo capture capabilities for web applications.

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

cupertino_icons, flutter, flutter_web_plugins, js

More

Packages that depend on faceapidetectionweb