Pingout.xml

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <!-- Licensed under the Apache License, Version 2.0 (the "License"); you may not
     * use this file except in compliance with the License. You may obtain a copy of
     * the License at
     *
     * http://www.apache.org/licenses/LICENSE-2.0
     *
     * Unless required by applicable law or agreed to in writing, software
     * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
     * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
     * License for the specific language governing permissions and limitations under
     * the License
    -->
    <ModulePrefs title="Hangout Starter">
        <Require feature="rpc" />
        <Require feature="views" />
        <Require feature="locked-domain" />
    </ModulePrefs>
    <Content type="html"><![CDATA[
		<div id='wrap'>
			<div id='main'>
			<p>
				<canvas id="canvas" width=600 height=400>Your browser does not support canvas, alas.
				This demo will not be as much fun.  Have you considered Google Chrome?
				</canvas>
				</p>
			</div>
		</div>
        <script src="https://hangoutsapi.talkgadget.google.com/hangouts/api/hangout.js?v=1.2"></script>
        <script>
            // Keep track of this
			var canvas = document.getElementById('canvas');
            var ball = new Image();
            var ballLocation = {x:0,y:0};
			var ballSpeed = {x:1,y:1};
			
			// Keep track of recent events.
			var lastGoodEvent;
			var lastEvent;

			gapi.hangout.onApiReady.add(
				function(eventObj) {
					if (eventObj.isApiReady) {
						ball.src = 'https://raw.github.com/zagarachi/GoogleHangoutsAPIPlayground/master/ball.png';
						ball.height = 10;
						ball.width = 10;
						// Add event handler.
						gapi.hangout.av.effects.onFaceTrackingDataChanged.add(onFaceTrackingChanged);
						console.log("starting animation");
						animate();
					}
				}
			);
			
			/** Animation loop */
			function animate(){
			
				drawFrame();
				// request new frame
				requestAnimFrame(function () {
					animate();
				});
			}
			
			function drawFrame(){
				var context = canvas.getContext('2d');
				// Clear the canvas
				context.setTransform(1,0,0,1,0,0);
				context.fillStyle = 'rgb(0,0,0)';
				context.fillRect(0,0,600,400);

				nextPosition();
				context.drawImage(ball,ballLocation.x, ballLocation.y);
			}
			
			function nextPosition(){
				var faceScaleX = 600;
				var faceScaleY = 338;
				ballLocation = {x:faceScaleX * lastGoodEvent.noseRoot.x, y:faceScaleY * lastGoodEvent.noseRoot.y};
				console.log("x pos:" + ballLocation.x);
				console.log("y pos:" + ballLocation.y);
			}
			
			/** Event handler */
			function onFaceTrackingChanged(event) {
				try {
					lastEvent = event;
					if (event.hasFace) {
						lastGoodEvent = event;
					}
				} catch(e) {
					console.log("onFaceTrackingChanged: ERROR");
					console.log(e);
				}
			}
			
			/** Standard requestAnimFrame from paulirish.com, running 30 fps */
			window.requestAnimFrame = (function (callback) {
				return window.requestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.oRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				function(callback){
					window.setTimeout(callback, 1000 / 30);
				};
			})();
			
        </script>
        ]]>
</Content>
</Module>