Bbroy
 Technology blog

Control presentations with hand gestures

Think of controlling your presentation slides using hand gestures. Think of setting up a website like When-It-Rains.com. Now you can do exactly that by combining hand gestures to already popular, robust presentation framework - Reveal.js.

Here is a video created by William Wu, who integrated gesture navigation to Reveal.js framework:
You can see it in action over here or on When-It-Rains.com website.

How you can achieve that:

  1. Download a copy of Reveal.js and extract it.

  2. Get the gesture.js file and save it on the js directory of Reveal.js

  3. Add the following code towards the end of the index.html file of Reveal.js. before the </body> tag
    <style> #comp{ position:fixed; left:0; top:0; width:100%; height:100%; opacity:0.1; } </style><div id="disp"><canvas id="comp"></canvas></div> <video id="video" autoplay width="300" style="display:none"></video> <canvas id="canvas" style="width:300px;display:none;"></canvas> <script src="js/gesture.js"></script>


  4. That's it. Run the index.html file on your browser and allow it access webcam. Browser security features normally won't allow local files to access web camera because of security reasons. If that occurs, you have to make an exception or host the files on a local web server or on your website.