Embedding UStream & Wave = Live video + live typing, together at last

Over the course of the last week, we held 5 days of mini-conferences on different Google developer technologies in the Google Sydney office. Since some developers couldn't get time off work (or life :)) to come to the event in person, I wanted to make it possible for them to participate virtually.

So, I setup a Ustream channel for the event, powered by a sleuth webcam in the front row of the audience, and also set up a backchannel discussion wave for each day of the event. Both the Ustream video player and Google Wave are embeddable, so I could combine the two on the same page - like this one for the Chrome & OpenWeb day. To make that page, I just grabbed the embed code on the UStream channel page, generated the embed code from the Wave Web element page -- enabling the header/footer options to make the "Next unread message" button visible -- and pasted them into a simple HTML page.



The great thing about using an embedded wave is that some folks (the virtual ones) can interact with it via the Ustream page, and other folks (the live audience members) can do the same by logging into their Google Wave account. Using a wave also meant we could easily have multiple conversations at the same time and pull in multimedia, like when I used the HTML gadget to play around with the HTML elements on the slides.

To try it for your next conference, class or virtual get together, follow these step-by-step instructions:

1. Visit the channel page, like http://www.ustream.tv/channel/devfest-au

2. Click "embed codes" on the top right of the video player.

3. Copy the "Live show" code.

4. Paste it into an HTML webpage.

5. Visit the wave. Copy the URL in the browser bar or in the "Link to this page" dialog.

6. Visit the Wave web element page (http://www.google.com/webelements/wave/). Paste the URL into that page.

7. Copy the generated code into your HTML page.

8. To align the wave next to the ustream, like in my example, wrap both of them in a div with style "float:left".

.. enjoy the live-ness!


Posted by Pamela Fox, Developer Relations, Google Wave Team