Angular 2 Integration Guide

This tutorial will walk you through the integration process with NativeScript OpenTok with the Angular2 Advanced Seed.

Registering Element

You will first need to navigate inside the nativescript folder and open up the app.ts file. Inside here, you will import nativescript angular's registerElement class as well as register the custom TNSOTPublisher and TNSOTSubscriber elements that is used for the OpenTok integration.

import { registerElement } from 'nativescript-angular/element-registry';
registerElement('TNSOTPublisher', () => require('nativescript-opentok').TNSOTPublisher);
registerElement("TNSOTSubscriber", () => require("nativescript-opentok").TNSOTSubscriber);

Displaying the OpenTok Streams

Next you will need to use the publisher and subscriber elements inside of your component's view. The only main difference with Angular2 vs. the NativeScript base implementation, is the lack of the OT: on the element declaration and the use of Angular's two-way property binding:

<GridLayout rows="*,auto,auto">
     <GridLayout>
         <TNSOTSubscriber #subscriber id="subscriber" width="100%" height="100%"></TNSOTSubscriber>
         <TNSOTPublisher #publisher id="publisher" verticalAlignment="top" horizontalAlignment="right" margin="10" width="100" height="100"></TNSOTPublisher>
     </GridLayout>
</GridLayout>

Note: It is very important that you have the elements assigned with #subscriber and #publisher or something similar, in order to access them through the component.

Now in your component, you will need to connect to the session and set-up the publisher and subscriber logic.

    import {Component, ViewChild, ElementRef, OnInit} from "@angular/core";
    import {TNSOTSession, TNSOTPublisher, TNSOTSubscriber} from "nativescript-opentok";

    ...


    private _apiKey: string = '45644202';
    private _sessionId: string = '1_MX40NTY0NDIwMn5-MTQ3MjIyNzU3NTAwM35FczFWMHdVekNxeXNabWRSTUdIUkpjRmR-fg';
    private _token: string = 'T1==cGFydG5lcl9pZD00NTY0NDIwMiZzaWc9ODMwYzUyMTEwMjk5ODQ1OGQ3YmJlOWY1MDFhOGU2MGQwZGQyMmQyYjpzZXNzaW9uX2lkPTFfTVg0ME5UWTBOREl3TW41LU1UUTNNakl5TnpVM05UQXdNMzVGY3pGV01IZFZla054ZVhOYWJXUlNUVWRJVWtwalJtUi1mZyZjcmVhdGVfdGltZT0xNDcyODQ4NDk1Jm5vbmNlPTAuNjYyMzAzOTA2MTY2OTI2JnJvbGU9cHVibGlzaGVyJmV4cGlyZV90aW1lPTE0NzU0NDA0OTU=';

    private session: TNSOTSession;

    @ViewChild("publisher") publisher: ElementRef;
    @ViewChild("subscriber") subscriber: ElementRef;

    constructor() {
        this.session = TNSOTSession.initWithApiKeySessionId(this._apiKey, this._sessionId);
    }

    ngOnInit() {
        this.session.subscriber = this.subscriber.nativeElement;
        this.session.connect(this._token);
        let publisher:TNSOTPublisher = this.publisher.nativeElement;
        publisher.publish(this.session);
    }

Note: Remember to make your component implement OnInit.

Unless you are testing OpenTok integration, you will most likely have a back-end service that handles generating and serving valid session ids and tokens for your app to use. This walk-through does not consider that integration piece and is external to this plugin.

---

Having issues or questions?

Move over to the issues section to open up a question request. Thank you for using NativeScript OpenTok plugin.