@nuralogix.ai/awc-tfjs-face-tracker
v1.0.0
Published
Anura Web Core TensorFlow.js Face Tracker Plugin
Downloads
5
Readme
Anura Web Core TensorFlow.js Face Tracker Plugin
Description
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.
Installation
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-trackerScript tag
You can load them from popular CDNs such as skypack, JsDelivr and Unpkg.
<html>
<body>
<script type="module">
import * as tfjs from 'https://cdn.skypack.dev/@nuralogix.ai/[email protected]';
// .
// 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: {} } }
});
</script>
</body>
</html>Stand-alone Deepaffex™ compatible Face Tracker
If you would like to use this library without using Anura Web Core
<html>
<body>
<script type="module">
import { workerCode } from 'https://cdn.skypack.dev/@nuralogix.ai/[email protected]';
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),
options
);
// 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);
worker.terminate();
URL.revokeObjectURL(worker);
}
}
}
// 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,
timestamp_ms,
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']);
</script>
</body>
</html>