Gestures + Reveal.JS
February 08, 2013
Launch Experiment
Slow? Not Working? Try it in Google Chrome.
From the Author:
This is what I got when I combined webcam-based gesture recognition with Hakim El Hattab's reveal.js.
It took me a while to write and fine tune the detection algorithms. Even then, the algorithms are only about 80% accurate. You get the gist of it though:
+ A flick of the hand in mid-air changes the slide.
+ A two hand flick up or down activates the slide overview.
Fork me on Github! https://github.com/willy-vvu/reveal.js
Technology:
WebRTC and getUserMedia, reveal.js, CSS 3D transforms, new HTML5 semantics tags
Comments
Games
Reply to this commentCh8743@gmail
I add an skin color detector for more accuracy, you can change the value of range on HSV values to get more positive values, this values can be related with the lighting.
https://github.com/BennSandoval/reveal.js/
https://www.youtube.com/watch?v=16Y7A_wKyi4
Reply to this commentGreat Job Willy.
I also would like to use it for my Seminar. I have created a slide using Hakim El Hattab's reveal.js. Now, I would like to combine it with ur webcam-based gesture recognition. Any tips on how to procede?
Thanks in advance.
Reply to this commentI have decided to make one set of
INSTRUCTIONS FOR EVERYONE!
A. DOWNLOAD REVEAL.JS
1. Navigate to the github project page by clicking Fork Me or the link itself
2. Click the downwards arrow zip button. This should download the entire thing as a zip file.
3. Unzip the zip file in a place you can get to.
B. CREATE A SLIDE DECK
You can go to http://rvl.io for a painless way to create presentations in reveal.js. You'll need one for part C.
C. IMPORT SLIDES FROM http://rvl.io
1. After creating a slide deck, copy the code that appears after clicking EXPORT in the editor
2. Navigate to your where you have downloaded and unzipped reveal.js
3. Open index.html in your favorite text editor, and replace ... with the code provided by rvl.io.
4. Save, and close.
D. RUN REVEAL.JS LOCALLY
NOTE: This workaround only applies to Google Chrome
1. Make sure Google Chrome is fully closed. That means you close ALL chrome windows!
2. Run the command "google-chrome --allow-file-access-from-files" without the quotes. This can be done in Task Manage > New Task, Start menu > Run, or opening Terminal/Command Prompt and typing it in.
3. Open the newly minted index.html in chrome. TIP: Try dragging it into the browser window.
4. Click Allow in the webcam access prompt. If you do not see this prompt, return to step 2. After closing all chrome windows, you might need to end all chrome processes using System Monitor/Task Manager, as chrome might not be fully closed.
ALL SET! You're welcome. Have fun.
Reply to this commentVery cool! Got it running locally but the video feedback doesn't work...any clues?
Reply to this commentVery good use. Trying to study your gesture.js now. It looks quite raw and I wonder how you have been debugging the recognition part. Any tips or pointers?
Reply to this commentI use Chrome's built-in debugging tools, accessible from the page menu > Tools > Developer Tools, or by pressing F12, or by pressing Ctrl+Shift+I or on a mac, Command+Shift+I. The official page is https://developers.google.com/chrome-developer-tools/
Reply to this commentHappy debugging!
Cool !!!!!! Awesome work.... planing to use this for my seminar.....any tips to run this offline cause chrome denies webcam access....when hosted from local drive.
Reply to this commentYou'll need to run the included server offline, then get to it at localhost:5000. After you have downloaded it from github, install node. In linux, this is as simple as running from the console "sudo apt-get install nodejs". Then, navigate to the folder with the reveal.js files in a terminal using cd and run "node server.js". Then, you should be able to get to it with http://localhost:5000 in a web browser.
Reply to this commentWhile I wait for this page to (really slowly) update, here's the link to the new location for the video.
Reply to this commenthttp://youtu.be/bXF68hNPuNo
While I'm waiting for the description to update, the new link is http://revealjs.herokuapp.com/
Reply to this commentKeep an eye on it. I'm still getting things to work.
'VCAP ROUTER: 404 - DESTINATION NOT FOUND'
Please fix! I need to try this out! Pleaaassee.
Reply to this commentSorry! I'm on it.
Reply to this commentThey should add this to the rvl.io framework. This is amazing!!!!
Reply to this commentI used rvl.io to build the presentation that comes preloaded. It's a great tool, and I agree!
Reply to this commentThank you for your amazing gesture.js file...
Reply to this commentI took your basic code, modified it and now I have my room's lights and fans controlled with hand gestures! :)
Woah! That's awesome! How'd you link up the hardware?
Reply to this commentYour work on this webcam interactive web-based application is astonishing.
Could it work with an iPad or iPhone?
Reply to this commentWe'd just need to wait for the APIs to catch up. In time...
Reply to this commentIts awesome. Works very fine. I am planning to do more research on it for my final year college project. Let's see if I get success. Hoe you will help me if I got stuck somewhere.
Reply to this commentWow! I'm flattered! I'm only a high school sophomore, but I'm glad you found it was useful. Add me on Google+ and drop me a note if you have any questions.
Reply to this commentGreat work, Keep it man, is this open source ?
Reply to this commentYou bet it is! Grab it on github,
Reply to this commentFantastic use of new tech applied to cameras that have been around forever. Would you open source your code, or let us use it in our programs?
Reply to this commentGo ahead! The presentation framework was originally Hakim's. I just added the gesture control. It's yours to use.
Reply to this commentI have a Kinect and I can open the depth camera and the RGB camera to Google Chrome. Is possible create something using these resources?
Reply to this commentI'm not sure if you can actually receive data from a plugged-in Kinect. I'm sure you could find a loophole :D, maybe creating a serial interface with python, that doubles as a web server to interact with a web app in chrome? I'm sure there could be a better way, but hey! Food for thought.
Reply to this commentI read somewhere that someone managed to use Kinect to record stereoscopic 3D.
I have my doubts, but hey, anything's possible.
I can output Kinect cameras to Chrome using WebRTC and Kinect Virtual Camera.
But I cannot find any use for that, all websites support RGB data and none depth data.
Nice work.. !
Reply to this commentBut what about other Browsers support.
I'm a chrome fan, but I still appreciate other browsers. That's why this was a CHROME expreiment :) Fans of other browsers can build in support for themselves and others! It's open source, anyways. Have fun modifying it!
Reply to this commentWow! Really well done! :-D Look forward to seeing this go even further.
C'est super cool
Reply to this commentLove this :D
Reply to this commentI'm glad you noticed. Thanks for the framework! Couldn't have done with without you.
Reply to this commentNice! good work there!
Reply to this commentIsnt this similar to the app FLUTTER ?
Reply to this commentI guess so, in the concept. However, they're completely different in implementation. FLUTTER is a desktop app, while this is a browser thing. It could easily be expanded to control media as well :D. I guess it's up to others, because it's open source!
Reply to this commentMeh. Already seen that on minority report /jealousami
Reply to this comment:) Seeing is believing, but actually being able to use it for yourself takes it to a whole new level.
Reply to this commentVery nice . Is there a license for your code ? . I would like to try it out on a project
Reply to this commentA lot of the credit goes to Hakim, who wrote the framework. Go ahead, just make sure you don't get in trouble with creative commons!
Reply to this commentGreat! Pretty cool.
Improvement might be to find a way to differentiate a intentional swipe from waving of the hands. Eg, a swipe up requires one to lower their hand, therefore triggering a downward swipe. Perhaps make it more sensitive to a palm. I was also fairly close. Perhaps if I were farther away the distance would make it less sensative overall.
Reply to this commentWebcams cannot detect depth. :( That means, a very fast and far swipe from far away will not trigger it because it doesn't know you're far or near.
Reply to this commentCool. Awesome stuff !!
Reply to this commentowwwowowowo men esto es super genial .......cool
Reply to this commentAwesome!
Reply to this commentWonderful. Maybe we can do this in much wider big screen.
Reply to this commentThanks! How big? TV-size big? :) Maybe combine it with a projector and you can have a 3D image reconstruction.
Reply to this comment