Fun With Core Graphics in iOS

Several partners have been asking us about the options around getting access to media streams as they come and go from an iOS device. While more robust media access features are further off, I wanted to take some time to explore the options an iOS developer can play with today.

The UIKit view hierarchy integrates with a fairly simple animation and compositing API. Every instance of UIView is backed by an animation layer (CALayer), which can be accessed (and manipulated) without much complexity. A neat thing about CALayer is that you render its contents at any time using the renderInContext: method. Most often, your render target is the window, which is managed by the UIKit view hierarchy, so none of this knowledge is particularly compelling. Unless of course, you wanted to render the contents of the animation layer to a bitmap in memory to perform, say, facial recognition with the iOS 5 CIDetector.

Read More

Getting started with the OpenTok iOS SDK

The OpenTok iOS SDK lets you use OpenTok video sessions in apps you build for iPad, iPhone, and iPod touch devices. This means you can use OpenTok video sessions that connect iOS users with each other and with web clients.

The OpenTok iOS SDK uses the same platform architecture and concepts that are used in the OpenTok JavaScript library and the OpenTok ActionScript library. However, you code iOS apps in Objective-C.

This article will explain the most basic parts of the OpenTok iOS SDK. It will also show how the functionality and concepts used in the OpenTok iOS SDK are shared in the OpenTok JavaScript and ActionScript library.

Read More

How I built Minute Grams: 3 Minute Tutorial

Update: March 13, 2014 – Please note that this blog post references the archiving functionality in our OpenTok 1.0 platform. This feature is no longer being supported. Learn more about archiving using our OpenTok 2.0 platform.

Minutegrams is a webapp to send video messages via email.
In this tutorial, let’s build a video recorder with the Tokbox API.


Step 1: Include tokbox javascript file

  • Let’s start with our html document, and add jquery and tokbox javascript library.
  • We need ‘rElement’ div to put our recorder in, and ‘pElement’ div to put player in.
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://staging.tokbox.com/v0.91/js/TB.min.js"></script>
</head>
<body>
    <div id="rElement"></div>
    <div id="pElement"></div>
</body>
</html>

Step 2: Create a Tokbox recorder Manager object

Read More

Simple OpenTok Publisher Widget

A few months ago I made an OpenTok JavaScript plug-in that created a simple widget that publishes and subscribes to. Essentially it creates a stripped down version of the basic html embed that allows you to customize things further however you’d like. You can try that widget live here.

This past week Pasha from PuppetSmith.com wanted to create a simple way for the admins on his site to publish a stream and have all non-admins as viewers. You could certainly build this functionality yourself with the full API, but it would be nice to have a quick solution for this common scenario.

As a result, I built in some features to the _OT.widget JavaScript plugin that will handle this scenario. Now, it will handle all publisher/subscriber logic depending on what token you pass it. You can also pass it the publishFull property that will show the publisher in full screen rather than in the corner of the window. With one publisher, this is what the widget looks like:

You can visit the GitHub repo for the plug-in here.

Here is a sample implementation in PHP that generates a token, passes it down to the widget, then initializes.

Read More

Live Face Recognition with OpenTok and Face.com

Next weekend is our second HAPI Hack Weekend at our office in San Francisco and we’re excited to have a bunch of interesting APIs there to hack with. One API that I’m particularly excited about is Face.com, which gives developers a set of methods for easy face recognition.

I created a simple app to introduce the basics of using OpenTok with Face.com:

Read More

Adding metadata on connections

You can now attach metadata for each client that connects to a session. For example, you can add information about the connecting user. When a client connects to the session, all existing clients connected to the session can access the metadata for the new connection.

You add this metadata by passing it into the generate_token() method of the OpenTok server-side library. The metadata is then securely embedded in the token string. Here’s an example, using the OpenTok PHP library:

Read More

Creating chatroulette with node.js, socket.io & OpenTok

This tutorial will create a simple chat roulette app using node.js, socket.io and OpenTok. Socket.io allows us to pass data between clients in real-time using only javascript and eliminate the need for a database. OpenTok allows us to quickly publish and subscribe to webcam streams without having to worry about server requirements and bandwidth usage — all we have to do is implement a simple and free javascript API.

Read More

OpenTok jQuery plugin available

We have designed the OpenTok JavaScript library to be easy for all JavaScript developers to use. But the jQuery OpenTok plugin, created by jQuery developer Jose Torres, could make it even easier to use OpenTok audio-video sessions in your web-based apps.

The plugin is hosted at github.com:

https://github.com/jmtorres/jquery-opentok

Using the jQuery plugin, you can fully integrate OpenTok into your jQuery-based apps.

To use the plug-in, include the OpenTok, jQuery, and jquery.opentok scripts in your HTML page:

Read More

OpenTok JS Plugins – Widget

I have began to create a set of OpenTok JavaScript plugins to provide boilerplate solutions for some common use cases.

The first plugin is the _OT.widget, which makes it simple to create a videochat widget similar to the HTML embed widget seen here.

 

Read More

Using signals to pass real-time data

Problem

You are developing a multi-user OpenTok application and you need a way to pass data between user in real-time.

Solution

Use Session.signal() to notify user when there is new data on the server to be retrieved.

Tutorial Overview

In this tutorial I will show you how to implement this solution by creating a simple chat app that uses OpenTok signals to pass data between users in an OpenTok session. The app will allow connected users to communicate through both video chat and text chat.

I will use Rails for the backend portion of the app, however this technique can be applied to any server-side technology. I also use jQuery for DOM manipulation and AJAX and the OT_LayoutContainer class created and explained in this blog post for managing the layout of the video streams.

Read More