Presso – a WebSocket Powered Social HTML5 Presentation Tool

At DevCon5 in Santa Clara Peter Lubbers, founder of the San Francisco HTML5 User Group, gave a keynote, titled “The HTML5 Connectivity Revolution”. For his presentation Peter used a WebSocket enabled presentation tool built by Kaazing, called Presso.

Presso serves as a prime example for the types of apps you can build using real-time Web technologies. Peter’s presentation could be followed along by the audience on their tablets and laptops. As Peter was advancing the slides, attendees saw the same animation on their screens. Presso also features a remote control, allowing the presenter to walk around in the room use a smart phone to advance the slides.

The demo uses the JMS Edition of the Kaazing WebSocket Gateway under the covers, making it very straight-forward to build peer-to-peer applications. Every time there’s a navigation command on the presenter’s machine, a message is sent to the viewers that in turn perform the same navigation: next or previous.

The presenter can advance the slides either directly through the keyboard or the remote controller (typically a smart phone).

The transition and page layout is managed by the excellent impress.js library, inspired by Prezi. This drawing describes the high-level topology. Red lines indicate messages sent and received to and from the WebSocket gateway.

And here’s a digest of the keynote from Presso’s perspective. The screen in the background shows the presenter’s laptop projected in the room. The brighter screen in the foreground is a tablet in the audience, following the presentation.

If you’re interested to learn about Web communication technology, you should watch Peter’s keynote presentation.