<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Face tracker</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
<video id="webcam" width="400" height="300" preload="auto" loop=""></video>
<input class="btn" type="button" value="wait, loading video" disabled="disabled" onclick="startVideo()" id="startbutton">
<script src='http://juancgonzalez.com/lab/js/vendor/clmtrackr.min.js'></script>
<script src='https://webrtc.github.io/adapter/adapter-latest.js'></script>
<script src='http://juancgonzalez.com/lab/js/vendor/model_pca_20_svm.js'></script>
<script src='https://auduno.github.io/clmtrackr/js/utils.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/1cgonza/face-tracker-zLFxA */
#webcam {
background-color: #666;
}
#canvas {
position: absolute;
}
#startbutton {
display: block;
font-size: 50px;
}
/*Downloaded from https://www.codeseek.co/1cgonza/face-tracker-zLFxA */
/*
* CLMTRACKR
* https://github.com/auduno/clmtrackr
* a simplified version of their example: https://auduno.github.io/clmtrackr/clm_video.html
*/
var vid = document.getElementById('webcam');
var overlay = document.getElementById('canvas');
var overlayCC = overlay.getContext('2d');
var ctrack = new clm.tracker({
useWebGL: true
});
ctrack.init(pModel);
function enablestart() {
var startbutton = document.getElementById('startbutton');
startbutton.value = "start";
startbutton.disabled = null;
}
// // check for camerasupport
if (navigator.getUserMedia) {
// set up stream
var videoSelector = {
video: true
};
if (window.navigator.appVersion.match(/Chrome\/(.*?) /)) {
var chromeVersion = parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
if (chromeVersion < 20) {
videoSelector = "video";
}
};
navigator.getUserMedia(videoSelector, function(stream) {
if (vid.mozCaptureStream) {
vid.mozSrcObject = stream;
} else {
vid.src = (window.URL && window.URL.createObjectURL(stream)) || stream;
}
vid.play();
}, function() {
console.log("There was some problem trying to fetch video from your webcam, using a fallback video instead.");
});
} else {
console.log("Your browser does not seem to support getUserMedia, using a fallback video instead.");
}
vid.addEventListener('canplay', enablestart, false);
function startVideo() {
// start video
vid.play();
// start tracking
ctrack.start(vid);
// start loop to draw face
drawLoop();
}
function drawLoop() {
requestAnimFrame(drawLoop);
overlayCC.clearRect(0, 0, 400, 300);
if (ctrack.getCurrentPosition()) {
ctrack.draw(overlay);
}
}