iOS Tutorial — Getting started with the OpenTok PhoneGap plugin

This video shows you how to set up PhoneGap so you can build an OpenTok-powered iOS application using HTML, CSS, and JavaScript.

Build a video chat iOS Application that can publish and subscribe to videos on your web application with the same JavaScript code!

Step 1: Create and set up a PhoneGap application

Create and set up a PhoneGap application.

Step 2: Add OpenTok framework into your application

Clone from a sample OpenTok iOS app:

git clone --recursive https://github.com/opentok/OpenTok-iOS-Hello-World.git

Add the the OpenTok Framework, the OpenTok bundle file, and other frameworks that the OpenTok SDK requires. For details, see full instructions at the OpenTok PhoneGap Plugin page at GitHub.

Under Build Settings, change Architectures and valid Architectures to use only arm7.

Step 3: Add the OpenTok PhoneGap plugin

The OpenTok PhoneGap plugin is at https://github.com/opentok/PhoneGap-Plugin.

Clone the OpenTok PhoneGap plugin:

git clone https://github.com/opentok/PhoneGap-Plugin.git

From the src directory, copy the OpenTokPlugin.h and OpenTokPlugin.m files into your project's Plugin directory.

Copy the OpenTok.js file into your www/js folder.

In the Resources folder of your project, in the Cordova.plist file, add a Plugins key named TokBox and set its value to OpenTokPlugin

In the Cordova.plist file, add an ExternalHosts key (the default name is Item 0), and set its value to *

Demo

In the index.html file for your project, add a script tag to include the js/OpenTok.js file.

Look at the OpenTok hello world demo. Copy and paste the JavaScript code from the iframe of the page and paste it into the js/index.js file.

Save and run!

Watch your video being published between your iOS device and the getting started web page!