- Check if your webcam is on
- Run the program
- 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())