1.0.0 • Public • Published

Anura Web Core TensorFlow.js Face Tracker Plugin


The library is designed to work as a face tracker plugin for Anura Web Core. It is a wrapper around Tensorflow.js face tracker and is intended to mask any complexities involved in configuring face trackers separately. It can simply either be used as a plugable face tracker for Anura Web Core or as a stand-alone Deepaffex™ compatible face tracker.


The main way that we ship Anura Web Core TensorFlow.js Face Tracker Plugin code to NPM is as ECMAScript modules with ECMAScript 2022, the 13th edition syntax. This allows developers to take advantage of modern JavaScript features and have greater control over what they ship to their end users.

You can use either of the following methods to add the library to your project:

Package managers

# yarn
yarn add @nuralogix.ai/awc-tfjs-face-tracker

# npm
npm install @nuralogix.ai/awc-tfjs-face-tracker

Script tag

You can load them from popular CDNs such as skypack, JsDelivr and Unpkg.

    <script type="module">
        import * as tfjs from 'https://cdn.skypack.dev/@nuralogix.ai/awc-tfjs-face-tracker@1.0.0';
        // .
        // The rest of your code
        // .
        // .
        // Let's assume that you have already imported ImageSource
        imageSource = new ImageSource({
            // Other Anura Web Core config object(s)...
            faceTracker: { worker: tfjs, options: {} } }

Stand-alone Deepaffex™ compatible Face Tracker

If you would like to use this library without using Anura Web Core

    <script type="module">
        import { workerCode } from 'https://cdn.skypack.dev/@nuralogix.ai/awc-tfjs-face-tracker@1.0.0';
        const blob = new Blob([workerCode], { type: 'text/javascript' });
        const options = {'TfjsFaceTracker', type: 'module'};
        const worker = new Worker(
            new URL(URL.createObjectURL(blob), import.meta.url),
        // Initalize the worker
        worker.postMessage(['INIT', {}]);
        // hanlde messages received from the worker
        worker.onmessage = (e) => {
            const [action, data] = e.data;
            if (data) {
                if (action === 'READY') {
                    // When the worker is ready
                    console.log('READY', 'version', data);
                if (action === 'WARMED_UP') {
                    // The time of first call to face tracker also includes the compilation time
                    // of WebGL shader programs for the model.
                    // After the first call the shader programs are cached,
                    // which makes the subsequent calls much faster.
                    console.log('WARMED_UP', data.success, data.timestamp);
                if (action === 'MESSAGE') {
                    // Any log, info or error message
                    console.log('MESSAGE', data);
                if (action === 'FT_READY_NEXT_FRAME') {
                    // isReady and timestamp show if face tracker is ready
                    // to accept new frames
                    console.log('FT_READY_NEXT_FRAME', data.isReady, data.timestamp);
                if (action === 'FACIAL_LANDMARKS') {
                    // When the images is processed and the facial landmarks are available
                    console.log('FACIAL_LANDMARKS', data);
                if (action === 'DESTROYED') {
                    // When the worker received a destroy action
                    console.log('DESTROYED', data);
        // Suppose that we already have an ImageData and you want to pass it to worker
        // for processing
        const nextFrame = {
          height: imageData.height,
          width: imageData.width,
          buffer: imageData.data.buffer,
          frameNumber: metadata.presentedFrames,
        worker.postMessage(['GET_FACIAL_LANDMARKS', nextFrame], [nextFrame.buffer]);

        // If you want to destroy the worker:
        // If you pass an optional string then it will be return on DESTROYED event
        // This is useful when you have multiple intances of the worker and what to
        // distinguish them by an ID 
        worker.postMessage(['DESTROY', 'optional-string']);


npm i @nuralogix.ai/awc-tfjs-face-tracker

DownloadsWeekly Downloads






Unpacked Size

680 kB

Total Files


Last publish


  • hamedamin
  • nuralogix