Headtrackr Test

by Dan Shahin

HTML

<script src="http://alexhancock.github.io/street-facing/deps/headtrackr.js"></script>
<button id="calibrate">recalibrate</button>
<br>
<div id="player"></div>
<br>
<canvas id="inputCanvas" width="320" height="240"></canvas>
<video id="inputVideo" autoplay loop style="display:none"></video>

JavaScript

var x = null; //head x-axis value
var c = localStorage.c || null; //center
var m = localStorage.m || null; //max delta deviation from center
console.log(c, m);

var messagep;

{
    // create element and attach to body
    var d = document.createElement('div'),
        d2 = document.createElement('div'),
        p = document.createElement('p');

    d.style.left = "20%";
    d.style.right = "20%";
    d.style.top = "30%";
    d.style.fontSize = "36px";
    d.style.color = "#777";
    d.style.position = "absolute";
    d.style.fontFamily = "Helvetica, Arial, sans-serif";
    d.style.zIndex = '100002';

    d2.style.marginLeft = "auto";
    d2.style.marginRight = "auto";
    d2.style.width = "100%";
    d2.style.textAlign = "center";
    d2.style.color = "#fff";
    d2.style.backgroundColor = "#444";
    d2.style.opacity = "0.8";

    d2.appendChild(p);
    d.appendChild(d2);
    document.body.appendChild(d);

    messagep = p;
}



document.addEventListener('headtrackrStatus', function (event) {
    if (event.status == "getUserMedia") {
        console.log("getUserMedia is supported!");
    } else if (event.status == "found") {
        setTimeout(function () {
            console.log("c", c);
            if (c === null) {
                messagep.innerHTML = "Now you need to calibrate in order to pause and resume videos with headmovement!<br> Click here when ready to start.";
                var fn = function () {
                    messagep.removeEventListener("click", fn);
                    calibrate();
                }
                messagep.addEventListener("click", fn);
            } else addYoutube();
        }, 700);
    }
});

if (c !== null) c = parseInt(c);
if (m !== null) m = parseInt(m);

var cma = c + m; //max positive deviation
var cmi = c - m; //max negative deviation

{
    var _cma = cma;
    var _cmi = cmi;
    cma = Math.max(_cma, _cmi);
    cmi = Math.min(_cma, _cmi);
}

var player;
var playerState = 0;
var playerLoaded = 0;

var color =...