a blog about innovation and solutions
cloud, communication, opinions, web

Real-time web presentations with Google+ Hangouts and Scribd

One of the compelling features of Google+ is Hangouts. It enables group video chat rooms that are advertised on a user’s profile. It’s one of the few options of doing web video communication that involves more than two persons. Early after launching the social product positioned against Facebook, Google also published a developer preview of the Hangouts API.

Since I’m a huge fan of real-time communication over the Internet, I immediately became interested in this. A hangout app consists of an XML application file that describes basic properties and references to various resources such as CSS and JavaScript files. The API offers simple state sharing across the hangout session. The Hangouts API page is very concise, which allowed me to get started in no time.

Demo (Download the code from GitHub)

A good example of real-time communication is a presentation. I wanted to find out how easy it is to embed a presentation viewer and synchronize the currently visible slide. Scribd offers a Javascript API that I used to embed a slide viewer. Whenever the current slide changes in the Scribd widget, the hangout state gets updated. This is how all users stay in sync.

A screenshot of the Google+ Hangouts API demo that integrates a Scribd widget. The current slide is shared between all participants.

A Hangouts app can easily be served through any file hosting provider if back-end functionality is not needed. Google App Engine can be used for storing data and offering back-end business logic (the Hangouts samples are meant to be deployed on App Engine, but can easily be served through other means). A link to the full source code for this project is included at the bottom of this article and the state update trigger and handler code snippets are pasted below for convenience.

The following code is used for submitting a state change request to the entire hangout

function updateState(pageNumber) {
      gapi.hangout.data.submitDelta({'currentPage': ''+pageNumber});

Whenever the hangout state changes, this handler is called

function updateStateUi(state) {
  var pageNumber = state['currentPage'];
  if (pageNumber) {
    pageNumber = parseInt(pageNumber);
    if (currentUpdate) {
        currentUpdate = null;
    if (scribd_doc.api.getPage() != pageNumber) {

The future looks promising

The Hangouts API feature is nice, but at the moment of this writing it’s still in developer preview. You can only start a Hangout application with team members from your API project.

This kind of technology will enable even more powerful communication experiences on the web. The sky is the limit when it comes to applying real-time communication to consumer and business web applications. Doctors could seamlessly share experiences and opinions regarding patient health issues, design studios could better manage client feedback, new crowdsourcing tools could be developed and teams of professionals spread all over the world could dissolve the distance boundaries that separates them.

What do you think the future of web communication is going to look like?

Download the code for this demo from GitHub.


Leave a Reply