### Install and Run Development Server

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/reactThreeFiberDemo/README.md

Installs dependencies and starts the development server with host access. Ensure Node.js version 22 or higher is used if specified.

```bash
# facultative: use Node >= 22:
nvm use 22
#
pm install
pm run dev -- --host
```

--------------------------------

### Start Development Server with Node.js

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Installs dependencies and starts the development server using Node.js. Access the application via the provided URL.

```bash
npm install
npm run dev
```

--------------------------------

### Start Development Server with Python 2

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Launches the development HTTPS server using Python 2. Ensure Python 2.X is installed.

```bash
python2 httpsServer.py
```

--------------------------------

### User Interaction Prompt

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/canvas2D/multipleTrackers/index.html

Provides a simple text prompt for the user to click or touch to start the video feed.

```html
Click or Touch  
to start the video!
```

--------------------------------

### GIF Image Structure Example

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/libs/gify/README.md

This JSON object represents the structure of a GIF file, including global settings, animation properties, and individual image frames. It is useful for understanding how GIF data is parsed and represented programmatically.

```json
{
  "valid": true,
  "globalPalette": true,
  "globalPaletteSize": 256,
  "globalPaletteColorsRGB": [
    {
      "r": 50,
      "g": 82,
      "b": 120
    },
    {
      "r": 89,
      "g": 105,
      "b": 119
    },
    {
      "r": 4,
      "g": 33,
      "b": 71
    }
  ],
  "loopCount": 0,
  "height": 1610,
  "width": 899,
  "animated": true,
  "images": [
    {
      "identifier": "0",
      "localPalette": false,
      "localPaletteSize": 0,
      "interlace": false,
      "comments": [],
      "text": "",
      "left": 0,
      "top": 0,
      "width": 1610,
      "height": 899,
      "delay": 350,
      "disposal": 0
    },
    {
      "identifier": "1",
      "localPalette": true,
      "localPaletteSize": 256,
      "interlace": false,
      "comments": [],
      "text": "",
      "left": 0,
      "top": 0,
      "width": 1610,
      "height": 899,
      "delay": 350,
      "disposal": 0
    },
    {
      "identifier": "2",
      "localPalette": true,
      "localPaletteSize": 256,
      "interlace": false,
      "comments": [],
      "text": "",
      "left": 0,
      "top": 0,
      "width": 1610,
      "height": 899,
      "delay": 350,
      "disposal": 0
    },
    {
      "identifier": "3",
      "localPalette": true,
      "localPaletteSize": 256,
      "interlace": false,
      "comments": [],
      "text": "",
      "left": 0,
      "top": 0,
      "width": 1610,
      "height": 899,
      "delay": 350,
      "disposal": 0
    }
  ],
  "isBrowserDuration": false,
  "duration": 2800,
  "durationIE": 2800,
  "durationSafari": 2800,
  "durationFirefox": 2800,
  "durationChrome": 2800,
  "durationOpera": 2800
}
```

--------------------------------

### Example Detected States Object

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/faceReplacement/gif/README.md

This object represents the face detection state for each frame of a GIF. Each element corresponds to a frame, indicating the face's position (x, y), scale (s), and rotation (ry, rz) if detected, or 'false' if not detected. This can be pre-computed and provided to avoid lengthy detection processes.

```javascript
detectStates = [{x:-0.475,y:-0.152,s:0.278,ry:0.225,rz:0},{x:-0.457,y:-0.17,s:0.287,ry:0.206,rz:-0.011},false]
```

--------------------------------

### Build for Production

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/reactThreeFiberDemo/README.md

Generates a production-ready build of the application.

```bash
npm run build
```

--------------------------------

### Initialize JeelizFaceFilter with Resizer

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Use the JeelizResizer helper to size the canvas and determine the best video settings before initializing Jeeliz FaceFilter. The callback function receives error status and optimal video settings, which are then passed to JEELIZFACEFILTER.init.

```javascript
JeelizResizer.sizeCanvas({
  canvasId: 'jeeFaceFilterCanvas',
    callback: function(isError, bestVideoSettings){
      JEELIZFACEFILTER.init({
        videoSettings: bestVideoSettings,
        // ...
        // ...
      });
    }
});
```

--------------------------------

### Initialize Cesium and Head Controls

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/cesium/headControls/simplified.html

Initializes the Cesium viewer and sets up the HeadControls library with a callback for camera movement. Ensure the 'headControlsCanvas' element exists and the neural network models are accessible at 'NNCPath'.

```javascript
// initialize Cesium:
const CESIUMVIEWER = new Cesium.Viewer('cesiumContainer');
const SETTINGS = {
  zoomSensibility: 5.5,
  panSensibility: 0.00000015
};

function callbackMove(mv) {
  const cameraHeight = CESIUMVIEWER.scene.globe.ellipsoid.cartesianToCartographic(CESIUMVIEWER.camera.position).height / 1000.0 || Number.MAX_VALUE;
  if (mv.dZ !== 0) {
    // move head forward/backward
    const zoomAmount = mv.dZ * SETTINGS.zoomSensibility * cameraHeight;
    CESIUMVIEWER.camera.moveForward(zoomAmount);
  }
  if (mv.dRx !== 0) {
    // turn head up-down
    const panAmountX = SETTINGS.panSensibility * mv.dRx * cameraHeight;
    CESIUMVIEWER.scene.camera.rotateUp(panAmountX);
  }
  if (mv.dRy !== 0) {
    // turn head left-right
    const panAmountY = SETTINGS.panSensibility * mv.dRy * cameraHeight;
    CESIUMVIEWER.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, panAmountY);
  }
}

const DOMbutton = document.getElementById('startHeadControlsButton');
DOMbutton.onclick = function() {
  HeadControls.init({
    canvasId: 'headControlsCanvas',
    callbackMove: callbackMove,
    callbackReady: function(errCode) {
      if (errCode) {
        console.log('ERROR: HEAD CONTROLS NOT READY. errCode =', errCode);
      } else {
        console.log('INFO: HEAD CONTROLS ARE READY :)
');
        HeadControls.toggle(true);
      }
    },
    NNCPath: './neuralNets/' // where to find NN_DEFAULT.json from the current path
  });
  //end HeadControls.init params
};
//end DOMbutton.onclick
```

--------------------------------

### Initialize FaceFilter with Bundler

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Use this snippet when integrating with a bundler like Webpack or Parcel. It demonstrates loading the module and the neural network model directly.

```javascript
const faceFilter = require('./lib/jeelizFaceFilter.module.js').JEELIZFACEFILTER
const neuralNetworkModel = require('./neuralNets/NN_DEFAULT.json')

faceFilter.init({
  NNC:  neuralNetworkModel, // instead of NNCPath
  // ... other init parameters
});

```

--------------------------------

### Initialize JeelizFaceFilter with Module and Options

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Initialize JeelizFaceFilter using require and configure it with various options including canvas ID, neural network path, and callbacks for readiness and tracking.

```javascript
const faceFilter = require('./lib/jeelizFaceFilter.module.js').JEELIZFACEFILTER;

faceFilter.init({
  // you can also provide the canvas directly
  // using the canvas property instead of canvasId:
  canvasId: 'jeeFaceFilterCanvas',
  NNCPath: '../../../neuralNets/', // path to JSON neural network model (NN_DEFAULT.json by default)
  callbackReady: function(errCode, spec){
    if (errCode){
      console.log('AN ERROR HAPPENS. ERROR CODE =', errCode);
      return;
    }
    // [init scene with spec...]
    console.log('INFO: JEELIZFACEFILTER IS READY');
  }, //end callbackReady()

  // called at each render iteration (drawing loop)
  callbackTrack: function(detectState){
      // Render your scene here
      // [... do something with detectState]
  } //end callbackTrack()
});
```

--------------------------------

### JEELIZFACEFILTER.get_videoDevices

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Retrieves available video devices before initialization.

```APIDOC
## JEELIZFACEFILTER.get_videoDevices

### Description
Should be called before the `init` method. This method retrieves available video devices and provides them to a callback function.

### Method
GET

### Endpoint
/JEELIZFACEFILTER/get_videoDevices

### Parameters
#### Query Parameters
- **callback** (function) - Required - The callback function to receive the video devices and error information.
  - **mediaDevices** (array) - An array of device objects, each with a `deviceId` string attribute, or `false` if an error occurs.
  - **errorLabel** (string) - The label of the error if an error occurs (`NOTSUPPORTED`, `NODEVICESFOUND`, or `PROMISEREJECTED`).
```

--------------------------------

### Optional Video Settings for JeelizFaceFilter

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Configuration dictionary for overriding default WebRTC video settings. Ensure initialization is synchronized with video element events if using a webcam.

```javascript
{
  'videoElement' // not set by default. <video> element used
   // WARN: If you specify this parameter,
   //       1. all other settings will be useless
   //       2. it means that you fully handle the video aspect
   //       3. in case of using web-camera device make sure that
   //          initialization goes after `loadeddata` event of the `videoElement`,
   //          otherwise face detector will yield very low `detectState.detected` values
   //          (to be more sure also await first `timeupdate` event)

  'deviceId'            // not set by default
  'facingMode': 'user', // to use the rear camera, set to 'environment'

  'idealWidth': 800,  // ideal video width in pixels
  'idealHeight': 600, // ideal video height in pixels
  'minWidth': 480,    // min video width in pixels
  'maxWidth': 1920,   // max video width in pixels
  'minHeight': 480,   // min video height in pixels
  'maxHeight': 1920,  // max video height in pixels,
  'rotate': 0,        // rotation in degrees possible values: 0,90,-90,180
  'flipX': false      // if we should flip horizontally the video. Default: false
}
```

--------------------------------

### Initialize and Toggle Head Controls

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/cesium/headControls/index.html

Initializes HeadControls with a canvas ID, callback functions for movement and readiness, neural network path, and animation delay. Toggles the head controls on or off.

```javascript
const DOMbutton = document.getElementById('startHeadControlsButton');
// the user stats head navigation:
DOMbutton.onclick = function(){
    if (ISHEADCONTROLSINITIALIZED){
        toggleHeadControls(!ISHEADCONTROLSON);
        return;
    }
    ISHEADCONTROLSINITIALIZED = true;
    HeadControls.init({
        canvasId: 'headControlsCanvas',
        callbackMove: callbackMove,
        callbackReady: function(err){
            if (err){
                console.log('ERROR in index.html: HEAD CONTROLS NOT READY. err =', err);
            } else {
                console.log('INFO in index.html: HEAD CONTROLS ARE READY :)
');
                toggleHeadControls(true);
            }
        },
        NNCPath: '../../../neuralNets/', // where to find NN_DEFAULT.json from this path
        animateDelay: 2 // avoid DOM lags
    }); //end HeadControls.init params
};
//end DOMbutton.onclick
```

--------------------------------

### Initialize JeelizFaceFilter with Options

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Call this JavaScript function after the page loads to initialize the face filter. Provide the canvas ID, path to neural networks, and callback functions for readiness and tracking.

```javascript
JEELIZFACEFILTER.init({
  canvasId: 'jeeFaceFilterCanvas',
  NNCPath: '../../../neuralNets/', // path to JSON neural network model (NN_DEFAULT.json by default)
  callbackReady: function(errCode, spec){
    if (errCode){
      console.log('AN ERROR HAPPENS. ERROR CODE =', errCode);
      return;
    }
    // [init scene with spec...]
    console.log('INFO: JEELIZFACEFILTER IS READY');
  }, //end callbackReady()

  // called at each render iteration (drawing loop)
  callbackTrack: function(detectState){
    // Render your scene here
    // [... do something with detectState]
  } //end callbackTrack()
});
```

--------------------------------

### Import JeelizFaceFilter as a Module

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Import the JeelizFaceFilter library using ES module syntax. This is an alternative to the standard script tag.

```javascript
import 'dist/jeelizFaceFilter.module.js'
```

--------------------------------

### Create New JEELIZFACEFILTER Instance

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Instantiate a new JEELIZFACEFILTER object to handle multiple video streams or tracking instances. Each instance uses a separate WebGL context, and computing power is shared, which may increase latency.

```javascript
const JEELIZFACEFILTER2 = JEELIZFACEFILTER.create_new();
```

--------------------------------

### JEELIZFACEFILTER.update_videoSettings

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Dynamically changes the video settings, such as switching camera from selfie to back camera.

```APIDOC
## JEELIZFACEFILTER.update_videoSettings

### Description
Dynamically changes the video settings. It is useful to change the camera from the selfie camera (user) to the back (environment) camera. A `Promise` is returned.

### Method
`JEELIZFACEFILTER.update_videoSettings(<object> videoSettings)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **videoSettings** (object) - Required - Object containing video settings properties (see [Optional init arguments](optional-init-arguments) for details).

### Request Example
```json
{
  "videoSettings": {
    "camera": "environment",
    "width": 640,
    "height": 480
  }
}
```

### Response
- **Promise** - A Promise that resolves when the video settings have been updated.
```

--------------------------------

### HTML Structure for Head Controls

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/threejs/headControls/index.html

Sets up basic page styling and defines a canvas element for head controls, positioned fixed at the bottom right.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>three.js Head Controls</title>
    <style>
        body {
            color: #000;
            font-family: Monospace;
            font-size: 13px;
            text-align: center;
            font-weight: bold;
            background-color: #fff;
            margin: 0px;
            overflow: hidden;
        }
        #info {
            color: #000;
            position: absolute;
            top: 0px;
            width: 100%;
            padding: 5px;
        }
        a {
            color: red;
        }
        #headControlsCanvas {
            position: fixed;
            right: 0px;
            bottom: 0px;
            z-index: 1000;
            transform-origin: bottom right;
            max-height: 25%;
            max-width: 25%;
        }
    </style>
</head>
<body>
    <div id="info">
        <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - head controls example. 3D scene from orbit control example.
    </div>
    <canvas id="headControlsCanvas"></canvas>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jeelizFaceFilter@2.4.0/dist/jeelizFaceFilter.js"></script>
    <script src="index.js"></script>
</body>
</html>
```

--------------------------------

### Angel/Demon Face Filter CSS

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/threejs/angel_demon/index.html

CSS for the open mouth instruction overlay in the Angel/Demon face filter demo. It styles the text, position, and visibility.

```css
#openMouthInstructions {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  z-index: 1000;
  font-size: 20pt;
  text-shadow: 0 0 1px black;
  font-family: Helvetica Neu, Arial, sans-serif;
  color: white;
  display: none;
}
```

--------------------------------

### Include JeelizResizer Helper

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Include the JeelizResizer JavaScript helper in your HTML to manage canvas and video resolutions effectively. This script helps in sizing the canvas to the display size and determining the optimal video resolution for performance and image quality.

```html
<script src="https://appstatic.jeeliz.com/faceFilter/JeelizResizer.js"></script>
```

--------------------------------

### getInfo

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/libs/gify/README.md

Retrieves detailed information about an animated GIF from its ArrayBuffer source.

```APIDOC
## getInfo

### Description
Retrieves detailed information about an animated GIF from its ArrayBuffer source.

### Method
`getInfo(sourceArrayBuffer)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
* **sourceArrayBuffer** (ArrayBuffer) - The ArrayBuffer containing the GIF data.

### Response
* **Return Value** (gifInfo) - An object containing detailed information about the GIF.

### gifInfo Properties
* **valid** (bool) - Determines if the GIF is valid.
* **animated** (bool) - Determines if the GIF is animated.
* **globalPalette** (bool) - Determines if the GIF has a global color palette.
* **globalPaletteSize** (int) - Size of the global color palette.
* **globalPaletteColorsRGB** ([r,g,b]) - An array of objects containing the R, G, B values of the color palette.
* **height** (int) - Canvas height.
* **width** (int) - Canvas width.
* **loopCount** (int) - Total number of times the GIF will loop. 0 represents infinite.
* **images** ([images]) - Array of images contained in the GIF.
* **isBrowserDuration** (bool) - If any of the delay times are lower than the minimum value, this value will be set to true.
* **duration** (int) - Actual duration calculated from the delay time for each image. If isBrowserDuration is false, you should use this value.
* **durationIE** (int) - Duration for Internet Explorer (16fps).
* **durationSafari** (int) - Duration for Safari in milliseconds (50fps).
* **durationFirefox** (int) - Duration for Firefox in milliseconds (50fps).
* **durationChrome** (int) - Duration for Chrome in milliseconds (50fps).
* **durationOpera** (int) - Duration for Opera in milliseconds (50fps).
```

--------------------------------

### Include JeelizFaceFilter Main Script

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Add this script tag to the <head> section of your HTML to include the main library file.

```html
 <script src="dist/jeelizFaceFilter.js"></script>
```

--------------------------------

### JEELIZFACEFILTER.set_inputTexture

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Replaces the camera video input with a provided WebGL texture.

```APIDOC
## JEELIZFACEFILTER.set_inputTexture

### Description
Changes the video input by a WebGL Texture instance. The dimensions of the texture, in pixels, should be provided.

### Method
POST

### Endpoint
/JEELIZFACEFILTER/set_inputTexture

### Parameters
#### Request Body
- **tex** (WebGLTexture) - Required - The WebGL texture to use as input.
- **width** (integer) - Required - The width of the texture in pixels.
- **height** (integer) - Required - The height of the texture in pixels.
```

--------------------------------

### JEELIZFACEFILTER.render_video

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Renders the video feed onto the canvas element.

```APIDOC
## JEELIZFACEFILTER.render_video

### Description
Renders the video on the `<canvas>` element.

### Method
`JEELIZFACEFILTER.render_video()`

### Parameters
None

### Request Example
```javascript
JEELIZFACEFILTER.render_video();
```

### Response
None
```

--------------------------------

### Handle Head Movement Callbacks

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/cesium/headControls/index.html

Processes head movement data (dZ, dRx, dRy) to control Cesium camera zoom and rotation. Adjusts movement sensitivity based on camera height.

```javascript
function callbackMove(mv){
    var cameraHeight = CESIUMVIEWER.scene.globe.ellipsoid.cartesianToCartographic(CESIUMVIEWER.camera.position).height/1000.0 || Number.MAX_VALUE;
    if (mv.dZ!==0) {
        // move head forward/backward
        const zoomAmount = mv.dZ * SETTINGS.zoomSensibility * cameraHeight;
        CESIUMVIEWER.camera.moveForward(zoomAmount);
    }
    if (mv.dRx!==0) {
        // turn head up-down
        const panAmountX = SETTINGS.panSensibility * mv.dRx * cameraHeight;
        CESIUMVIEWER.scene.camera.rotateUp(panAmountX);
    }
    if (mv.dRy!==0) {
        // turn head left-right
        const panAmountY = SETTINGS.panSensibility * mv.dRy * cameraHeight;
        CESIUMVIEWER.scene.camera.rotate(Cesium.Cartesian3.UNIT_Z, panAmountY);
    }
}
```

--------------------------------

### HTML Structure for Canvas Elements

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/canvas2D/multipleTrackers/index.html

Defines the CSS for the notice and the two canvas elements used for face tracking. The canvases are styled to be responsive and positioned statically.

```html
<style>
  #notice { position: absolute; z-index: -1; font-variant: small-caps; text-align: center; color: black; font-size: 32pt; left: 50%; top: 50%; width: 400px; height: 200px; margin-top: -100px; margin-left: -200px; }
  #jeeFaceFilterCanvas, #jeeFaceFilterCanvas2{
    width: auto;
    max-width: 40vw;
    position: static;
    float: left;
    transform: none;
  }
</style>
```

--------------------------------

### Change Neural Network Model

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Specify a different neural network model by providing its path to JEELIZFACEFILTER.init().

```javascript
JEELIZFACEFILTER.init({
    NNCPath: '../../neuralNets/NN_LIGHT_1.json'
    // ...
  })
```

--------------------------------

### JEELIZFACEFILTER.set_scanSettings

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Overrides the default scan settings used for face detection. Allows fine-tuning of the detection process for performance and accuracy.

```APIDOC
## JEELIZFACEFILTER.set_scanSettings

### Description
Overrides the default scan settings used for face detection. Allows fine-tuning of the detection process for performance and accuracy.

### Method
`JEELIZFACEFILTER.set_scanSettings(<object> scanSettings)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **scanSettings** (object) - Required - A dictionary with the following properties:
  - **scale0Factor** (float) - Optional - Relative width (1 -> full width) of the searching window at the largest scale level. Default value is `0.8`.
  - **nScaleLevels** (int) - Optional - Number of scale levels. Default is `3`.
  - **overlapFactors** (array[float]) - Optional - Relative overlap according to X, Y and scale axis between 2 searching window positions. Higher values make scan faster but it may miss some positions. Set to `[1, 1, 1]` for no overlap. Default value is `[2, 2, 3]`.
  - **nDetectsPerLoop** (int) - Optional - Specify the number of detection per drawing loop. `-1` for adaptative value. Default: `-1`.
  - **enableAsyncReadPixels** (boolean) - Optional - Enable asynchronous GPU reading. Default is `false`. It will free a lot of CPU resource but it may add latency on some devices.

### Request Example
```json
{
  "scanSettings": {
    "scale0Factor": 0.7,
    "nScaleLevels": 4,
    "overlapFactors": [1, 1, 1],
    "nDetectsPerLoop": 10,
    "enableAsyncReadPixels": true
  }
}
```

### Response
None
```

--------------------------------

### JEELIZFACEFILTER.set_stabilizationSettings

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Overrides the default detection stabilization settings to reduce shaking artifacts in the output.

```APIDOC
## JEELIZFACEFILTER.set_stabilizationSettings

### Description
Overrides the default detection stabilization settings to reduce shaking artifacts in the output. The output of the neural network is always noisy, so we need to stabilize it using a floatting average to avoid shaking artifacts.

### Method
`JEELIZFACEFILTER.set_stabilizationSettings(<object> stabilizationSettings)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **stabilizationSettings** (object) - Required - A dictionary with the following properties:
  - **translationFactorRange** (array[float]) - Optional - Multiply `k` by a factor `kTranslation` depending on the translation speed of the head (relative to the viewport). `kTranslation=0` if `translationSpeed<minValue` and `kTranslation=1` if `translationSpeed>maxValue`. The regression is linear. Default value: `[0.002, 0.005]`.
  - **rotationFactorRange** (array[float]) - Optional - Analogous to `translationFactorRange` but for rotation speed. Default value: `[0.015, 0.1]`.
  - **qualityFactorRange** (array[float]) - Optional - Analogous to `translationFactorRange` but for the head detection coefficient. Default value: `[0.9, 0.98]`.
  - **alphaRange** (array[float]) - Optional - Specify how to apply `k`. Between 2 successive detections, we blend the previous `detectState` values with the current detection values using a mixing factor `alpha`. `alpha=<minValue>` if `k<0.0` and `alpha=<maxValue>` if `k>1.0`. Between the 2 values, the variation is quadratic. Default value: `[0.05, 1.0]`.

### Request Example
```json
{
  "stabilizationSettings": {
    "translationFactorRange": [0.001, 0.006],
    "rotationFactorRange": [0.01, 0.15],
    "qualityFactorRange": [0.85, 0.99],
    "alphaRange": [0.1, 0.9]
  }
}
```

### Response
None
```

--------------------------------

### JEELIZFACEFILTER.reset_GLState

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Resets the WebGL context.

```APIDOC
## JEELIZFACEFILTER.reset_GLState

### Description
Resets the WebGL context.

### Method
`JEELIZFACEFILTER.reset_GLState()`

### Parameters
None

### Request Example
```javascript
JEELIZFACEFILTER.reset_GLState();
```

### Response
None
```

--------------------------------

### JEELIZFACEFILTER.toggle_slow

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Toggles the slow rendering mode to relieve the GPU, impacting tracking and rendering speed.

```APIDOC
## JEELIZFACEFILTER.toggle_slow

### Description
Toggles the slow rendering mode. This is useful to relieve the GPU when the user's attention is focused on other parts of the application. The tracking and 3D rendering will also be slower.

### Method
POST

### Endpoint
/JEELIZFACEFILTER/toggle_slow

### Parameters
#### Query Parameters
- **isSlow** (boolean) - Required - Whether to enable slow rendering mode.
```

--------------------------------

### Mouth Opened State Styling

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/div/index.html

Applies a red background when the mouth is detected as opened. This class should be dynamically added or removed based on facial expressions.

```css
.mouthOpened { background-color: red!important; }
```

--------------------------------

### JEELIZFACEFILTER.resize

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Resizes the canvas element to adapt the video cut and accounts for device orientation changes.

```APIDOC
## JEELIZFACEFILTER.resize

### Description
This method should be called after resizing the `<canvas>` element to adapt the cut of the video. It should also be called if the device orientation is changed to take account of new video dimensions.

### Method
GET

### Endpoint
/JEELIZFACEFILTER/resize
```

--------------------------------

### Fragment Shader for Video Texture

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/babylonjs/cube/index.html

This GLSL fragment shader samples a video texture using provided UV coordinates.

```glsl
precision lowp float;
uniform sampler2D samplerVideo;
varying vec2 vUV;
void main(void){
 gl_FragColor = texture2D(samplerVideo, vUV);
}
```

--------------------------------

### Dog Face Filter CSS

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/threejs/dog_face/index.html

Styles for the canvas container, the face filter canvas, and the dog filter overlay. Ensures proper positioning and scaling.

```css
.canvasContainer {
  position: relative;
  margin: 0 auto;
  text-align: center;
}

#jeeFaceFilterCanvas {
  z-index: 0;
  max-height: 100%;
  left: auto;
  top: auto;
  width: 100vmin;
  transform: translate(0,0) rotateY(180deg);
  position: static;
}

img {
  max-width: 100%;
}

#filter {
  position: absolute;
  z-index: 0;
  max-height: 100%;
  width: 100vmin;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  opacity: 0.15;
}

#filter canvas {
  width: 100%;
  height: 100%;
}
```

--------------------------------

### JEELIZFACEFILTER.destroy

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Cleans up graphic and JavaScript memory, uninitializing the library.

```APIDOC
## JEELIZFACEFILTER.destroy

### Description
Cleans both graphic memory and JavaScript memory, uninitializing the library. After that, you need to initialize the library again. A `Promise` is returned.

### Method
`JEELIZFACEFILTER.destroy()`

### Parameters
None

### Request Example
```javascript
JEELIZFACEFILTER.destroy().then(() => {
  console.log('JEELIZFACEFILTER has been destroyed.');
  // Re-initialize if needed
  // JEELIZFACEFILTER.init({...});
});
```

### Response
- **Promise** - A Promise that resolves when the library has been successfully destroyed.
```

--------------------------------

### Play Button CSS Styling

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/threejs/casa_de_papel/index.html

Custom CSS for a play button, including fixed positioning, styling, and hover effects. This is used to control the appearance and interaction of the play button within the 'CASA DE PAPEL' theme.

```css
#buttonPlayAudio {
  background: #7a081e;
  padding: 10px 15px;
  font-size: 12pt;
  border: none;
  border-radius: 30px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100000;
  color: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.5), 0 3px 5px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
}

#buttonPlayAudio:hover {
  opacity: 0.8;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}
```

--------------------------------

### Mouth Closed State Styling

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/div/index.html

Applies a yellow background when the mouth is detected as closed. This class should be dynamically added or removed based on facial expressions.

```css
.mouthClosed { background-color: yellow!important; }
```

--------------------------------

### JEELIZFACEFILTER.set_videoOrientation

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Dynamically changes video orientation settings (rotation and flip).

```APIDOC
## JEELIZFACEFILTER.set_videoOrientation

### Description
Dynamically changes `videoSettings.rotate` and `videoSettings.flipX`. This method should be called after initialization.

### Method
`JEELIZFACEFILTER.set_videoOrientation(<integer> angle, <boolean> flipX)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Rotate video by 90 degrees and flip horizontally
JEELIZFACEFILTER.set_videoOrientation(90, true);

// Reset to default (0 degrees, no flip)
JEELIZFACEFILTER.set_videoOrientation(0, false);
```

### Response
None
```

--------------------------------

### JEELIZFACEFILTER.update_videoElement

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Changes the video element used for face detection.

```APIDOC
## JEELIZFACEFILTER.update_videoElement

### Description
Changes the video element used for the face detection (which can be provided via `VIDEOSETTINGS.videoElement`) by another video element. A callback function can be called when it is done.

### Method
`JEELIZFACEFILTER.update_videoElement(<video> vid, <function|False> callback)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const newVideoElement = document.getElementById('my-new-video');
JEELIZFACEFILTER.update_videoElement(newVideoElement, () => {
  console.log('Video element updated successfully!');
});
```

### Response
None
```

--------------------------------

### JEELIZFACEFILTER.set_animateDelay

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Changes the animation delay for the rendering loop.

```APIDOC
## JEELIZFACEFILTER.set_animateDelay

### Description
Changes the `animateDelay` argument provided during initialization.

### Method
POST

### Endpoint
/JEELIZFACEFILTER/set_animateDelay

### Parameters
#### Query Parameters
- **delay** (integer) - Required - The new animation delay in milliseconds.
```

--------------------------------

### JEELIZFACEFILTER.reset_inputTexture

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Resets the input texture to use the user's camera video feed.

```APIDOC
## JEELIZFACEFILTER.reset_inputTexture

### Description
Reverts the input texture to the user's camera video feed.

### Method
POST

### Endpoint
/JEELIZFACEFILTER/reset_inputTexture
```

--------------------------------

### Style for JEELIZ FACEFILTER Follow Element

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/comedy-glasses/index.html

Styles the element that follows the face, applying a background image and dimensions for the comedy glasses effect. This CSS should be applied to the element with the ID 'jeelizFaceFilterFollow'.

```css
#jeelizFaceFilterFollow {
  display: block;
  position: absolute;
  z-index: 1000;
  background-image: url('comedy-glasses.png');
  background-size: cover;
  height: 200px;
  width: 200px;
}
```

--------------------------------

### Face Filter Container Styling

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/div/index.html

Styles the main container for the face filter, ensuring it's positioned absolutely and has a default background. Use this for the primary element that will hold the face tracking visuals.

```css
#jeelizFaceFilterFollow { display: block; position: absolute; z-index: 1000; background-color: lime; height: 60px; width: 60px; }
```

--------------------------------

### HTML Canvas Element for FaceFilter

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Include a canvas element in your HTML body. Set its width and height properties to define the rendering resolution. Ensure these match the desired display size to avoid blurriness.

```html
<canvas width="600" height="600" id='jeeFaceFilterCanvas'></canvas>
```

--------------------------------

### CSS Classes for Mouth State

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/comedy-glasses/index.html

Placeholder CSS classes for mouth opened and closed states. These classes can be used to trigger animations or style changes based on the user's mouth movements detected by JEELIZ FACEFILTER.

```css
.mouthOpened {
}
```

```css
.mouthClosed {
}
```

--------------------------------

### JEELIZFACEFILTER.toggle_pause

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/README.md

Pauses or resumes the rendering and detection loop. Can optionally shut off the video stream.

```APIDOC
## JEELIZFACEFILTER.toggle_pause

### Description
Pauses or resumes the rendering/detection loop. If `isShutOffVideo` is set to `true`, the media stream track will be stopped and the camera light will turn off. It returns a `Promise` object.

### Method
POST

### Endpoint
/JEELIZFACEFILTER/toggle_pause

### Parameters
#### Query Parameters
- **isPause** (boolean) - Required - Whether to pause the process.
- **isShutOffVideo** (boolean) - Optional - Whether to shut off the video stream.
```

--------------------------------

### Vertex Shader for Video Transformation

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/babylonjs/cube/index.html

This GLSL vertex shader transforms vertex positions and UV coordinates, often used for video input.

```glsl
attribute vec3 position;
uniform mat2 videoTransformMat2;
varying vec2 vUV;
void main(void){
 gl_Position = vec4(position, 1.);
 vUV = 0.5 + videoTransformMat2 * position.xy;
}
```

--------------------------------

### isAnimated

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/libs/gify/README.md

Checks if a given ArrayBuffer source represents an animated GIF.

```APIDOC
## isAnimated

### Description
Checks if a given ArrayBuffer source represents an animated GIF.

### Method
`isAnimated(sourceArrayBuffer)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
* **sourceArrayBuffer** (ArrayBuffer) - The ArrayBuffer containing the GIF data.

### Response
* **Return Value** (bool) - `true` if the GIF is animated, `false` otherwise.
```

--------------------------------

### Style for JEELIZ Face Filter Canvas Element

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/comedy-glasses/index.html

Applies essential CSS 3D transforms to the canvas element for correct rendering of 3D effects, especially on iOS. The `translateZ`, `translate`, `rotateY`, and `preserve-3d` properties are crucial for positioning and depth.

```css
#jeeFaceFilterCanvas {
  /* YOU SHOULD KEEP the transform: translateZ(-4000px) and the transform-style: preserve-3d; OTHERWISE THE DIV WILL BE BEHIND THE CANVAS WITH IOS */
  transform: translateZ(-4000px) translate(-50%, -50%) rotateY(180deg);
  transform-style: preserve-3d;
}
```

--------------------------------

### Canvas Transform for 3D Effect

Source: https://github.com/jeeliz/jeelizfacefilter/blob/master/demos/CSS3D/div/index.html

Applies necessary CSS 3D transformations to the canvas element to ensure correct rendering and positioning of 3D elements, especially important for compatibility with iOS.

```css
#jeeFaceFilterCanvas { 
  /* YOU SHOULD KEEP the transform: translateZ(-4000px) and the transform-style: preserve-3d; OTHERWISE THE DIV WILL BE BEHIND THE CANVAS WITH IOS */
  transform: translateZ(-4000px) translate(-50%, -50%) rotateY(180deg);
  transform-style: preserve-3d;
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.