OpenTok Apps: Grad School Edition

Howdy, the name is Ezra, and I’m a Master’s Candidate at the Interactive Telecommunication Program (ITP) at Tisch School of the Arts | New York University. Nice to meet you. I assure you, the pleasure is all mine. Is that a new haircut? It looks wonderful. Confused by my title? It’s quite a mouthful, so let’s be a tad less formal and start again: Howdy, the name is Ezra, a grad student at NYU.

About a week or so ago, I released 9Bit: play with your friends. The web-app itself first started as an exploration, then transformed itself into my midterm, and is currently my latest project released into the wild. The app itself, in a nutshell, is an OpenTok game application. A user can invite up to two friends into a session, which contains a board with nine slots. These slots can contain color tiles or video feed tiles. A user and his/her friends can manipulate the board, having their choice be reflected in real time.

One aspect of the web app I would like to point out is the challenge of syncing up the board across the three users. When Torrey changes the color of a tile on the board, jQuery captures the event and fires a server update via AJAX and JSON to a PHP script. Since I did not want to interrupt the user experience, an asynchronous strategy had to be used. Since simple data objects had to be given to the server, JSON was the top choice. Once the call reaches the PHP script, the proper MySQL call is made to update the database based on Torrey’s selection.

The app will also make a call to the server, fired by a timer given a predetermined variable, asking for the status of the board. Again, AJAX and JSON is used to make the call to the PHP script. The script calls the proper MySQL statement, asking for the status of the board. The script then returns the result in JSON format. Using jQuery and JavaScript, the data is parsed and the board is updated. This way Courtney and Taylor will be able to see Torrey’s action.

Another aspect of the web app I would like to point out is the challenge of having duplicate video feeds of multiple video feeds. In simple terms, Courtney wants six tiles to be of Taylor’s feed and three of Torrey. Originally, I was creating and destroying video feeds on the fly, which returned slow results (well, slow in today’s standards, but quite fast in yesteryear’s standards). Since flash objects, in this case the video feeds, take a few seconds to create, I needed to find another method of implementing duplicate video feeds quickly without destroying the user experience.

After some thought and test-cases, I decided to solve the video issue by implementing “z-index”. Each tile would be made of four divs: three of which are dedicated to each user’s video feed and a “cover” div. When Courtney wants a tile to be the color red, the “cover” div has its background color changed to red. When Courtney wants a tile to be Taylor’s video feed, an algorithm runs that changes the “cover” div’s background to transparent. It then switches Taylor’s div z-index value with the second highest z-index div value. In a nutshell, the video feeds are just swapping z-indexes and the “cover” div is just changing color.

// User selects one of three video feeds from the palette
$(".color_board_cell").click(function() {
$colorHolderId = $(this).attr("id");
$(".container_right_board_cell").click(function() {
$tempId = $(this).attr("id");
var tempString = $tempId.substring(3);
if($colorHolderId == ‘cbc10’) {
$("#crb" + tempString + "_v_" + 1).css("z-index", 60);
$("#crb" + tempString + "_v_2").css("z-index", 20);
$("#crb" + tempString + "_v_3").css("z-index", 40);
else if($colorHolderId == ‘cbc11’) {
$("#crb" + tempString + "_v_" + 2).css("z-index", 60);
$("#crb" + tempString + "_v_1").css("z-index", 20);
$("#crb" + tempString + "_v_3").css("z-index", 40);
else if($colorHolderId == ‘cbc12’) {
$("#crb" + tempString + "_v_" + 3).css("z-index", 60);
$("#crb" + tempString + "_v_2").css("z-index", 20);
$("#crb" + tempString + "_v_1").css("z-index", 40);
$("#" + $tempId).css("background-color", "transparent");

Line 3By having all three video feeds share the same class, the id of the video feed can be easily found.

Line 6All divs within a tile share a variation of the same ID, so the cover ID is saved

Line 7The cover div is stripped for the common denominator all divs within a tile share.

Line 10The selected video feed is assigned the highest z-index of the video feeds.

Line 11 / 12The other two video feeds are assigned predetermined lower z-indexes.

Line 26The cover div is stripped from its color, which allows the highest z-indexed video feed to be seen.

There you have it, a few insights to the problem solving thinking mechanics of my brain. It was quite fun working with the OpenTok API and learning how to integrate it into my class-work. If you excuse me, I need to keep working on my final for the semester, which will integrate the OpenTok API with a few other APIs.

[php]echo "See ya soon!";[/php]