nativescript-opentok

Nativescript OpenTok

A Nativescript plugin for the OpenTok iOS and (coming soon Android) SDK.

OpenTok: https://tokbox.com/developer/

Getting Started

Requirements

• API Key with OpenTok. Get one here.
• Ability to generate a valid session id (either through OpenTok account or back-end service)
• Ability to generate a valid token (either through OpenTok account or back-end service)
• Opentok.framework requires projects to be built for only armv7 (device); i386 (simulator), armv6, armv7s, and arm64 are not supported.

Installation

Node Package Manager (NPM)

• npm install nativescript-opentok --save

Integration

Routed Sessions

View

You will first need to import the custom element into the {N} xml view. This can be accomplished by adding this snippet: xmlns:OT="nativescript-opentok" to your existing Page element tag.

The basic integration example would include the following declarations for publisher and subscriber. Notice subscriber is any element with id="subscriber".

<StackLayout id="subscriber" width="100%" height="100%"></StackLayout>
<OT:TNSOTPublisher id="publisher" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></OT:TNSOTPublisher>

Next in your page's binding context (a controller, view model, etc.), you will need to import and hook to the OpenTok implementation.

import {TNSOTPublisher, TNSOTSession} from 'nativescript-opentok';

public _apiKey:string = 'API_KEY';
public sessionId: string = 'SESSION_ID';
public publisherToken: string = 'TOKEN';

private publisher: TNSOTPublisher;
private session:TNSOTSession;

constructor(private page: Page) {
   super();
   this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this.sessionId);
   this.publisher = <TNSOTPublisher> this.page.getViewById('publisher');
   this.initPublisher();
}

initPublisher() {
   this.session.connect(this.publisherToken);
   this.publisher.publish(this.session);
}

Special Articles

• Overlay UI on the Video Stream
• Angular 2 Integration Guide
• Controlling Resolution and FPS

Images

iPhone	iPad

Notes

• Publishing is not supported in the Simulator because it does not have access to your webcam. You may see a yellow tea-kettle instead.
• TNS stands for Telerik NativeScript