Combining reveal.js and gest.js for presentations with webcam based gesture controls

13-SEP-2014

- 4 minute read

Recently I've been working with reveal.js on a presentation project. I saw this featured presentation from their github which included webcam gesture control using gesture.js. I wasn't 100% happy with the accuracy of the algorithm and so wanted to try integrating gest.js by Hadi.

Hadi had already configured gest.js to work with bespoke.js, another presentation framework, in this demo. So the approach to reveal.js wasn't too different.

I figured it was best to add it to reveal's 'ready' event. It fires when reveal.js has loaded all (synchronous) dependencies and is ready for the user to start navigating.

Then it was just a matter of loading the script, listening for gestures, singling out left and right gestures (my reveal.js presentation didn't make use of the up and down slides) and setting a few configs. The Reveal class provides a JavaScript API for controlling navigation and reading state, so it was simple enough to map the gestures to those controls.

Here's a quick video of the presentation in action using a macBook pro built in webcam and gest.js. You can see the algorithm is still not 100% perfect, but it's pretty darn good once you work out the sweet spot for your gesture.

I should note reveal.js does include a plugin for the Leap Motion touchless gesture controller, which is probably the most accurate method you could whip up for controlling your presentation without touch, granted you want to shell out the cash for one. We had one lying around the office, so I've made a quick comparison video below.