DOCSEARCHbyAlgolia
Submit Docs

Jeeliz FaceFilter Documentation

repository·master·Indexed 25 days ago

https://github.com/jeeliz/jeelizfacefilter

A lightweight JavaScript/WebGL library for real-time face detection and tracking in augmented reality applications. Version 1.1.0 provides raw tracking data (position, scale, rotation) and mouth detection, compatible with 3D engines like Three.js, Babylon.js, and A-Frame, as well as Canvas2D and CSS3D. The library includes helpers for face extraction, resolution optimization, and head-controlled interactions, and supports multi-face tracking across various lighting conditions.

Tokens
6.3K
Snippets
8
Records
42
Agent score
84%

What's inside Jeeliz FaceFilter

  1. Overview of Jeeliz FaceFilter

    master
    Jeeliz FaceFilter is a lightweight, framework-agnostic JavaScript/WebGL library designed for real-time face detection and tracking. It captures video via WebRTC and provides raw data (detection status, position, scale, and Euler rotation angles) to allow developers to overlay 3D content for augmented reality applications. It is designed to be robust across various lighting conditions and is mobile-friendly.

  2. Core Features of Jeeliz FaceFilter

    master

    The library provides the following capabilities:

    • Face Detection & Tracking: Real-time detection and tracking of faces.
    • Rotation Detection: Detects face rotation.
    • Mouth Detection: Detects mouth opening.
    • Multi-face Support: Detects and tracks multiple faces.
    • Robustness: High performance across different lighting conditions.
    • Video Quality: Supports HD video acquisition.
    • Platform Support: Mobile-friendly and compatible with various 3D engines (THREE.JS, BABYLON.JS, A-FRAME) and APIs (CANVAS, CSS3D).

  4. Launch the development server

    master

    To develop your own filters or view demos locally, you can use the provided minimalist HTTPS server.

    Using Node.js:

    npm install
npm run dev

    After running, access the demos at https://127.0.0.1:8000/demos/threejs/cube/index.html. Note that your browser may show a "not secure" warning; you must click "Advanced" and then "Proceed" to access the local HTTPS site.

    Using Python 2:

    python2 httpsServer.py

    Access via https://localhost:4443.

  7. Optimize hosting for Jeeliz FaceFilter

    master

    To improve performance and loading times:

    1. Enable GZIP Compression: The neural network JSON file (neuralNets/NN_DEFAULT.json) is large but highly compressible. Ensure your server has GZIP compression enabled for both .js and .json files.
    2. Preload the Neural Network: By default, the library loads the neural network via AJAX after JEEFACEFILTER.init() and after the user grants camera permissions. You can speed up the initial experience by preloading neuralNets/NN_DEFAULT.json using a Service Worker or a raw XMLHttpRequest immediately after the HTML page loads. This ensures the file is in the browser cache when the library requests it.
    3. Use the CDN: You can use the hosted version of the library at https://appstatic.jeeliz.com/faceFilter/jeelizFaceFilter.js.

  12. Install the THREE.JS Blender exporter in Blender

    master

    Because the Blender exporter was removed from the core THREE.JS repository, you can manually install this version to use it in your Blender workflows.

    1. Copy the io_three directory from this repository into your Blender scripts folder: <blender_path>/scripts/.
    2. Restart Blender.
    3. Enable the exporter in File > User Preferences within Blender.