Suggestions

close search

Add Messaging, Voice, and Authentication to your apps with Vonage Communications APIs

Visit the Vonage API Developer Portal

Vonage Video API Hackathon Kit

A quickstart guide for adding Vonage Video API functionality to your Hackathon application

TokBox is hosting a virtual hackathon from August 1st to September 18th. Join the HackTokBox Slack group and jump to the #arlivevideo Slack channel to get started.

Quick Links

What is OpenTok?

The OpenTok platform, developed by Vonage, makes it easy to embed high-quality real-time interactive video, voice, messaging, and screen sharing into web and mobile apps.

The platform includes client-side libraries for web, iOS, Android, Windows, and Linux, as well as server-side SDKs and a REST API.

How can I use OpenTok?

In addition to adding real-time audio/video chat to web and mobile apps, the OpenTok platform provides a wide variety of features that can be used to develop innovative use-cases in almost any industry.

Here are just a few ways companies around the world are using OpenTok:

Here are some ideas of what you build during your Hackathon:

Demo

To see an example of OpenTok in action, you can check out our video conferencing demo below:

  1. Go to opentokdemo.tokbox.com or download OpenTokApp in the App Store
  2. Create a room
  3. Share the room URL (or room name) with a friend or just open in a new tab to start a video chat

Key concepts

Sessions & Tokens

Every OpenTok video chat occurs within a session. You can think of a session as a “chat room” where clients (browser or mobile app) can publish and subscribe to one another's streams. Sessions are hosted on the OpenTok cloud, and each session is associated with a unique session ID. To allow multiple clients to chat with one another, you would simply have them connect to the same session ID.

A token is your “key” to the session and is generated for a specific Session ID. Each user should have his/her own token to connect to the session. These tokens expire after a certain period of time (specified by the developer), whereas the session does not.

Session IDs and Tokens are usually created using the server-side component of an OpenTok application, but if you’re just building a demo or proof of concept you can generate them in your Account - just go to your Project Overview page and scroll down to Project Tools.

Connections, Publishers & Subscribers

Once a client has a session ID and a token, it can establish a connection to the session using code from the client-side SDKs (see below). This connection dispatches an event to the session and any clients who are already connected. Once connected, the client can publish an audio/video stream from its camera and microphone

When a client publishes a stream, events are dispatched to all clients connected to the session. Upon receiving the event, the clients can subscribe to the newly published stream.

For more info on sessions, tokens, streams, and more, check out our Video API Basics page.

Get your API Key

  1. Get your API key by signing up for a free account here. Make sure to use your hackathon promo code when signing up.
  2. Once you’re logged into your account, create a new project. While building your app, you’ll use the Project Overview to generate Session IDs and Tokens (more about that below).

Setting up a client (with sample apps)

The client-side of an OpenTok app provides most of the functionality in an OpenTok application. The client uses the Session ID and token (see above) to connect the user to a session from a web browser or mobile app.

Basic video chat

To see how to set up the most basic client-side code on the web, check out our Hello World. For mobile development, you can clone or download our client-side sample apps for iOS Swift, iOS Objective-C and Android on Github.

Accelerator sample apps + extras

To get a slightly more polished client-side with some advanced features up and running relatively quickly, you can use our Accelerator Sample Apps for Web, iOS, and Android on Github.

These sample apps include basic audio/video chat functionality along with user controls, built-in text-chat and some starter code for setting up screen sharing and archiving. For more info on setup and advanced features for these sample apps, view their READMEs on Github. You can customize the UI for these samples as much as you like using CSS.

Additional mobile samples

If you’d like to implement multiparty chat, custom audio/video drivers or other special use cases on mobile, we have several other sample apps for Android, iOS Swift, and iOS Objective-C

More info

For more info on setting up the client-side code for your OpenTok application, check out our Developer Guides.

Setting up a server (optional)

The server-side component of an OpenTok app is used to generate Session IDs and Tokens for application users. If you’re just building a demo or proof of concept, you might not need a server-side component - you can generate Session IDs and Tokens in the Project Overview page of your project in your Video API account (just open or create a project then scroll down to ' `Project Tools').

If you’re interested in setting up a server-side component, here are some quick-start sample apps for each server-side SDK language:
PHP | Java | .NET | Node | Ruby | Python

For more info on setting up server-side code, check out our Developer Guides.

Augmented Reality and Live Video

To get started with AR and Live video, check out the samples below:
ARKit
ARKit Frame Meta Data

Advanced Features

In addition to basic video chat, OpenTok can be used for a variety of more advanced features. Our Accelerator sample apps above include code some of this functionality (screen sharing, archiving and text chat), but here are some helpful guides with some more information about setting up advanced features:

Screen sharing:
The Accelerator sample apps above include the starter code for screen sharing functionality, but you should also check out our screen sharing guides for Web, iOS, and Android. Usually, screen sharing on the web requires you to create a custom browser extension, but if you’re only using localhost to demo your app you can use this pre-made extension.

Other advanced feature guides:
Archiving - Tutorial | Guide
Text chat
Broadcast
SIP Interconnect (connects OpenTok sessions with SIP calls/telephony)

For more on implementing these features and others, check out our Developer Guides. You can also view our API Reference Docs for info about specific methods and calls.

Tips & Tricks

Getting Help

If you have a question or need help building your app, there are a few ways to reach us for a quick response: