Captured webcam frames arranged in a 3D rotate-able cube for your viewing pleasure. A simple tech demo trying out the new getUserMedia API in Chrome 21, with some 3D transforms and canvas based pixel manipulation thrown in for good measure.
Try it outMake sure you're using Chrome >= 21 and have a webcam attached.
Pseudo-3.5D
This is the default setting, the idea is to make quite a slow repetitive movement and then pause the webcam (Webcam:paused=true). Hopefully the background will be ignored and your movement will be the only thing visible in each frame (if not try fiddling the Webcam:renderThreshold). Now rotate the cube by dragging it around for some 3.5D action!
Time-warp
A strange and unexpected effect that I noticed when building the demo. Rotate the cube so all that you can see is the oldest frame (Rotation:rotX=0, Rotation:rotY=180) and make sure you're rendering full frames (Webcam:renderMovement=true and Webcam:renderStatic=true). Point the webcam at yourself and let the cube fill up with frames. You're now looking 10 seconds into the past (frameCount=100 and Webcam:fps=10), spooky! For me it seems that 10 seconds is just about long enough for me to forget what I was doing, so it has the odd effect of looking like me but not feeling like me.
Technical notes
HTML5 Rocks has a great run-down of the getUserMedia API that I'm using for video-capture, as well as a more general look at it's parent specification WebRTC. The thresholding code used for movement tracking is also heavily inspired by the filter code from another article on canvas image filters. If you haven't yet had your fill of CSS 3D transform tutorials then again I recommend starting from the graphics feature overview.
Also worthy of a quick mention is RequireJS, a simple module loader for JavaScript. I've previously used Closure which comes with it's own custom mechanism and the CommonJS pattern used by Node, but this is the first time I've tried RequireJS. If you're not familiar with the concept, it allows you to easily create modular code and manage the references between modules, think package/import from Java or namespace/using from C#. So far I'm pretty impressed, but I'm yet to look into its support for compile-time optimisation and run-time async module loading, look out for another blog post.