Disclaimer: This is a small proof of concept, I would not recommend using it in your website, this is just for fun.
With netbook and laptop becoming more popular we have new tools opening to us, like the integrated webcam and microphone. There is unfortunately no easy way, even in HTML5, to stream your webcam to the web, however Adobe Flash can do it. The idea is to use simple motion gesture to move a JavaScript images library. In theory you could use this to switch back and forth archive pages and etc.
As said in the disclaimer, this is clunky, I did not get around of discarding your head movement, which is a problem. To get this to work you need to move your hand as you were kind of reaching the top right and left of your screen without extending your arm (if you have a webcam on top center of your laptop).
You need a webcam to see the demo
How it works
When hit detections are logged, flash will call the JavaScript function getFlashWebcam(direction). It also detect if your webcam is activated and hides the flash object. I used jQuery for triggering events but it could be used with any library or even plain JavaScript.
I used the Flash movement detection class from this blog and then added the detection hit and passed it to JavaScript.
function getFlashWebcam(direction){ // When hit test = true
if(direction == "left"){
$(".moveLeft").trigger("click")
}else{
$(".moveRight").trigger("click")
}
}
function camActivated(activation){ // When webcam is allowed in flash
if(activation == "true"){
$("#webcam").css("visibility","hidden")
$("#webcam").css("left","10000px")
}
}It will use about 20-30% of your cpu in detection mode, have fun 😉
Download the source code View demo
Tested on:
Firefox 3+
Experience may differ depending on your walls color, room lightning and camera quality.
Nice experiment, bit unresponsive, but cool stuff.
When you get the hang of it, it’s not so bad,
However the allow cam is weird
Really cool
I’m not a web developer, but this is the type of progress for the www that I love seeing. good work.
Great work….. we are here to support you….. itz rocking
Great works,but the source code does not work on IE6,please help.
Its good one..but takes time to recognize the gestures…..but good wrok
Hey man,
big respect.. I’m studying interaction design and will probably try to figure out, how to integrate this into a webpage to use it as control 😉
I will tell you as soon, as I got it. and then you get your beer !
Greets from Germany
hi,
I’m a as3 Italian programmer . I found this project very interesting. I wanted to know if the libraries of this project could be used for a commercial application that I will achieve. Your example is an excellent starting point for me. I await a response
Hi Cedric,
Its nice effort,
I am stuck with on issue, When I run it other than demo, the trigger screen doesn’t disappear even after allowing Adobe Flash player setting….
Will appreciate if you help me in this ….. Have a nice day.
Tariq.