working demo

conorbuck · Dec 19, 2012 · 3bbf31b · 3bbf31b
1 parent bf8b1cd
commit 3bbf31b
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 0 deletions.
diff --git a/image-worker.js b/image-worker.js
@@ -0,0 +1,14 @@
+// message receiver
+onmessage = function(event) {
+	var imageData = event.data.imageData,
+		dst = imageData.data;
+
+	/* Image Processing goes here */
+	for (var i=0; i < dst.length; i += 4) {
+		dst[i] += 70;
+	}
+
+	postMessage({
+		dstData: imageData
+	});
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>WebCam Effects</title>
+</head>
+<body>
+
+	<video id="video-stream" style="display:none;" width=545 height=344></video>
+	<canvas id="canvas-video" width=545 height=344></canvas>
+	<canvas id="canvas-effects" width=545 height=344></canvas>
+
+	<script type="text/javascript">
+		(function(){
+			var video = document.getElementById('video-stream'),
+				canvas = document.getElementById('canvas-video'),
+				canvasEffect = document.getElementById('canvas-effects'),
+				ctx = canvas.getContext('2d'),
+				ctxEffects = canvasEffect.getContext('2d'),
+				processor = new Worker('image-worker.js');
+				w = video.width,
+				h = video.height;
+
+
+			/* Setup WebWorker messaging */
+			processor.onmessage = function(event){
+				ctxEffects.putImageData(event.data.dstData, 0, 0);
+			};
+
+			/* Setup video stream and canvas */
+			navigator.getUserMedia =
+				navigator.getUserMedia ||
+				navigator.webkitGetUserMedia ||
+				navigator.mozGetUserMedia ||
+				navigator.msGetUserMedia;
+
+			navigator.getUserMedia({video:true}, function(stream){
+				video.src = URL.createObjectURL(stream);
+				video.play();
+				setInterval(render, 10);
+			});
+
+			var render = function(){
+				ctx.drawImage(video, 0, 0, w, h);
+				var srcData = ctx.getImageData(0,0,w,h);
+
+				processor.postMessage({
+					imageData: srcData
+				});
+			};
+		})();
+	</script>
+
+</body>
+</html>
diff --git a/server.js b/server.js
@@ -0,0 +1,20 @@
+var express = require("express"),
+    app     = express(),
+    port    = parseInt(process.env.PORT, 10) || 4567;
+
+app.get("/", function(req, res) {
+  res.redirect("/index.html");
+});
+
+app.configure(function(){
+  app.use(express.methodOverride());
+  app.use(express.bodyParser());
+  app.use(express.static(__dirname));
+  app.use(express.errorHandler({
+    dumpExceptions: true, 
+    showStack: true
+  }));
+  app.use(app.router);
+});
+
+app.listen(port);