*Snap*, *snap*, *snap* with OpenTok

One of our first partner applications took OpenTok videos and turned them into a virtual photo booth. Meet me under the MistleToe is one of our favorites here at TokBox. They were one of our early users of the AS3 library, which gives developers a little more power because they can access the video feeds and do really fun things with them.

We didn’t want our JS developers to be left out in the cold, and so we’ve added video stream snapshot functionality to the OpenTok API. What would one use snapshots for you ask?

Read More

Building a Video Party App with Ruby on Rails

For the recent RoR hackathon that happened down in Mountain View this past weekend, I built a new sample application. I needed to learn Rails really quickly, and I also wanted to see if I could port an old Call Widget API sample application easily into the OpenTok world. To check it out, go here:

http://opentok-videoparty.heroku.com

We got really lucky as I was able to convince someone to build a Ruby Gem for OpenTok. You can find it on GitHub here:

https://github.com/kblake/opentok

I think it’s going to be even better when views, helpers and the like are added to it. The best bit of having the gem now though is there’s no longer a need to figure out how plugins work… which drove me a little batty in the building of this application.

Now, on to the code…

The model is super simple. Here is the code for the migration:

[ror]
class CreateRooms < ActiveRecord::Migration
def self.up
create_table :rooms do |t|
t.string :name
t.string :sessionId
t.boolean :public

t.timestamps
end
end

def self.down
drop_table :rooms
end
end
[/ror]

All that’s really happening is that a Video Party “room” has a session ID associated with it, and on top of that we want to know if the end-user wants the room to be listed in the public directory.

So now we need to build out the rooms_controller.rb file. The code looks like this:

[ror]
class RoomsController < ApplicationController

def index
@rooms = Room.where(:public => true).order("created_at DESC")
@new_room = Room.new
end

def create
config_opentok
session = @opentok.create_session request.remote_addr
params[:room][:sessionId] = session.session_id

@new_room = Room.new(params[:room])

respond_to do |format|
if @new_room.save
format.html { redirect_to("/party/"+@new_room.id.to_s) }
else
format.html { render :controller => ‘rooms’,
:action => "index" }
end
end
end

def party
@room = Room.find(params[:id])

config_opentok

@tok_token = @opentok.generate_token :session_id =>
@room.sessionId
end

private
def config_opentok
if @opentok.nil?
@opentok = OpenTok::OpenTokSDK.new {API_KEY}, {API_SECRET}
end
end
end
[/ror]

One quick note… in the function config_opentok make sure that you set the API_KEY and API_SECRET values to the ones you’ve requested from TokBox.

The function index is the action that our “root” route points to. It simply grabs all of the public rooms, and returns them in order from newest to oldest.

The function create is the action against which the form on the homepage posts. It creates new rooms by first generating a session ID to associate with the room, and then saving the data that the end-user passed in to the database.

The function party is the action against which the individual rooms and shared links work against. The route takes an id, looks up that room and returns the Room object. The Room object then gets passed into the view, and the video chat is built off of the properties on that object.

In terms of OpenTok functionality, which is what this is all about in the end, there’s really nothing beyond what you would find in the Basic Tutorial. I will point out how I did the layout of the videos though. It’s a little bit of CSS, and a little bit of Javascript. The CSS code looks something like this:

[css]
#videobox {
width: 100%;
height: 100%;

max-width: 800px;
max-height: 600px;

margin-right: auto;
margin-left: auto;
}

#videobox object {
float: left;
}
[/css]

I’m really doing two things here. I’m making sure that the videobox expands to the height and width of the elements within it, but only up to 800×600. I’m also making sure that all of the object elements within the videobox float left. To really solve the problem I also need to add a div with a style of clear:both after the widgets.

The Javascript code is a bit more complex, but not too crazy. The Javascript code looks like this:
[javascript]
var videos = 1;
var publisherObj;

var subscriberObj = {};

var MAX_WIDTH_VIDEO = 264;
var MAX_HEIGHT_VIDEO = 198;

var MIN_WIDTH_VIDEO = 200;
var MIN_HEIGHT_VIDEO = 150;

var MAX_WIDTH_BOX = 800;
var MAX_HEIGHT_BOX = 600;

var CURRENT_WIDTH = MAX_WIDTH_VIDEO;
var CURRENT_HEIGHT = MAX_HEIGHT_VIDEO;

function layoutManager() {
var estBoxWidth = MAX_WIDTH_BOX / videos;
var width = Math.min(MAX_WIDTH_VIDEO, Math.max(MIN_WIDTH_VIDEO,
estBoxWidth));
var height = 3*width/4;

publisherObj.height = height;
publisherObj.width = width;

for(var subscriberDiv in subscriberObj) {
subscriberDiv.height = height;
subscriberDiv.width = width;
}

CURRENT_HEIGHT = height;
CURRENT_WIDTH = width;
}
[/javascript]

What’s going on here? There are a few assumptions. The maximum number of videos in a row is three. I’ve set a maximum and minimum size for the publisher and subscriber widgets. When the first row fills up, all of the widgets will be the size of the minimum window and tile three across. I also call this function every time a video is added or removed from the videobox, and it goes through the process of rebalancing the widgets.

The routes.rb file and views are pretty simple, and so just looking at the GitHub repository should be enough to understand what’s going on there. If there are any questions, then please throw them in the comments, and I’ll be sure to help out.

Other than that, you should be all set to go to build your own video party Ruby on Rails application!

Read More

Philly Startup Weekend

The ink has barely dried on the weekend that was Philly Startup Weekend, but I felt the need to just jot down the experience before I lost it in the chaos of getting back to the grind.

I need to just start by saying that it was for me simply an awesome experience.

If you don’t know what the Startup Weekend phenomenon is, then I’d suggest scurrying on over to startupweekend.org and getting a quick gist. For the overly lazy, you get 58 hours to build a prototype to then show off to a panel of judges at the end of the weekend. Friday night, folks pitch ideas that range from insane to awe-inspiring, and in between it all you hope to find someone to work.

The event this weekend in Philly happened at the University of Arts (where the art is dope, btw). There were some presentations on Friday night, including yours truly showing off OpenTok. Folks shared close to 35 ideas, and then the whole crowd voted on their favorites to get it down to 20. In the end, 16 groups presented Sunday evening (and are probably still presenting as I write this at 30,000′ over the Midwest).

So, given the background info, why was it awesome?

  • Inspiring Folks
    • Let’s be honest. Most of the time when dealing with the world of startups, people with ideas, folks pitching, we all immediately glaze over or think to ourselves about how often we’ve heard that someone thinks they can beat Google at text ads. There’s a malaise to hearing people tell you how great their next big thing is.Now, that said, there’s something to a room filled with people who think that in some small way they’re going to do the impossible. Build a minimum viable product in 50+ hours, create buzz around it through their own social networks, Hacker News and TechCrunch, and then buy an island in the Caribbean. I made the last one up, but the crowd-sourced energy has an infectious buzz to it that some of the meet and greet, idea kick around sessions seem to lack. There’s a real bravado to the “I don’t give a damn about telling you my idea because I’m going to do it better than you”. I LOVED it.
  • Good energy
    • I already mentioned this in the previous bullet, but it has to be said again. The people were amazing. Nothing but good energy in the room for 3 days, and that just makes everything better. Enough said.
  • Fun ideas
    • There was a real quirkiness to the ideas that I really enjoyed. One guy through out the idea of building a dating site where it was only people who were rated an “8” or better. The collective thought in the room was definitely how do you build a product you can’t use.There was this amazing iPhone art application built by a grad student at RIT who wanted some help with taking it to the next level.Someone wanted to solve the ever-unsolvable guarantee a parking spot problem.

      Jewelry rental, clothing measurement management, relationship analysis by text message aggregation, the list goes on and on. I ended up working with a group who hope to bridge the teacher-to-student divide amongst high schoolers by having Facebook be a critical part of how information is shared (but more details on that in another post).

      The whole gambit of ideas was really impressive.

  • Opportunity
    • I would say the weekend started with an interesting split of 50/40/10 to engineers/business folks/other. That really surprised me. If you’re a developer, and you’re bored, then build an OpenTok app. But if you don’t want to build an OpenTok app, then find some of these business folks at your local graduate school, and start building things. Business folks are desperate to see cool ideas turned into applications, and I feel as if good developers have an angst to work on something that they believe is fun.If this weekend taught me anything it’s that if you don’t love your job the opportunity to find something you love doing is 56 hours away.

I want to thank the organizers of the Philly Startup Weekend for a really great event, and I’m really looking forward to going to more of these in the future. Let’s hope they all live up to the hype.

Read More

SurfaceBreaker.com: Making meeting strangers a bit safer

If Facebook’s News Feed, ChatRoulette and the “I’m Feeling Lucky” button on Google Search have taught us one thing, it’s that random may not always be such a great thing. It’s often nice to have some kind of filter in place before diving into the unknown. It’s even better to know a little bit about what you’re getting yourself into before anything embarrassing happens.

Enter SurfaceBreaker.com.

SurfaceBreaker.com is a site that asks its users to build a profile about the­mselves by answering a series of questions, and then learn about other users on the site based on how they’ve answered those same questions. If an answer is intriguing, then follow up by sending a private message. Get a bit of a dialogue going, and then jump into a chat.

Read More

TokBox Elgg plug-in

We recently learned about a great open-source social networking platform named Elgg thanks to a tweet from Twitter user jdalsem. Elgg is an open-source social networking platform on top of which businesses, schools and groups can build their own social network. It seems to be flush with features ranging from profiles with a robust news feed to the ability to generate and share content from across the web.

And now, there’s one more thing that you can do in the Elgg ecosystem.

TokBox chat is now a plug-in that can be integrated into Elgg social networks. Using the Call Widget API, Twitter user jdalsem was able to build a plug-in that allows users of a social network where the TokBox plug-in is installed to create rooms, view a list of rooms and chat in them. It’s exactly what we’re hoping to encourage as we invest more and more into our platforms. Developers who understand the value of bringing the power of video chat into the applications on which they work, build and play.

We’ve reached out to Twitter user jdalsem, and he has a TokBox t-shirt on the way! If you’ve built a customization for an open source project that you use, then please let us know.

We’re always excited to see at TokBox what people can do when they dream video chat.

Read More

OpenTok Update – First week progress

OpenTok is still new to the world, but we’re already getting some traction in the media as well as a slew of interest from developers. Some stories from the trenches over the first few days:

  • We’ve had two code submissions – one is a CodeIgniter plugin, and the second is a .NET SDK. We’re working on cleaning up both, and then we will share them with the world
  • Developer Vince Duquette, who had invested some time in the call widget API, e-mailed us this morning to say that he’s already switched over to the OpenTok API and that, “the new Open Tok API is badass!! Exactly what I was looking for. I love all the control I have on the client side. I already have a prototype up and running.”
  • We saw a remarkable number of staging API keys requested in the first few days since we’ve launched the OpenTok API, and a number of you are ready to launch your own applications. If that doesn’t show how simple it is to use OpenTok, then I don’t know what will.
  • 4 partners launched with us on Monday. We’ve already profiled Assembla and WinkVid, and we will give you a sneak peek into TutorTrove very soon. Our fourth launch partner was TheRealNews Network, who will bring video chat debate to trending news topics.
  • TokBox hosted a booth at the Web2.0 Summit at the Palace Hotel in San Francisco, and saw great interest from a variety of folks. Healthcare, banking, media and even someone from the IMF swung by to check out the OpenTok showcase applications. Clearly the limits of what OpenTok can do have not yet been discovered.

Now, we’d like some input back from the community. Our next blog post is going to be building a sample application that you want, and then walking through the code to show how we did it. Please leave suggestions in the comments, and we’ll pick our favorite, and then write about it.

The commenter who provides the chosen sample application will be sent an OpenTok t-shirt as a thank you for the idea.

Read More

Presenting OpenTok

My name is Melih Onvural, and I’ve been working the last two years building the TokBox Call Widget API.

The TokBox Call Widget API includes the video chat embed featured in the last few blog posts, as well as a simple API interface to let developers generate their own video chats as needed. TokBox.com is built on top of the Call Widget API as well, though there’s a bit more behind the scenes than is publicly exposed.

Over the last two years the Call Widget API has gone from a fledgling community of one partner, the Royal Association for the Deaf, to creating a business development team, an active Google Group, one of the initial Ning applications and partner deployments in the double-digits.

Building out the API involved a lot of outward facing work. Sample applications, server SDKs and helping partners build their integrations. The list of requests for additions to the API were fast coming, and included the full range from customizing the appearance of the call widget to adding integration with screen sharing applications. Some of these were quickly implemented, such as being able to customize the title bar, while others… Let’s just say they’re still on our to-do list.

One thing we heard too often to ignore was the need for control. Control over look and feel. Control over sizing of the video boxes. Control over which videos to display. If it could be controlled, then developers wanted control over it.

And so in June we started to explore how to give more control to the developers over their video chat experience. The combined efforts of the whole TokBox team came together to solve this problem, and today we’re proud to announce the launch of the OpenTok API.

The goal of the OpenTok API is to give developers control over how they weave video chat into their application. There is no longer a large chrome, extra buttons or text chat to compete for real estate. If you need these options, the Call Widget is still available, but for those who don’t, you now have control.

Control over what exactly?

Well the OpenTok API is a combination of a server-side library, mainly for authentication, and a client-side library, which gives the developer the ability to connect to a session, publish a video stream and subscribe to other streams. There are no rules imposed by the library, and so if the developer wanted to build a conference room application and subscribe to all streams, then they could, and if the developer wanted to build a speed dating application where only one stream were subscribed to, then they could.

We’d love to see what you create with the OpenTok API, and invite you to get an API key and start developing. What can you do now that you have all of the control?

Read More

Assembla integrates OpenTok API

Check out Assembla, and you’ll see a host of services to bring workspaces for distributed software teams. All the necessities for managing a software project are there.

Bug tracking software, check.
Repository hosting, check.
Wikis, file upload, team messaging, check, check, check.

OpenTok video chat, check!

That’s right, Assembla is launching their OpenTok integration as we launch OpenTok to the world. Assembla was able to quickly integrate the new API, and saw immediate benefits according to CEO Andy Singleton who sent us this note; “We had a surge in team spirit and camaraderie the first time that we tested TokBox video chat in our development team chat room.  Thanks to TokBox for giving us a service that is so easy to integrate.”

It was great to hear that the integration of the OpenTok API was so straight-forward for the Assembla team and that they felt the benefits of video chatting for themselves so immediately.  Our goal is to make bringing video chat to your application as easy as possible, and clearly the Assembla story goes to show that we’re on the right track.

If you’re interested in seeing how Assembla have integrated video chat into their collaborative workspaces, then head on over to http://www.assembla.com and see if video chat can help your development team.

If you’re interested in learning more about how to integrate the OpenTok API into your application, then head over to our Getting Started page.

Either way, we hope you’ll subscribe to our RSS feed, follow us on Twitter or like us on Facebook to learn more about the OpenTok API, and how easy it is to bring video chat to any website.

Read More

Coming soon…

TokBox is launching something very shiny, very new; very soon.

Check back after midnight, eastern to learn more.

Read More

Customizing the video chat embed (part 2)

In this blog post, we will talk about the different areas of the TokBox video chat embed, and then talk about the various customization features of each of these sections. If you need help with how to customize the video chat embed, then look at Part 1 of this two-part series.

Please note that customizing the TokBox video chat embed requires being comfortable working with HTML. If you are not comfortable working with HTML, then changing the code of the embed generator could break your TokBox video chat embed.

Read More