topical media & game development

talk show tell print

mobile-query-three-plugins-headtrackr-tquery.headtrackr.js / js



  
creator of tQuery.Headtrackr
returns: {tQuery.Headtrackr} the created instance

  
  tQuery.registerStatic('createHeadtrackr', function(opts){
          return new tQuery.Headtrackr(opts);
  })
  
  
Wrapper on top of headtrackr.js - github.com/auduno/headtrackr

  
  tQuery.registerStatic('Headtrackr', function(opts){
          // handle default options
          this._opts        = opts        = tQuery.extend(opts, {
                  width                : 320,
                  height                : 240,
                  headtrackrOpts        : {
                          calcAngles        : true
                  }
          });
          
          // bind facetrackingEvent
          this._facetrackingEventCb        = this._facetrackingEventCb.bind(this);
          document.addEventListener("facetrackingEvent", this._facetrackingEventCb);
  
          
          // create videoInput element to read the webcam
          var videoInput        = document.createElement('video');
          videoInput.setAttribute('autoplay');
          videoInput.setAttribute('loop');
          videoInput.setAttribute('width'        , this._opts.width.toString());
          videoInput.setAttribute('height', this._opts.height.toString());
          videoInput.style.display        = 'none';
          this._videoInput        = videoInput;
  
          // create canvasInput element to read the webcam
          var canvasInput        = document.createElement('canvas');
          canvasInput.setAttribute('width' , this._opts.width.toString());
          canvasInput.setAttribute('height', this._opts.height.toString());
          canvasInput.style.display        = 'none';
          this._canvasInput        = canvasInput;
  
          // create the headtracker itself
          this._htracker        = new headtrackr.Tracker(opts.headtrackrOpts);
          this._htracker.init(videoInput, canvasInput);
  });
  
  // make it eventable
  tQuery.MicroeventMixin(tQuery.Headtrackr.prototype);
  
  
detructor

  
  tQuery.Headtrackr.prototype.destroy = function() {
          // stop converting headtrackr.js event to normalized one 
          document.removeEventListener("facetrackingEvent", this._facetrackingEventCb);
          // stop head tracking
          this.stop();
          // disable debug view
          this.debugView(false);
  };
  
  
////////////////////////////////////////////////////////////////////////////

// //
////////////////////////////////////////////////////////////////////////////

start head tracking
returns: {tQuery.Headtrackr} for chained API

  
  tQuery.Headtrackr.prototype.start = function(){
          this._htracker.start();
          return this;
  };
  
  
stop head tracking
returns: {tQuery.Headtrackr} for chained API

  
  tQuery.Headtrackr.prototype.stop = function(){
          this._htracker.stop();
          return this;
  };
  
  
Reset the headtracker
returns: {tQuery.Headtrackr} for chained API

  
  tQuery.Headtrackr.prototype.reset = function() {
          // reset the head tracker
          var htracker        = this._htracker;
          htracker.stop();
          htracker.start();
          return this;
  };
  
  
////////////////////////////////////////////////////////////////////////////

// //
////////////////////////////////////////////////////////////////////////////

tQuery.Headtrackr.prototype._facetrackingEventCb = function(headtrackrEvent){ var canvasHalfW = this._opts.width/2; var canvasHalfH = this._opts.width/2; // build the event to notify var event = {}; event.x = - (headtrackrEvent.x-canvasHalfW)/canvasHalfW; event.y = - (headtrackrEvent.y-canvasHalfH)/canvasHalfH; event.width = headtrackrEvent.width / canvasHalfW; event.height = headtrackrEvent.height / canvasHalfH; event.angle = headtrackrEvent.angle + Math.PI/2; event.headtrackrEvent = headtrackrEvent; // dispatch the event this.dispatchEvent('found', event); };
////////////////////////////////////////////////////////////////////////////

// Handle debugView //
////////////////////////////////////////////////////////////////////////////

enable/disable the debug view
parameter: {Boolean|undefined} onOff if true, enable it, if false disable it, if undefined, getter
returns: {tQuery.Headtrackr} for chained API

  
  tQuery.Headtrackr.prototype.debugView = function(onOff){
          if( onOff === undefined )        return this._debugViewCallback        ? true : false;
          if( onOff === true ){
                  // if already on, do nothing
                  if( this.debugView() === true )        return;
                  // create the element
                  var canvasView                = document.createElement('canvas');
                  this._canvasView        = canvasView;
                  // hook the events
                  this._debugViewCallback= this._debugViewCallback.bind(this);
                  document.addEventListener("facetrackingEvent", this._debugViewCallback);
                  // set attribute
                  canvasView.setAttribute('width' , this._opts.width.toString());
                  canvasView.setAttribute('height', this._opts.height.toString());
                  // put it on topleft absolute
                  canvasView.style.position        = 'absolute';
                  canvasView.style.top                = '0px';
                  canvasView.style.left                = '0px';
                  // mirror horizontal - needed as it is from the webcam        
                  canvasView.style.transform        = 'scaleX(-1)'
                  canvasView.style.webkitTransform= 'scaleX(-1)'
                  canvasView.style.mozTransform        = 'scaleX(-1)'
                  canvasView.style.oTransform        = 'scaleX(-1)'
                  // handle zIndex to be above the reset
                  canvasView.style.zIndex                = '1';
                  document.body.appendChild(canvasView);
          }else if( onOff === false ){
                  // if already on, do nothing
                  if( this.debugView() === false )        return;
                  // removeEventListener
                  document.removeEventListener("facetrackingEvent", this._debugViewCallback);
                  this._debugViewCallback= null;
                  // remove the canvas
                  var canvasView        = this._canvasView;
                  canvasView.parentNode.removeChild( canvasView );
                  this._canvasView= null;
          }else        console.assert(false);
          
          return this;        // for chained API
  };
  
  
[_debugViewCallback description]
parameter: {[type]} event [description]
returns: {[type]} [description]

  
  tQuery.Headtrackr.prototype._debugViewCallback = function(event){
          // sanity check
          console.assert( this.debugView() === true );
          // clear canvas with videoInput
          var context = this._canvasView.getContext('2d');
          context.drawImage(this._videoInput, 0, 0, this._opts.width, this._opts.height);
  
          // once we have stable tracking, draw rectangle
          context.save();
          context.translate(event.x, event.y)
          context.rotate(event.angle - Math.PI/2);
  
          context.strokeStyle        = '#00CC00';
          context.strokeRect(-Math.floor(event.width/2), -Math.floor(event.height/2)
                          , event.width, event.height);
          context.restore();
  };
  
  


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.