223 lines
7.1 KiB
JSON
223 lines
7.1 KiB
JSON
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<title>Face tracker</title>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
#container {
|
||
|
|
position : relative;
|
||
|
|
}
|
||
|
|
|
||
|
|
#canvas {
|
||
|
|
position : absolute;
|
||
|
|
left : 0;
|
||
|
|
top : 0;
|
||
|
|
}
|
||
|
|
#title {
|
||
|
|
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
|
||
|
|
text-align: center;
|
||
|
|
color: #ddd;
|
||
|
|
font-size: 4ex;
|
||
|
|
}
|
||
|
|
#text {
|
||
|
|
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
|
||
|
|
text-align: center;
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 2ex;
|
||
|
|
}
|
||
|
|
#smalltext {
|
||
|
|
font-family: "Lucida Grande", Verdana, Arial, sans-serif;
|
||
|
|
text-align: center;
|
||
|
|
color: #ccc;
|
||
|
|
font-size: 1.6ex;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body style="background-color:#000;">
|
||
|
|
<script src="./js/libs/utils.js"></script>
|
||
|
|
<script src="../build/clmtrackr.js"></script>
|
||
|
|
<div id="content">
|
||
|
|
|
||
|
|
<div id="status" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;">not available
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<div id="container">
|
||
|
|
<video id="video" width="368" height="288" autoplay loop playsinline>
|
||
|
|
<!--
|
||
|
|
|
||
|
|
<source src="./media/franck.webm" type="video/webm"/>
|
||
|
|
<source src="./media/franck.mp4" type="video/mp4"/>
|
||
|
|
<source src="./media/alet.mp4" type="video/mp4"/>
|
||
|
|
-->
|
||
|
|
<source src="./media/franck.mp4" type="video/mp4"/>
|
||
|
|
</video>
|
||
|
|
<canvas id="canvas" width="368" height="288"></canvas>
|
||
|
|
</div>
|
||
|
|
<p style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;">Printing coordinates 15 to 70 in facial features:</p>
|
||
|
|
<p id="positions" style="font-family: 'Lucida Grande', Verdana, Arial, sans-serif; color: #ddd;font-size: 2ex;"></p>
|
||
|
|
<script>
|
||
|
|
var videoInput = document.getElementById('video');
|
||
|
|
|
||
|
|
var ctracker = new clm.tracker();
|
||
|
|
var counter = 0;
|
||
|
|
ctracker.init();
|
||
|
|
ctracker.start(videoInput);
|
||
|
|
|
||
|
|
function positionLoop() {
|
||
|
|
requestAnimFrame(positionLoop);
|
||
|
|
var positions = ctracker.getCurrentPosition();
|
||
|
|
// do something with the positions ...
|
||
|
|
// print the positions
|
||
|
|
var positionString = "";
|
||
|
|
var positionFace = '/trckr/frame '+counter+" ";
|
||
|
|
if (positions) {
|
||
|
|
for (var p = 30;p < 45;p++) {
|
||
|
|
positionString += "featurepoint "+p+" : ["+positions[p][0].toFixed(2)+","+positions[p][1].toFixed(2)+"]<br/>";
|
||
|
|
positionFace += positions[p][0].toFixed(2)+" "+positions[p][1].toFixed(2)+" ";
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
document.getElementById('positions').innerHTML = positionString;
|
||
|
|
_WS.s.send(positionFace);
|
||
|
|
counter +=1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
positionLoop();
|
||
|
|
|
||
|
|
var canvasInput = document.getElementById('canvas');
|
||
|
|
var cc = canvasInput.getContext('2d');
|
||
|
|
function drawLoop() {
|
||
|
|
requestAnimFrame(drawLoop);
|
||
|
|
cc.clearRect(0, 0, canvasInput.width, canvasInput.height);
|
||
|
|
ctracker.draw(canvasInput);
|
||
|
|
}
|
||
|
|
drawLoop();
|
||
|
|
</script>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
<!-- LJ style WS : A nettoyer ! -->
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
<!--
|
||
|
|
var LJ = 'ws://xrkia.org:8081/'
|
||
|
|
var LJ = 'ws://laser.teamlaser.fr:8081/'
|
||
|
|
var LJ = 'ws://localhost:8081/'
|
||
|
|
var LJ = 'ws://localhost:9001/'
|
||
|
|
-->
|
||
|
|
var LJ = 'ws://localhost:9001/'
|
||
|
|
var _WS = {
|
||
|
|
uri: LJ,
|
||
|
|
ws: null,
|
||
|
|
|
||
|
|
init : function (e) {
|
||
|
|
_WS.s = new WebSocket(_WS.uri);
|
||
|
|
_WS.s.onopen = function (e) { _WS.onOpen(e); };
|
||
|
|
_WS.s.onclose = function (e) { _WS.onClose(e); };
|
||
|
|
_WS.s.onmessage = function (e) { _WS.onMessage(e); };
|
||
|
|
_WS.s.onerror = function (e) { _WS.onError(e); };
|
||
|
|
},
|
||
|
|
|
||
|
|
onOpen: function () {
|
||
|
|
var divtext = document.getElementById('status');
|
||
|
|
divtext.innerHTML="";
|
||
|
|
divtext.innerHTML= "Connected";
|
||
|
|
},
|
||
|
|
|
||
|
|
onClose: function () {
|
||
|
|
_WS.showout('DISCONNECTED');
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
onMessage: function (e) {
|
||
|
|
var res = e.data.split(" ");
|
||
|
|
//console.log(e.data)
|
||
|
|
//console.log(res[0].substring(0,6))
|
||
|
|
//console.log(res)
|
||
|
|
//console.log(res[0].slice(1))
|
||
|
|
var divtext = document.getElementById('status');
|
||
|
|
var divtextp = document.getElementById('players');
|
||
|
|
|
||
|
|
|
||
|
|
switch (res[0].substring(0,6)) {
|
||
|
|
|
||
|
|
case "/statu":
|
||
|
|
divtext.innerHTML="OCS-2";
|
||
|
|
break;
|
||
|
|
case "/playe":
|
||
|
|
//divtext.innerHTML="OCS-2 ("+res[1]+" player(s))";
|
||
|
|
//divtextp.innerHTML=" ("+res[1]+" player(s))";
|
||
|
|
divtext.innerHTML="OCS-2 "+res[1];
|
||
|
|
divtextp.innerHTML=" "+res[1];
|
||
|
|
//console.log(res)
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
//console.log(e);
|
||
|
|
//console.log(res[0].slice(1))
|
||
|
|
//console.log(document.getElementById(res[0].slice(1)));
|
||
|
|
//console.log(res[0].slice(1)+" "+res[1])
|
||
|
|
//let documentX = document.getElementById(res[0].slice(1));
|
||
|
|
//documentX.value=res[1];
|
||
|
|
|
||
|
|
//document.getElementById(res[0].slice(1)).value = res[1];
|
||
|
|
document.getElementById(res[0].slice(1)).setAttribute('value',res[1]);
|
||
|
|
//document.getElementById(res[0].slice(1)).setValue(res[1],true);
|
||
|
|
document.getElementById(res[0].slice(1)).setValue(res[1],false);
|
||
|
|
|
||
|
|
//console.log(documentX.value)
|
||
|
|
//console.log(document.getElementById(res[0].slice(1)));
|
||
|
|
_WS.showin(e.data);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
onError: function (e) {
|
||
|
|
_WS.showin('<span style="color: red;">ERROR:</span> ' + e.data);
|
||
|
|
},
|
||
|
|
|
||
|
|
showin: function (message) {
|
||
|
|
var divtext = document.getElementById('status');
|
||
|
|
divtext.innerHTML="";
|
||
|
|
divtext.innerHTML= message.toString();
|
||
|
|
},
|
||
|
|
|
||
|
|
showout: function (message) {
|
||
|
|
var divtext = document.getElementById('status');
|
||
|
|
divtext.innerHTML="";
|
||
|
|
divtext.innerHTML= message.toString();
|
||
|
|
},
|
||
|
|
|
||
|
|
showstatus: function (message) {
|
||
|
|
var divtext = document.getElementById('status');
|
||
|
|
divtext.innerHTML="";
|
||
|
|
divtext.innerHTML= message.toString();
|
||
|
|
},
|
||
|
|
|
||
|
|
send: function (message) {
|
||
|
|
if (!message.length) {
|
||
|
|
alert('Empty message not allowed !');
|
||
|
|
} else {
|
||
|
|
_WS.showout(message);
|
||
|
|
_WS.s.send(message);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
close: function () {
|
||
|
|
_WS.showout('GOODBYE !');
|
||
|
|
_WS.s.close();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
window.addEventListener('load', _WS.init, false);
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|