Ng2-opentok NPM

ng2-opentok

Description

This library is an angular 2 wrapper in typescript of opentok.js library(web). Full description of the opentok platform can be found here. This library is still in beta version, so any contribution is always welcome.

Documentation

The documentation for opentok.js can be found here and used as a reference when using this library.

Here is a wiki with description ONLY of the opentok service provided by in this library, to make the implementation of a simple video call between two users easier.

Use the opentok official documentation to learn how to implement the logic with the help of the models wrapped in this library, for custom use and for video call between multiple users. The wiki does not contain information about them, use the files with code as reference:

Basic models

Events

Errors

Installation

To install this library, run:

$ npm install ng2-opentok --save

Use

This library should be used as described in the official documentation for Opentok. This means you can follow their tutorials for creating a backend server, and use the new service and classes available in this library. The prerequirements stay the same though.

Prerequirements

To use this library you need to have:

A valid TokBox account — if you don't have one, you can sign up for a free trial
A webcam and microphone
Google Chrome, Firefox or another supported browser
A local web server — if you don't already have one, try setting up a SimpleHTTPServer using Python or http-server using Node.js.

Basic video chat tutorial from opentok

Authentication prerequirements

In order to use the library OpenTok, the client will need to have some authentication credentials — an API Key. The API key can be obtained from the valid TokBox Account.

Use the DEMO project and the ng2-opentok documentation to see how the library is used.

After you have read the basic tutorial and obtained an api key, you can add to your Angular AppModule:

    typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';

    // Import Opentok library
    import {OpentokModule} from "ng2-opentok/dist/opentok.module"

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,

        // Add you opentok module here with the api key for opentok
        OpentokModule.forRoot({apiKey: "your-api-key-here"})
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

Once your library is imported, you have to add the actual opentok.js library and it's css file in the scripts section in your index.html.

You can also install OpenTok.js using the @opentok/client npm package.

    html
    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>OpentokNg2Demo</title>
      <base href="/">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="icon" type="image/x-icon" href="favicon.ico">

      <!-- YOUR OPENTOK CSS AND JS go here -->
      <link rel='stylesheet' href='https://static.opentok.com/webrtc/v2.10.0/css/TB.min.css'>
      <script src='https://static.opentok.com/v2/js/opentok.min.js'></script>
      <!-- / YOUR OPENTOK CSS AND JS go here -->

    </head>
    <body>
      <app-root></app-root>
    </body>
    </html>