WebCam Head Tracking (headtrackr)

Created a nice software using SpiderBasic ? Post you link here !
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

WebCam Head Tracking (headtrackr)

Post by eddy »

HowTo:
  1. Check if your webcam is on
  2. Run the program
  3. Chrome or firefox will ask you to activate webcam on your web page

Code: Select all

Procedure HeadTracking(headtrackr)
  
  !$('<video id="inputVideo" autoplay loop></video>').appendTo('body');
  !$('<canvas id="compare" width="320" height="240" style="display:none"></canvas>').appendTo('body');
  !$('<canvas id="overlay" width="320" height="240" style="display:none"></canvas>')
  !.css({
  !  position : 'absolute'
  !, top : '0px'
  !, zIndex : '100001'
  !, display : 'block'
  !})
  !.appendTo('body');
  
  
  !var videoInput = $('#inputVideo').get(0);
  !var canvasInput = $('canvas').get(0);
  !var overlayContext= $('#overlay').get(0).getContext('2d');
  
  !var htracker = new v_headtrackr.Tracker({calcAngles : true, ui : true, headPosition : true});
  !htracker.init(videoInput, canvasInput);
  !htracker.start();
  
  
  !document.addEventListener("facetrackingEvent", function( event ) {
  !  // clear canvas
  !  overlayContext.clearRect(0,0,320,240);
  !  // once we have stable tracking, draw rectangle
  !  if (event.detection == "CS") {    
  !  overlayContext.translate(event.x, event.y)
  !  overlayContext.rotate(event.angle-(Math.PI/2));
  !  overlayContext.strokeStyle = "#00CC00";
  !  overlayContext.strokeRect((-(event.width/2)) >> 0, (-(event.height/2)) >> 0, event.width, event.height);
  !  overlayContext.rotate((Math.PI/2)-event.angle);
  !  overlayContext.translate(-event.x, -event.y);
  !  }
  !});
EndProcedure

Procedure UsePlugin(Plugin.s, Path.s, *FunctionUsingPlugin, EnforceDefine=#False)
  !cfg={ enforceDefine: v_EnforceDefine, paths: {} };
  !cfg.paths[v_Plugin]=v_Path;
  !requirejs.config(cfg);
  
  !require([v_Plugin], function(plug) { 
  !   p_FunctionUsingPlugin(plug);  
  !});
EndProcedure


UsePlugin("headtrackr", "//rawgit.com/auduno/headtrackr/master/headtrackr.min", @HeadTracking())
Last edited by eddy on Wed Apr 01, 2015 2:54 am, edited 2 times in total.
User avatar
eddy
Posts: 124
Joined: Thu Mar 27, 2014 8:34 am

Re: WebCam Head Tracking (headtrackr)

Post by eddy »

here is a new version.
I converted some js code into SB

Code: Select all

; ******************************
; utility functions
; ******************************

Procedure.i GadgetElement(Gadget, UseJquery.b=#True)
  Protected gadgetObject=GadgetID(Gadget) 
  !return (v_gadgetObject && v_gadgetObject.div)? v_UseJquery? $(v_gadgetObject.div):v_gadgetObject.div:null; 
EndProcedure

Procedure UsePlugin(Plugin.s, Path.s, *FunctionUsingPlugin, EnforceDefine=#False)
  !cfg={ enforceDefine: v_EnforceDefine, paths: {} };
  !cfg.paths[v_Plugin]=v_Path;
  !requirejs.config(cfg);
  
  !require([v_Plugin], function(plug) { 
  !   p_FunctionUsingPlugin(plug);  
  !});
EndProcedure

; ******************************
; head tracking showcase 
; ******************************

Enumeration
  #win
  #compare
  #overlay
EndEnumeration

Procedure DrawOverlay(x,y,w,h,anchorX,anchorY,angle.f,detection$)
  Protected output=CanvasOutput(#overlay)
  StartDrawing(output)
  ;// clear canvas
  !ctx=v_output.canvas.getContext('2d');
  !ctx.clearRect(0,0,320,240);
  ;// once we have stable tracking, draw rectangle
  If detection$ = "CS"
    !ctx.translate(v_x,v_y);
    !ctx.rotate(v_angle);
    DrawingMode(#PB_2DDrawing_Outlined)  
    Box(anchorX,anchorY,w,h,$00CC00)  
    !ctx.rotate(-v_angle);
    !ctx.translate(-v_x,-v_y);
  EndIf     
  StopDrawing()
EndProcedure

Procedure HeadTracking(headtrackr)
  If OpenWindow(#win, 0, 0, 0, 0, "Webcam Head Tracker", #PB_Window_Background)
    CanvasGadget(#compare, 150, 150, 320, 240)
    CanvasGadget(#overlay, 150, 150, 320, 240)
    HideGadget(#compare,1)
    Protected compare=GadgetElement(#compare)
    Protected overlay=GadgetElement(#overlay)
    ;// create webcam video in background and place overlay in foreground at the same position
    !v_overlay.append('<video id="inputVideo" autoplay loop></video>')
    !v_overlay.find('canvas').css({ zIndex : '100001', position : 'absolute', top : '0px'});
    
    ;// init and start head tracking
    !var videoInput  = $('#inputVideo').get(0);
    !var canvasInput = v_compare.find('canvas').get(0);
    !var htracker    = new v_headtrackr.Tracker({calcAngles : true, ui : true, headPosition : true});
    !htracker.init(videoInput, canvasInput);
    !htracker.start();
    
    ;// listen face tracking event => redraw overlay
    !document.addEventListener("facetrackingEvent", function( event ) {  
    !  var v_detection$ = event.detection ,v_angle = event.angle-(Math.PI/2) 
    !     ,v_x = event.x                 ,v_y = event.y
    !     ,v_w = event.width             ,v_h = event.height    
    !     ,v_anchorX = (-(v_w/2)) >> 0   ,v_anchorY = (-(v_h/2)) >> 0 
    DrawOverlay(x,y,w,h,anchorX,anchorY,angle.f,detection$)
    !});
  EndIf
EndProcedure

;original URL (converted by rawgit): https://raw.githubusercontent.com/auduno/headtrackr/master/headtrackr.min.js
UsePlugin("headtrackr", "//rawgit.com/auduno/headtrackr/master/headtrackr.min", @HeadTracking())
Post Reply