HTML5 GLASSES!

addyosmani · Sep 27, 2011 · e626b5e · e626b5e
commit e626b5e
Show file tree

Hide file tree

Showing 13 changed files with 607 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/i/glasses.png b/i/glasses.png
diff --git a/i/glasses.psd b/i/glasses.psd
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<title>Face Detector</title>
+<link rel="stylesheet" href="style.css"/>
+</head>
+<body>
+<div class="wrapper">
+	<h1>HTML5 GLASSES</h1>
+	<p>Created by <a href="http://twitter.com/wesbos" target="_blank">Wes Bos</a>. See full details <a href="">here.</a></p>
+	<!-- Our Main Video Element -->
+	<video height="426" width="640" controls="false">
+		<source src="videos/wes4.ogg" />
+		<source src="videos/wes4.mp4" />
+	</video>
+
+	<!-- Out Canvas Element for output -->
+	<canvas id="output"  height="426" width="640" ></canvas>
+
+	<!-- div to track progress -->
+	<div id="elapsed_time">Press play for HTML5 Glasses!</div>
+</div>
+<script type="text/javascript" src="scripts/ccv.js"></script>
+<script type="text/javascript" src="scripts/face.js"></script>
+<script type="text/javascript" src="scripts/scripts.js"></script>
+</body>
+</html>
diff --git a/scripts.js b/scripts.js
@@ -0,0 +1,46 @@
+var		
+		// Store the first HTML5 video element in the document
+		video = document.querySelector('video'),
+		// We use this to time how long things are taking. Not that important..
+		time_dump = document.getElementById("elapsed_time"),
+		// Create a new image that will be our goofy glasses
+		glasses = new Image(),
+		// Store the canvas so we can write to it
+		canvas = document.getElementById("output"),
+		// Get the canvas 2d Context
+		ctx = canvas.getContext("2d");
+		// Finally set the source of our new glasses img element
+		glasses.src = "i/glasses.png";
+
+function html5glasses() {
+	// Start the clock 
+	var elapsed_time = (new Date()).getTime();
+
+	// Draw the video to canvas
+	ctx.drawImage(video, 0, 0, video.width, video.height, 0, 0, canvas.width, canvas.height);
+
+	// use the face detection library to find the face
+	var comp = ccv.detect_objects({ "canvas" : (ccv.pre(canvas)),
+									"cascade" : cascade,
+									"interval" : 5,
+									"min_neighbors" : 1 });
+
+	// Stop the clock
+	time_dump.innerHTML = "Process time : " + ((new Date()).getTime() - elapsed_time).toString() + "ms";
+
+	// Draw glasses on everyone!
+	for (var i = 0; i < comp.length; i++) {
+		ctx.drawImage(glasses, comp[i].x, comp[i].y,comp[i].width, comp[i].height);
+	}
+}
+
+/* Events */ 
+
+video.addEventListener('play', function() {
+	vidInterval = setInterval(html5glasses,200); 
+});
+
+video.addEventListener('ended', function() {
+	clearInterval(vidInterval);
+	time_dump.innerHTML = "finished";
+});