TokBox tout de suite

Trying to play around with TokBox (TB) during a hackathon, but I'm missing a more complete tutorial… I mean, their Hello World's nice, but a bit sparce for our time frame, and excitement? (TB's fantastic Evangelist, Ankur, was there to help us, but everyone wanted a bite! ;o)

Anyway, here's an attempt at a quick and dirty tutorial. And a working demo?

Ideas?

1. Lets do a group video-chat thingy. Like, one click to start a video chat embedded into a Web page.
2. Peer-to-peer? TokBox "wraps" WebRTC, among other things, so I immediately thought sure, P2P would be so cool, pure client-side, especially for my static HTML demo, but… Realistically, we'd need something on the server side, won't we? (Though tokens can be generated client-side, too.)
3. CoffeeScript! ;o) Well, server-side, obviously, but maybe also in the browser? Later.
4. Meteor?! Just to serve some static HTML for this toy demo? Because can't use the camera, or WebRTC, or something, with file:///… Wait, just "wrap" our index.html with

   $ cd $MOCKUP_DIR
   $ python -m SimpleHTTPServer

   and browse to http://localhost:8000/. Done. ;o)

Process

1. Setup dance routine: register for an API key, "session ID". And a session and temporary token just for the hackathon?
2. Inject TB's API into the HTML:

   <script src="http://static.opentok.com/webrtc/v2.0/js/TB.min.js" ></script>

3. Session ID and token: my demo is pure client-side, so I've used the dashboard to generate a session ID and a temporary token.
4. Connect:

   var session = TB.initSession("2_MX4z...R-");
   session.connect("3144...", "T1==cGFy...T0=");

5. Controls and DOM for TB's widget(s?):

   <img class="publish-stream" src="lib/camera_black.png">
   <p id="see-myself"></p>
   <p class="streams-container"></p>

   And enable these controls only after a session/connection is made:

   function sessionConnectedHandler(event) {
   	// Enable controls.
   	$(".publish-stream").click(function() {
   		session.publish("see-myself", {width:90, height:50});
   	});
   	// See others' videos.
   	subscribeToStreams(event.streams);
   }

6. Publish, ie start broadcasting my webcan:

   $(".publish-stream").click(function(){
   	session.publish();
   });

7. Subscribe, ie show peers when they start broadcasting: …
8. Debugging:

   TB.addEventListener("exception", function(event) {alert(event.message);});

Resources

1. TokBox's OpenTok API
2. WebRTC tutorial

Feedback

…