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. Let’s 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



Comments are closed.