This simplified library gives position (up/down/lest/right) of π head/face including its magnitude/degree with the :six: faical keypoints (x,y). This is backed by MediaPipe. The whole library and its dependencies are just in KBs. The memory footprint is very low on realtime environment and can run on very low resources. There are options to ποΈ control the time between inferences which reduces unnecessary computations.
π Demo
Check the live demo.
π Usage
Just include this JS dependency. Doesnβt need JQuery.
<script src="https://cdn.jsdelivr.net/gh/SushantGautam/HeadPos@v1.0/headpos.js"></script>
<script>
// define a callback to handle the results
OnResults = function (rs) {console.log(rs)}
// initlialize HeadPos. Other optional congifs can also be added as required.
let headpos = HeadPos.Init(OnResults);
</script>
π Results
Callback will get a dictionary with:
{
HorizontalDirection: "Right"
HorizontalMagnitude: 0.9363492190335054
VerticalDirection: "Down"
VerticalMagnitude: 1.3243558415961285,
pose: {"..."}
}
pose contains a dict with 6 key points (x,y) of right eye, left eye, nose tip, mouth center, right ear tragion, and left ear tragion and a reference to the canvas.
π Methods
- InitHeadPos Initialize the instance. This library has a singleton implementation.
let headpos = HeadPos.Init(
HeadPosOnResults, //callback on log value
HeadPosDIV = document.getElementById('headpos'), // div to render headpos
interval = 100, // time in ms to wait between callbacks, 0 is as fast as possible
minDetectionConfidence =0.5, //Face Recognition threshold
model = "short", // short-range model that works best for faces within 2 meters from the camera
selfieMode = false, //invert the camera
);
You can define a div/p element as:
<div id='headpos'></div>
and pass the element to HeadPosDIV. The HeadPos output canvas will be prepended inside the given element. If nothing is passed, the canvas will be appended to the root of HTML.
- updateInterval Dynamically udate time in ms to wait between callbacks.
headpos.updateInterval(1000)
- pause Pause the inference. Canvas rendering will also pause.
headpos.pause()
- resume Resume the inference after pause. Canvas rendering will also resume.
headpos.resume()
π Improving
PRs, issues, ideas or suggestions are highly welcome. π