nativescript-opentok
by sean-perkins | v2.0.1
Integrates OpenTok for NativeScript.
npm i --save nativescript-opentok

Nativescript OpenTok

npm npm

A Nativescript plugin for the OpenTok iOS and 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 {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from 'nativescript-opentok';

private _apiKey:string = 'API_KEY';
private _sessionId: string = 'SESSION_ID';
private _token: string = 'TOKEN';

private publisher: TNSOTPublisher;
private subscriber: TNSOTSubscriber;

private session: TNSOTSession;

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

initPublisher() {
this.session.connect(this._token);
this.publisher.publish(this.session, '', 'HIGH', '30');
this.publisher.events.on('streamDestroyed', (result) => {
console.log('publisher stream destroyed');
});
}

initSubscriber() {
this.session.events.on('streamCreated', () => {
this.subscriber.subscribe(this.session);
});
}

Special Articles

Images

iPhone iPad
iPhone Image iPad Image

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