| Server IP : 162.214.74.102 / Your IP : 216.73.217.114 Web Server : Apache System : Linux dedi-4363141.lrsys.com.br 3.10.0-1160.119.1.el7.tuxcare.els25.x86_64 #1 SMP Wed Oct 1 17:37:27 UTC 2025 x86_64 User : lrsys ( 1015) PHP Version : 5.6.40 Disable Function : exec,passthru,shell_exec,system MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /home/lrsys/www/lrsys_apps/marisol/AR/three.js/experiments/face-tracking/ |
Upload File : |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tracking.js - face alignment with camera</title>
<!-- include tracking.js lbf face tracking -->
<script src='vendor/tracking.js/build/tracking.js'></script>
<script src='vendor/tracking.js/build/data/face-min.js'></script>
<script src='vendor/tracking.js/src/alignment/training/Landmarks.js'></script>
<script src='vendor/tracking.js/src/alignment/training/Regressor.js'></script>
<!-- include local tracking.js utils -->
<script src='js/tracking-lbf-debug.js'></script>
<script src='js/tracking-lbf-landmark-features.js'></script>
<script src='js/tracking-lbf-landmarks-smoother.js'></script>
<!-- include dat.gui -->
<script src='../vendor/three.js/examples/js/libs/dat.gui.min.js'></script>
</head>
<body>
<style>
#videoWebcam {
position: absolute;
top: 0px;
left: 0px;
width : 320px;
height: auto;
zoom: 3;
}
#canvasDetection {
position: absolute;
top: 0px;
left: 0px;
width : 320px;
height: auto;
zoom: 3;
}
</style>
<!-- FOR VIDEO SOURCE -->
<!-- <video id='videoWebcam' width="368" height="288" autoplay loop>
<source src="./assets/franck.mp4" type="video/mp4"/>
<source src="./assets/franck.ogv" type="video/ogg"/>
</video> -->
<!-- FOR WEBCAM SOURCE -->
<video id="videoWebcam" preload autoplay loop muted></video>
<canvas id="canvasDetection"></canvas>
<script>
var canvasDetection = document.querySelector('#canvasDetection');
canvasDetection.width = 320
canvasDetection.height = 240
var context = canvasDetection.getContext('2d');
// tracking.LBF.maxNumStages = 10
var tracker = new tracking.LandmarksTracker();
tracker.setEdgesDensity(0.18);
tracker.setInitialScale(2.4);
tracker.setStepSize(0.8);
var faceDebug = new tracking.LBF.Debug(canvasDetection)
var landmarkSmoother = new tracking.LBF.LandmarksSmoother(0.4)
var videoElement = document.querySelector('#videoWebcam')
// FOR VIDEO SOURCE
// tracking.track(videoElement, tracker)
// FOR WEBCAM SOURCE
tracking.track(videoElement, tracker, { camera: true })
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
var parameters = {
boundinBoxVisible : true,
}
var gui = new dat.GUI();
gui.add(tracker, 'edgesDensity', 0.1, 0.5).step(0.01).listen();
gui.add(tracker, 'initialScale', 1.0, 10.0).step(0.1).listen();
gui.add(tracker, 'stepSize', 0.5, 5).step(0.1).listen();
gui.add(landmarkSmoother, 'lerpFactor', 0.0, 1).listen().name('Landmarks Lerp');
gui.add(parameters, 'boundinBoxVisible').listen().name('bounding box');
Object.keys(tracking.LBF.LandmarkFeatures).forEach(function(featureLabel){
gui.add(faceDebug.parameters, featureLabel + 'Visible').listen().name(featureLabel);
})
//////////////////////////////////////////////////////////////////////////////
// Code Separator
//////////////////////////////////////////////////////////////////////////////
tracker.on('track', function(event) {
// clear debug canvasDetection
context.clearRect(0,0,canvasDetection.width, canvasDetection.height);
if( event.data === undefined ) return;
event.data.faces.forEach(function(boundingBox, faceIndex) {
var faceLandmarks = event.data.landmarks[faceIndex]
if( parameters.boundinBoxVisible === true ){
faceDebug.displayFaceBoundingBox(boundingBox, faceIndex)
}
// lerpFacesLandmarks
landmarkSmoother.update(faceLandmarks)
// display each faceLandmarks
faceDebug.displayLandmarksDot(landmarkSmoother.lerpedLandmarks)
});
})
</script></body>