### Initialize and start tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/README.md

Initiate the tracker with the default model and start tracking on a video element.

```html
<video id="inputVideo" width="400" height="300" autoplay loop>
  <source src="./media/somevideo.ogv" type="video/ogg"/>
</video>
<script type="text/javascript">
  var videoInput = document.getElementById('inputVideo');
  
  var ctracker = new clm.tracker();
  ctracker.init();
  ctracker.start(videoInput);
</script>
```

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

### start() - Start Continuous Tracking

Source: https://context7.com/auduno/clmtrackr/llms.txt

Starts the tracker running continuously on a video or canvas element. Automatically handles face detection and tracking iterations.

```APIDOC
## start()

### Description
Starts the tracker running continuously on a video or canvas element. Automatically handles face detection and tracking iterations.

### Method
`ctrack.start(element, [hint])`

### Parameters
#### Path Parameters
- **element** (HTMLVideoElement | HTMLCanvasElement) - Required - The video or canvas element to track.
- **hint** (Array<number>) - Optional - An array representing a bounding box hint `[x, y, width, height]` for initial face detection.

### Request Example
```javascript
// HTML setup
// <video id="video" width="400" height="300" autoplay></video>
// <canvas id="overlay" width="400" height="300"></canvas>

var videoElement = document.getElementById('video');
var overlayCanvas = document.getElementById('overlay');

// Initialize and start tracking
var ctrack = new clm.tracker();
ctrack.init();
ctrack.start(videoElement);

// Optional: start with bounding box hint (x, y, width, height)
ctrack.start(videoElement, [100, 50, 200, 200]);
```
```

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

### Setup Video and Webcam Access

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_genderdetection.html

Handles the setup of the video element and requests access to the user's webcam using the getUserMedia API. Includes fallback mechanisms for browsers that do not support the API or for cases where webcam access fails. The video proportions are adjusted to maintain a 4:3 aspect ratio.

```javascript
var vid = document.getElementById('videoel');
var vid_width = vid.width;
var vid_height = vid.height;
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');

function enablestart() {
  var startbutton = document.getElementById('startbutton');
  startbutton.value = "start";
  startbutton.disabled = null;
}

var insertAltVideo = function(video) {
  if (supports_video()) {
    if (supports_webm_video()) {
      video.src = "./media/cap12_edit.webm";
    } else if (supports_h264_baseline_video()) {
      video.src = "./media/cap12_edit.mp4";
    } else {
      return false;
    }
    return true;
  } else return false;
}

function adjustVideoProportions() {
  // resize overlay and video if proportions are not 4:3
  // keep same height, just change width
  var proportion = vid.videoWidth/vid.videoHeight;
  vid_width = Math.round(vid_height * proportion);
  vid.width = vid_width;
  overlay.width = vid_width;
}

function gumSuccess( stream ) {
  // add camera stream
  if ("srcObject" in vid) {
    vid.srcObject = stream;
  } else {
    vid.src = (window.URL && window.URL.createObjectURL(stream));
  }
  vid.onloadedmetadata = function() {
    adjustVideoProportions();
    vid.play();
  }
  vid.onresize = function() {
    adjustVideoProportions();
    if (trackingStarted) {
      ctrack.stop();
      ctrack.reset();
      ctrack.start(vid);
    }
  }
}

function gumFail() {
  // fall back to video if getUserMedia failed
  insertAltVideo(vid);
  alert("There was some problem trying to fetch video from your webcam. If you have a webcam, please make sure to accept when the browser asks for access to your webcam.");
}

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;

// check for camerasupport
if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail);
} else if (navigator.getUserMedia) {
  navigator.getUserMedia({video : true}, gumSuccess, gumFail);
} else {
  insertAltVideo(vid);
  alert("This demo depends on getUserMedia, which your browser does not seem to support. :(");
}

vid.addEventListener('canplay', enablestart, false);
```

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

### Initialize and Start Face Tracker

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/facedeform.html

Initializes the face tracker and starts tracking the video feed. Ensure the model (pModel) is loaded before calling this.

```javascript
var ctrack = new clm.tracker();
ctrack.init(pModel);
var trackingStarted = false;

function startVideo() {
  // start video
  vid.play();
  // start tracking
  ctrack.start(vid);
  trackingStarted = true;
  // start drawing face grid
  drawGridLoop();
}
```

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

### JavaScript Environment and Analytics Setup

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video.html

Handles protocol redirection for getUserMedia compatibility and initializes Google Analytics.

```javascript
// getUserMedia only works over https in Chrome 47+, so we redirect to https. Also notify user if running from file. if (window.location.protocol == "file:") { alert("You seem to be running this example directly from a file. Note that these examples only work when served from a server or localhost due to canvas cross-domain restrictions."); } else if (window.location.hostname !== "localhost" && window.location.protocol !== "https:"){ window.location.protocol = "https"; } var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-32642923-1']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
```

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

### Start Video Tracking Loop

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/facesubstitution.html

Starts the video playback, initiates the tracker, and begins the face grid drawing loop.

```javascript
function startVideo() { // start video vid.play(); // start tracking ctrack.start(vid); trackingStarted = true; // start drawing face grid drawGridLoop(); }
```

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

### Full Implementation with Webcam

Source: https://context7.com/auduno/clmtrackr/llms.txt

This example sets up a video element for webcam input and a canvas for drawing tracking results. It initializes the tracker and uses a requestAnimationFrame loop to update the visualization.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Face Tracking Demo</title>
  <style>
    #container { position: relative; width: 400px; }
    #overlay { position: absolute; top: 0; left: 0; }
    video, canvas { transform: scaleX(-1); } /* Mirror for webcam */
  </style>
</head>
<body>
  <div id="container">
    <video id="video" width="400" height="300" autoplay playsinline></video>
    <canvas id="overlay" width="400" height="300"></canvas>
  </div>
  <div id="status">Initializing...</div>

  <script src="clmtrackr.js"></script>
  <script>
    var video = document.getElementById('video');
    var overlay = document.getElementById('overlay');
    var ctx = overlay.getContext('2d');
    var status = document.getElementById('status');

    // Setup webcam
    navigator.mediaDevices.getUserMedia({ video: true })
      .then(function(stream) {
        video.srcObject = stream;
        video.onloadedmetadata = function() {
          video.play();
          startTracking();
        };
      })
      .catch(function(err) {
        status.textContent = 'Camera error: ' + err.message;
      });

    // Initialize tracker
    var ctrack = new clm.tracker({
      useWebGL: true,
      scoreThreshold: 0.5
    });
    ctrack.init();

    function startTracking() {
      ctrack.start(video);
      status.textContent = 'Detecting face...';
      drawLoop();
    }

    function drawLoop() {
      requestAnimationFrame(drawLoop);
      ctx.clearRect(0, 0, 400, 300);

      var positions = ctrack.getCurrentPosition();
      if (positions) {
        ctrack.draw(overlay);
        var score = ctrack.getScore();
        status.textContent = 'Tracking (score: ' + score.toFixed(2) + ')';
      }
    }

    // Handle tracking events
    document.addEventListener('clmtrackrLost', function() {
      status.textContent = 'Face lost, re-detecting...';
    });

    document.addEventListener('clmtrackrConverged', function() {
      status.textContent = 'Face model converged!';
    });
  </script>
</body>
</html>
```

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

### Basic CSS for Face Mask Example

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_mask.html

This CSS provides basic styling for the face mask example, including font settings, positioning for overlay and video elements, and display properties for mask elements.

```css
body {
  font-family: 'Lato';
  background-color: #f0f0f0;
  margin: 0px auto;
  max-width: 1150px;
}
#overlay, #webgl {
  position: absolute;
  top: 0px;
  left: 0px;
  -o-transform : scaleX(-1);
  -webkit-transform : scaleX(-1);
  transform : scaleX(-1);
  -ms-filter : fliph; /*IE*/
  filter : fliph; /*IE*/
}
#videoel {
  -o-transform : scaleX(-1);
  -webkit-transform : scaleX(-1);
  transform : scaleX(-1);
  -ms-filter : fliph; /*IE*/
  filter : fliph; /*IE*/
}
#container {
  position : relative;
  width : 370px;
  /*margin : 0px auto;*/
}
#content {
  margin-top : 70px;
  margin-left : 100px;
  margin-right : 100px;
  max-width: 950px;
}
h2 {
  font-weight : 400;
}
.masks {
  display: none;
}
.nogum {
  display : none;
}
.btn {
  font-family: 'Lato';
  font-size: 16px;
}
.hide {
  display : none;
}
.nohide {
  display : block;
}
```

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

### Enable Start Button

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Enables the start button by setting its value to 'start' and removing the disabled attribute.

```javascript
function enablestart() {
    var startbutton = document.getElementById('startbutton');
    startbutton.value = "start";
    startbutton.disabled = null;
}
```

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

### Enable Start Button

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_mask.html

Enables the start button once the video is ready to play. This function is called as a callback when the video metadata is loaded.

```javascript
function enablestart() {
  var startbutton = document.getElementById('startbutton');
  startbutton.value = "start";
  startbutton.disabled = null;
}
```

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

### Initialize Video Tracking and Animation Loop

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Starts the video playback and tracking process, and initiates the animation loop to draw the face overlay.

```javascript
enablestart, false); function startVideo() { // start video vid.play(); // start tracking ctrack.start(vid); trackingStarted = true; // start loop to draw face drawLoop(); } function drawLoop() { requestAnimFrame(drawLoop); overlayCC.clearRect(0, 0, vid\_width, vid\_height); //psrElement.innerHTML = "score :" + ctrack.getScore().toFixed(4); if (ctrack.getCurrentPosition()) { ctrack.draw(overlay); } } // update stats on every iteration document.addEventListener('clmtrackrIteration', function(event) { stats.update(); }, false);
```

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

### Start Video and Face Tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_mask.html

Starts the video playback, begins face tracking using the CLM tracker, and initiates the drawing loop for the face grid. Sets 'trackingStarted' to true.

```javascript
function startVideo() {
  // start video
  vid.play();
  // start tracking
  ctrack.start(vid);
  trackingStarted = true;
  // start drawing face grid
  drawGridLoop();
}
```

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

### Start video and emotion tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_emotiondetection.html

Starts the video playback and initiates the face tracking process using the initialized clm.tracker. It also sets up a loop for continuously drawing facial features.

```javascript
function startVideo() {
  // start video
  vid.play();
  // start tracking
  ctrack.start(vid);
  trackingStarted = true;
  // start loop to draw face
  drawLoop();
}
```

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

### Initialize Video and Overlay Elements

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_mask.html

Gets references to video and overlay elements from the DOM. Ensures the browser supports WebGL for advanced masking.

```javascript
var vid = document.getElementById('videoel');
var vid_width = vid.width;
var vid_height = vid.height;
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
var webgl_overlay = document.getElementById('webgl');
```

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

### Webcam and video setup with getUserMedia

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_emotiondetection.html

Handles webcam access using the getUserMedia API, including fallbacks for older browsers. It sets up the video element and the overlay canvas for displaying tracking data. The function also adjusts video proportions and restarts tracking if the video element resizes.

```javascript
function enablestart() {
  var startbutton = document.getElementById('startbutton');
  startbutton.value = "start";
  startbutton.disabled = null;
}
```

```javascript
function adjustVideoProportions() {
  // resize overlay and video if proportions are different
  // keep same height, just change width
  var proportion = vid.videoWidth/vid.videoHeight;
  vid_width = Math.round(vid_height * proportion);
  vid.width = vid_width;
  overlay.width = vid_width;
}
```

```javascript
function gumSuccess( stream ) {
  // add camera stream if getUserMedia succeeded
  if ("srcObject" in vid) {
    vid.srcObject = stream;
  } else {
    vid.src = (window.URL && window.URL.createObjectURL(stream));
  }
  vid.onloadedmetadata = function() {
    adjustVideoProportions();
    vid.play();
  }
  vid.onresize = function() {
    adjustVideoProportions();
    if (trackingStarted) {
      ctrack.stop();
      ctrack.reset();
      ctrack.start(vid);
    }
  }
}
```

```javascript
function gumFail() {
  alert("There was some problem trying to fetch video from your webcam. If you have a webcam, please make sure to accept when the browser asks for access to your webcam.");
}
```

```javascript
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
// check for camerasupport
if (navigator.mediaDevices) {
  navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail);
} else if (navigator.getUserMedia) {
  navigator.getUserMedia({video : true}, gumSuccess, gumFail);
} else {
  alert("This demo depends on getUserMedia, which your browser does not seem to support. :(");
}
```

```javascript
vid.addEventListener('canplay', enablestart, false);
```

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

### Start Continuous Tracking

Source: https://context7.com/auduno/clmtrackr/llms.txt

Begins continuous tracking on a video or canvas element. This method automatically handles face detection and tracking loops. An optional bounding box hint can be provided to guide initial detection.

```javascript
var videoElement = document.getElementById('video');
var overlayCanvas = document.getElementById('overlay');

var ctrack = new clm.tracker();
ctrack.init();
ctrack.start(videoElement);
```

```javascript
ctrack.start(videoElement, [100, 50, 200, 200]);
```

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

### Complete Face Substitution Example

Source: https://context7.com/auduno/clmtrackr/llms.txt

Sets up face tracking and deformation for real-time face substitution. Loads a mask image and applies it to the detected face positions when tracking converges.

```javascript
// Setup
var ctrack = new clm.tracker();
ctrack.init(pModel);

var fd = new faceDeformer();
fd.init(document.getElementById('webgl'));

// Pre-defined mask positions (from annotated image)
var maskPositions = [
  [26.4, 69.3], [24.5, 109.2], // ... 71 points
];
```

```javascript
// Load mask image
var maskImage = new Image();
maskImage.onload = function() {
  fd.load(maskImage, maskPositions, pModel);
  startTracking();
};
maskImage.src = 'mask.jpg';
```

```javascript
function startTracking() {
  ctrack.start(videoElement);
  drawLoop();
}

function drawLoop() {
  requestAnimationFrame(drawLoop);

  var positions = ctrack.getCurrentPosition();
  if (positions && ctrack.getConvergence() < 0.5) {
    // Substitute face with mask
    fd.draw(positions);
  }
}
```

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

### Start Face Tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Starts the face tracking process on the provided video element. This should be called after the video metadata is loaded and proportions are adjusted.

```javascript
ctrack.start(vid);
```

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

### Start Video and Face Tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/caricature.html

Starts the video playback and initiates the face tracking process using clm.tracker. This function should be called after the video element is ready.

```javascript
function startVideo() {
    // start video
    vid.play();
    // start tracking
    ctrack.start(vid);
    trackingStarted = true;
    // start drawing face grid
    drawGridLoop();
}
```

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

### Start Face Tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Begin tracking a face in a video element. This function requires the tracker to be initialized first.

```javascript
ctracker.start(videoElement);
```

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

### Initialize and Track Face in Image

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_image.html

Initializes the clmtrackr and starts tracking a face in a provided image. Requires an image element and optionally a bounding box for the face.

```javascript
var cc = document.getElementById('image').getContext('2d');
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
var img = new Image();
img.onload = function() {
    cc.drawImage(img,0,0,625, 500);
};
img.src = './media/franck_02159.jpg';
var ctrack = new clm.tracker({stopOnConvergence : true});
ctrack.init();
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild( stats.domElement );
var drawRequest;
function animateClean() {
    ctrack.start(document.getElementById('image'));
    drawLoop();
}
function animate(box) {
    ctrack.start(document.getElementById('image'), box);
    drawLoop();
}
function drawLoop() {
    drawRequest = requestAnimFrame(drawLoop);
    overlayCC.clearRect(0, 0, 720, 576);
    if (ctrack.getCurrentPosition()) {
        ctrack.draw(overlay);
    }
}
```

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

### Face Detection and Tracking Initialization

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/facedeform.html

Initializes the face tracker with a model and sets up the tracking process. It includes logic to start the video and drawing loops.

```javascript
fd.init(webgl_overlay);
if (trackingStarted) {
  ctrack.stop();
  ctrack.reset();
  ctrack.start(vid);
}
```

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

### Start Tracking with Bounding Box

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Initiate face tracking within a specified bounding box on a canvas or video element. If no box is provided, clmtrackr attempts to detect the face automatically.

```javascript
ctracker.start(videoElement, [x, y, width, height]);
```

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

### Initialize CLMTrackr and Emotion Model

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_genderdetection.html

Initializes the CLMTrackr with a pre-trained emotion model. Non-regularized vectors are set for better eyebrow motion detection. This code should be run before starting video capture.

```javascript
var ctrack = new clm.tracker({useWebGL : true});
ctrack.init(pModel);
var trackingStarted = false;
```

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

### Initialize clmtrackr with custom parameters

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_emotiondetection.html

Initializes the clm.tracker with WebGL enabled and customizes regularization for specific shape model vectors to improve eyebrow motion detection. This setup is crucial for accurate emotion tracking.

```javascript
pModel.shapeModel.nonRegularizedVectors.push(9);
pModel.shapeModel.nonRegularizedVectors.push(11);
```

```javascript
var ctrack = new clm.tracker({useWebGL : true});
ctrack.init(pModel);
```

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

### Initialize Video and WebGL Environment

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_deformation_video.html

Sets up video elements, checks for WebGL support, and defines fallback mechanisms for media playback.

```javascript
var vid = document.getElementById('videoel'); var vid_width = vid.width; var vid_height = vid.height; var overlay = document.getElementById('overlay'); var overlayCC = overlay.getContext('2d'); /*********** Setup of video/webcam and checking for webGL support **********/ function enablestart() { var startbutton = document.getElementById('startbutton'); startbutton.value = "start"; startbutton.disabled = null; } var insertAltVideo = function(video) { // insert alternate video if getUserMedia not available if (supports_video()) { if (supports_webm_video()) { video.src = "./media/franck.webm"; } else if (supports_h264_baseline_video()) { video.src = "./media/franck.mp4"; } else { return false; } fd.init(document.getElementById('webgl')); return true; } else return false; } var insertAltImage = function() { var canvas = document.getElementById('canvasel'); var cc = canvas.getContext('2d'); var img = new Image(); img.onload = function() { cc.drawImage(img, 0, 0, vid_width, vid_height); }; img.src = './media/franck_02221.jpg'; vid.className = "hide"; vid = canvas; canvas.className = "nohide"; var startbutton = document.getElementById('startbutton'); startbutton.onclick = function() { ctrack.start(vid); drawLoop(); } startbutton.value = "start"; startbutton.disabled = null; } function adjustVideoProportions() { // resize overlay and video if proportions are not 4:3 // keep same height, just change width var proportion = vid.videoWidth/vid.videoHeight; vid_width = Math.round(vid_height * proportion); vid.width = vid_width; overlay.width = vid_width; } // check whether browser supports webGL var webGLContext; var webGLTestCanvas = document.createElement('canvas'); if (window.WebGLRenderingContext) { webGLContext = webGLTestCanvas.getContext('webgl') || webGLTestCanvas.getContext('experimental-webgl'); if (!webGLContext || !webGLContext.getExtension('OES_texture_float')) { webGLContext = null; } } if (webGLContext == null) { alert("Your browser does not seem to support WebGL. Unfortunately this face deformation example depends on WebGL, so you'll have to try it in another browser. :("); } function gumSuccess( stream ) { // add camera stream if getUserMedia succeeded if ("srcObject" in vid) { vid.srcObject = stream; } else { vid.src = (window.URL && window.URL.createObjectURL(stream)); } vid.onloadedmetadata = function() { adjustVideoProportions(); fd.init(document.getElementById('webgl')); vid.play(); } vid.onresize = function() { adjustVideoProportions(); fd.init(document.getElementById('webgl')); if (trackingStarted) { ctrack.stop(); ctrack.reset(); ctrack.start(vid); } } } function gumFail() { // fall back to video if getUserMedia failed insertAltVideo(vid); document.getElementById('gum').className = "hide"; document.getElementById('nogum').className = "nohide"; alert("There was some problem trying to fetch video from your webcam, using a static image instead."); } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL; // check for camerasupport if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail); } else if (navigator.getUserMedia) { navigator.getUserMedia({video : true}, gumSuccess, gumFail); } else { insertAltImage(); //insertAltVideo(vid); document.getElementById('gum').className = "hide"; document.getElementById('nogum').className = "nohide"; alert("Your browser does not seem to support getUserMedia, using a static image instead."); } vid.addEventListener('canplay', enablestart, false);
```

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

### Initialize Camera and Track Face

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/caricature.html

Sets up camera access using getUserMedia and initializes the clm.tracker. Handles browser compatibility for camera access.

```javascript
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
// check for camerasupport
if (navigator.mediaDevices) {
    navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail);
} else if (navigator.getUserMedia) {
    navigator.getUserMedia({video : true}, gumSuccess, gumFail);
} else {
    insertAltVideo(vid);
    alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
```

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

### Initialize Model Parameters and GUI

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/modelviewer_pca.html

Sets up the initial parameter holder and dat.GUI controls for model manipulation.

```javascript
var canvasInput = document.getElementById('compare'); var cc = canvasInput.getContext('2d'); cc.fillStyle = "rgb(200,0,0)"; // check how many parameters var pnums = pModel.shapeModel.eigenValues.length; var parameterHolder = function() { for (var i = 0;i < pnums;i++) { this['component '+(i+1)] = 0; } }; var ph = new parameterHolder(); var gui = new dat.GUI(); var control = {}; var eig = 0; for (var i = 0;i < pnums;i++) { eig = Math.sqrt(pModel.shapeModel.eigenValues[i])*3 control['c'+(i+1)] = gui.add(ph, 'component '+(i+1), -eig, eig); } var params; var drawNew = function(value) { cc.clearRect(0,0,600,600); params = []; for (var i = 0;i < pnums;i++) { params.push(ph['component '+(i+1)]); } draw(document.getElementById('compare'), similarityTransforms.concat(params)); } for (var i = 0;i < pnums;i++) { control['c'+(i+1)].onChange(drawNew); } params = []; for (var i = 0;i < pnums;i++) { params.push(ph['component '+(i+1)]); } var similarityTransforms = [4,0,0,0]; //var similarityTransforms = [1, 0, -250, -450]; //var similarityTransforms = [1, 0, 200, 200]; var paramslength = params.length; var num_points = pModel.shapeModel.numPtsPerSample; var x,y; var i, path;
```

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

### Initialize Video and Webcam Access

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video.html

Configures the video element and attempts to access the user's webcam using getUserMedia, with fallbacks for unsupported browsers.

```javascript
var vid = document.getElementById('videoel'); var vid_width = vid.width; var vid_height = vid.height; var overlay = document.getElementById('overlay'); var overlayCC = overlay.getContext('2d'); /*********** Setup of video/webcam and checking for webGL support **********/ function enablestart() { var startbutton = document.getElementById('startbutton'); startbutton.value = "start"; startbutton.disabled = null; } var insertAltVideo = function(video) { // insert alternate video if getUserMedia not available if (supports_video()) { if (supports_webm_video()) { video.src = "./media/cap12_edit.webm"; } else if (supports_h264_baseline_video()) { video.src = "./media/cap12_edit.mp4"; } else { return false; } return true; } else return false; } function adjustVideoProportions() { // resize overlay and video if proportions of video are not 4:3 // keep same height, just change width var proportion = vid.videoWidth/vid.videoHeight; vid_width = Math.round(vid_height * proportion); vid.width = vid_width; overlay.width = vid_width; } function gumSuccess( stream ) { // add camera stream if getUserMedia succeeded if ("srcObject" in vid) { vid.srcObject = stream; } else { vid.src = (window.URL && window.URL.createObjectURL(stream)); } vid.onloadedmetadata = function() { adjustVideoProportions(); vid.play(); } vid.onresize = function() { adjustVideoProportions(); if (trackingStarted) { ctrack.stop(); ctrack.reset(); ctrack.start(vid); } } } function gumFail() { // fall back to video if getUserMedia failed insertAltVideo(vid); document.getElementById('gum').className = "hide"; document.getElementById('nogum').className = "nohide"; alert("There was some problem trying to fetch video from your webcam, using a fallback video instead."); } navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL; // set up video if (navigator.mediaDevices) { navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail); } else if (navigator.getUserMedia) { navigator.getUserMedia({video : true}, gumSuccess, gumFail); } else { insertAltVideo(vid); document.getElementById('gum').className = "hide"; document.getElementById('nogum').className = "nohide"; alert("Your browser does not seem to support getUserMedia, using a fallback video instead."); } vid.addEventListener('canplay', enablestart, false);
```

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

### Get Current Facial Model Positions

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Retrieve the coordinates of the facial features detected by the clmtrackr. This is useful for further processing or visualization.

```javascript
var positions = ctracker.getCurrentPosition();
```

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

### Handle `loadedmetadata` for Video

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Callback function for when the video's metadata is loaded. It adjusts video proportions and starts playing the video.

```javascript
vid.onloadedmetadata = function() {
    adjustVideoProportions();
    vid.play();
}
```

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

### Initialize CLM Visualization and GUI

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/classviewer.html

Sets up the canvas context, initializes the parameter holder for emotion models, and binds dat.GUI controls to update the visualization dynamically.

```javascript
var canvasInput = document.getElementById('compare'); var cc = canvasInput.getContext('2d'); cc.fillStyle = "rgb(200,0,0)"; var parameterHolder = function(emotions) { for (var key in emotions) { this[key] = 0.5; } }; var ph = new parameterHolder(emotionModel); var gui = new dat.GUI(); // TODO set params var params = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; var eigenSum = 0 for (var i = 0;i < pModel.shapeModel.eigenValues.length;i++) { eigenSum += pModel.shapeModel.eigenValues[i]; } var drawNew = function() { cc.clearRect(0,0,600,600); params = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; // TODO : calculate parameters from all emotions for (var key in emotionModel) { for (var p = 0;p < emotionModel[key]['coefficients'].length;p++) { params[p+2] += emotionModel[key]['coefficients'][p]*ph[key]*pModel.shapeModel.eigenValues[p+2]/eigenSum; } } draw(document.getElementById('compare'), similarityTransforms.concat(params)); } for (var key in emotionModel) { var keygui = gui.add(ph, key, -2000.0, 2000.0); keygui.onChange(drawNew); } var similarityTransforms = [5,0,0,0];
```

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

### Initialize tracker with a model

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Load a pre-built model into the tracker instance using the init method.

```javascript
ctracker.init(pModel);
```

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

### getScore() - Get Tracking Confidence Score

Source: https://context7.com/auduno/clmtrackr/llms.txt

Provides a confidence score (0-1) indicating the quality of the current facial model fit.

```APIDOC
## getScore()

### Description
Returns a score (0-1) indicating how well the current model fit resembles a face.

### Method
N/A (Function call)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
var score = ctrack.getScore();
```

### Response
#### Success Response
- **score** (number) - A float between 0 and 1 representing the tracking confidence.

#### Response Example
```json
0.85
```
```

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

### getCurrentParameters() - Get Model Parameters

Source: https://context7.com/auduno/clmtrackr/llms.txt

Fetches the current Point Distribution Model (PDM) parameters used for fitting the facial model.

```APIDOC
## getCurrentParameters()

### Description
Returns the current PDM (Point Distribution Model) parameters used for the facial model fit.

### Method
N/A (Function call)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
var params = ctrack.getCurrentParameters();
```

### Response
#### Success Response
- **params** (Array<number>) - An array of PDM parameters. The first four control rigid transformation (scale, rotation, translation), and the rest control shape deformation.

#### Response Example
```json
[scale_cos, scale_sin, translate_x, translate_y, param1, param2, ...]
```
```

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

### Manage Video Lifecycle and WebGL

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/facesubstitution.html

Handles video source selection, WebGL context initialization, and dynamic resizing of tracking elements.

```javascript
var insertAltVideo = function(video) { if (supports_video()) { if (supports_webm_video()) { video.src = "./media/cap13_edit2.webm"; } else if (supports_h264_baseline_video()) { video.src = "./media/cap13_edit2.mp4"; } else { return false; } fd.init(webgl_overlay); fd2.init(webgl_overlay2); return true; } else return false; } function adjustVideoProportions() { // resize overlay and video if proportions are not 4:3 // keep same height, just change width var proportion = vid.videoWidth/vid.videoHeight; vid_width = Math.round(vid_height * proportion); vid.width = vid_width; overlay.width = vid_width; webgl_overlay.width = vid_width; webgl_overlay2.width = vid_width; newcanvas.width = vid_width; videocanvas.width = vid_width; maskcanvas.width = vid_width; webGLContext.viewport(0,0,webGLContext.canvas.width,webGLContext.canvas.height); webGLContext2.viewport(0,0,webGLContext2.canvas.width,webGLContext2.canvas.height); } // check whether browser supports webGL var webGLContext; var webGLContext2; if (window.WebGLRenderingContext) { webGLContext = webgl_overlay.getContext('webgl') || webgl_overlay.getContext('experimental-webgl'); webGLContext2 = webgl_overlay2.getContext('webgl') || webgl_overlay2.getContext('experimental-webgl'); if (!webGLContext || !webGLContext.getExtension('OES_texture_float')) { webGLContext = null; } } if (webGLContext == null) { alert("Your browser does not seem to support WebGL. Unfortunately this face mask example depends on WebGL, so you'll have to try it in another browser. :("); }
```

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

### init() - Initialize Tracker with Model

Source: https://context7.com/auduno/clmtrackr/llms.txt

Initializes the tracker with a facial model. If no model is specified, uses the default `model_pca_20_svm` model.

```APIDOC
## init()

### Description
Initializes the tracker with a facial model. If no model is specified, uses the default `model_pca_20_svm` model.

### Method
`ctrack.init(model)`

### Parameters
#### Path Parameters
- **model** (object) - Optional - The facial model to use. If not provided, `model_pca_20_svm` is used.
  Available models: `model_pca_20_svm`, `model_pca_10_svm`, `model_spca_20_svm`, `model_spca_10_svm`, `model_pca_20_mosse`, `model_pca_10_mosse`.

### Request Example
```javascript
// Initialize with default model
ctrack.init();

// Initialize with specific model (after including model file)
ctrack.init(pModel);
```
```

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

### Set Default Face Deformation

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/facedeform.html

Applies the 'unwell' preset to facial deformation components as a default state. This code runs after the initial setup.

```javascript
for (var i = 0; i < pnums;i++) {
  ph['component '+(i+3)] = presets['unwell'][i];
}
```

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

### Initialize clm.tracker with parameters

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Pass an optional configuration object to the clm.tracker constructor to adjust tracking behavior.

```javascript
var ctracker = new clm.tracker({searchWindow : 15, stopOnConvergence : true});
```

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

### Create clm.tracker Instance

Source: https://context7.com/auduno/clmtrackr/llms.txt

Instantiate a new face tracker. Default settings are used if no configuration object is provided. Custom parameters can control tracking behavior, WebGL usage, and convergence.

```javascript
var ctrack = new clm.tracker();
```

```javascript
var ctrack = new clm.tracker({
  constantVelocity: true,
  searchWindow: 11,
  useWebGL: true,
  scoreThreshold: 0.5,
  stopOnConvergence: false,
  faceDetection: {
    useWebWorkers: true
  }
});
```

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

### Initialize Performance Statistics

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/caricature.html

Sets up and appends the Stats.js performance monitor to the DOM. It updates the stats on each 'clmtrackrIteration' event.

```javascript
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
document.getElementById('container').appendChild( stats.domElement );
document.addEventListener("clmtrackrIteration", function(event) {
    stats.update();
}, false);
```

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

### Get Model Convergence Value

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Obtain the mean movement of model points over the last 10 iterations. A value below 0.5 suggests the model has converged.

```javascript
var convergence = ctracker.getConvergence();
```

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

### Initialize Tracker with Model

Source: https://context7.com/auduno/clmtrackr/llms.txt

Initializes the tracker with a facial model. If no model is specified, it defaults to `model_pca_20_svm`. Ensure the model file is included before initialization.

```javascript
ctrack.init();
```

```javascript
ctrack.init(pModel);
```

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

### Get Current Facial Model Parameters

Source: https://github.com/auduno/clmtrackr/blob/dev/docs/reference.html

Retrieve the current parameters of the fitted facial model. These parameters can be used for analysis or to re-apply the model state.

```javascript
var parameters = ctracker.getCurrentParameters();
```

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

### Initialize CLMTrackr with WebGL

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Initializes the clm.tracker with WebGL enabled for performance. Ensure the video element and overlay canvas are present in the HTML.

```javascript
var vid = document.getElementById('videoel');
var vid_width = vid.width;
var vid_height = vid.height;
var overlay = document.getElementById('overlay');
var overlayCC = overlay.getContext('2d');
var ctrack = new clm.tracker({useWebGL : true});
ctrack.init();
```

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

### Emotion Detection Setup

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_genderdetection.html

Configures the CLMTrackr for emotion detection by specifying which shape model vectors should not be regularized. This is particularly useful for accurately tracking eyebrow movements.

```javascript
// set eigenvector 9 and 11 to not be regularized. This is to better detect motion of the eyebrows
pModel.shapeModel.nonRegularizedVectors.push(9);
pModel.shapeModel.nonRegularizedVectors.push(11);
```

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

### Google Analytics tracking

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_emotiondetection.html

Includes Google Analytics code to track page views and user interactions, ensuring proper analytics setup for the web application.

```javascript
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32642923-1']);
_gaq.push(['_trackPageview']);
(function() {
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(ga, s);
})();
```

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

### getCurrentPosition() - Get Face Landmark Positions

Source: https://context7.com/auduno/clmtrackr/llms.txt

Retrieves the current positions of all 71 facial landmarks. Returns an array of [x, y] coordinates or false if not currently tracking.

```APIDOC
## getCurrentPosition()

### Description
Returns the current positions of all 71 facial landmarks as an array of [x, y] coordinates. Returns `false` if not yet tracking.

### Method
N/A (Function call)

### Endpoint
N/A

### Parameters
None

### Request Example
```javascript
var positions = ctrack.getCurrentPosition();
```

### Response
#### Success Response
- **positions** (Array<Array<number>>) - An array of [x, y] coordinates for each landmark.

#### Response Example
```json
[[x1, y1], [x2, y2], ...]
```

#### Failure Response
- **false** - Returned if the tracker is not currently detecting a face.
```

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

### Handle User Media (getUserMedia)

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/clm_video_responses.html

Requests access to the user's webcam using `getUserMedia`. Includes success and failure callbacks to handle camera stream or fallback video.

```javascript
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
window.URL = window.URL || window.webkitURL || window.msURL || window.mozURL;
if (navigator.mediaDevices) {
    navigator.mediaDevices.getUserMedia({video : true}).then(gumSuccess).catch(gumFail);
} else if (navigator.getUserMedia) {
    navigator.getUserMedia({video : true}, gumSuccess, gumFail);
} else {
    insertAltVideo(vid);
    document.getElementById('gum').className = "hide";
    document.getElementById('nogum').className = "nohide";
    alert("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
```

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

### Initialize Facial Deformation Controls

Source: https://github.com/auduno/clmtrackr/blob/dev/examples/face_deformation_video.html

Sets up the UI elements and dat.GUI controls for adjusting facial parameters and toggling visual features.

```javascript
em = document.getElementById('container'); elem.setAttribute('class', 'hide'); // show facial deformation element elem = document.getElementById('webglcontainer'); elem.setAttribute('class', 'nohide'); // hide message element document.getElementById('score').setAttribute('class', 'hide'); // set up controls ph = new parameterHolder(); gui = new dat.GUI(); var guiSelect = gui.add(ph, 'presets', presets); var gui1 = gui.add(ph, 'param1', -50, 50).listen(); var gui2 = gui.add(ph, 'param2', -20, 20).listen(); var gui3 = gui.add(ph, 'param3', -20, 20).listen(); var gui4 = gui.add(ph, 'param4', -20, 20).listen(); var gui5 = gui.add(ph, 'param5', -20, 20).listen(); var gui6 = gui.add(ph, 'param6', -20, 20).listen(); var gui7 = gui.add(ph, 'param7', -20, 20).listen(); var gui8 = gui.add(ph, 'param8', -20, 20).listen(); var gui9 = gui.add(ph, 'param9', -20, 20).listen(); var gui10 = gui.add(ph, 'param10', -20, 20).listen(); var gui11 = gui.add(ph, 'param11', -20, 20).listen(); var gui12 = gui.add(ph, 'param12', -20, 20).listen(); var gui13 = gui.add(ph, 'param13', -20, 20).listen(); var gui14 = gui.add(ph, 'param14', -20, 20).listen(); var gui15 = gui.add(ph, 'param15', -20, 20).listen(); var gui16 = gui.add(ph, 'param16', -20, 20).listen(); var gui17 = gui.add(ph, 'param17', -20, 20).listen(); var gui18 = gui.add(ph, 'param18', -20, 20).listen(); var gui19 = gui.add(ph, 'param19', -20, 20).listen(); var gui20 = gui.add(ph, 'param20', -20, 20).listen(); var guiGrid = gui.add(ph, 'draw_grid', false); var guiFace = gui.add(ph, 'draw_face', true); gui1.onChange(drawDeformedFace); gui2.onChange(drawDeformedFace); gui3.onChange(drawDeformedFace); gui4.onChange(drawDeformedFace); gui5.onChange(drawDeformedFace); gui6.onChange(drawDeformedFace); gui7.onChange(drawDeformedFace); gui8.onChange(drawDeformedFace); gui9.onChange(drawDeformedFace); gui10.onChange(drawDeformedFace); gui11.onChange(drawDeformedFace); gui12.onChange(drawDeformedFace); gui13.onChange(drawDeformedFace); gui14.onChange(drawDeformedFace); gui15.onChange(drawDeformedFace); gui16.onChange(drawDeformedFace); gui17.onChange(drawDeformedFace); gui18.onChange(drawDeformedFace); gui19.onChange(drawDeformedFace); gui20.onChange(drawDeformedFace); guiSelect.onChange(switchDeformedFace); guiGrid.onChange(drawDeformedFace); guiFace.onChange(drawDeformedFace); drawDeformedFace(); }
```