How to use in Ionic 3+

[opentok]

How to use in Ionic 3+

[msach22]

@mmubasher Thanks for filing the issue. It looks like you're not passing in the OpenTok JS SDK to the NetworkTest constructor, can you please set OT to the OpenTok.js SDK? You can download the OpenTok JS SDK via npm by running the following: npm install @opentok/client?

[mmubasher]

@msach22 thanks for following up on this. I proceeded testing with @opentok/client and getting the errors

Argument of type 'typeof OT' is not assignable to parameter of type 'Client'.
  Types of property 'checkScreenSharingCapability' are incompatible.
    Type '(callback: (response: OT.ScreenSharingCapabilityResponse) => void) => void' is not assignable to type '(callback: (response: OT.ScreenSharingCapabilityResponse) => void) => void'. Two different types with this name exist, but they are unrelated.
      Types of parameters 'callback' and 'callback' are incompatible.
        Types of parameters 'response' and 'response' are incompatible.
          Type 'OT.ScreenSharingCapabilityResponse' is not assignable to type 'OT.ScreenSharingCapabilityResponse'. Two different types with this name exist, but they are unrelated.
            Property 'extensionInstalled' is optional in type 'ScreenSharingCapabilityResponse' but required in type 'ScreenSharingCapabilityResponse'. 

In the constructor of NetworkTest, first param is of OT.Client type but @opentok/client does not provides any such interface

[msach22]

@mmubasher Can you please share the way you're instantiating the NetworkTest object? It should not be OT.Client - instead just use OT like so:

const otNetworkTest = new NetworkTest(OT, {
  apiKey: '123456', // Add the API key for your OpenTok project here.
  sessionId: '1_MX40NzIwMzJ-fjE1MDElGQkJJfn4', // Add a test session ID for that project
  token: 'T1==cGFydG5lcXN0PQ==' // Add a token for that session here
});

[mmubasher]

After using @opentok/client SDK as you suggested, It still gave a compile time error Argument of type 'typeof OT' is not assignable to parameter of type 'Client'. on NetworkTest Constructor so I suppressed it with @ts-ignore.
For now, it at-least compiled but with some errors in console. Here is the code

import { Component, OnInit } from '@angular/core';
import NetworkTest from 'opentok-network-test-js';
import * as OT from '@opentok/client';
import {API_KEY, SESSION_ID, TOKEN } from '../../assets/config';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage implements OnInit {
  otNetworkTest: NetworkTest;

  constructor() {
    if(API_KEY && SESSION_ID && TOKEN){
    // @ts-ignore
    this.otNetworkTest = new NetworkTest(OT, {
      apiKey: API_KEY,
      sessionId: SESSION_ID,
      token: TOKEN
    });
    } else {
      alert('Please add your opentok credentials in src/assets/config.ts file');
    }
  }

  ngOnInit() {
    this.otNetworkTest.testConnectivity().then((results) => {
      console.log('OpenTok connectivity test results', results);
    }).catch(function (error) {
      console.log('OpenTok connectivity test error', error);
    });
  }
}

Following is the console output

opentok.js:42522 OpenTok:Subscriber:error Invalid state transition: Event 'disconnect' not possible in state 'disconnected' +0ms
debug @ opentok.js:42522
onInvalidTransition @ opentok.js:26815
transit @ opentok.js:62375
fire @ opentok.js:62366
target.(anonymous function) @ opentok.js:62565
Subscriber._disconnect @ opentok.js:27915
Subscriber._destroy @ opentok.js:27850
(anonymous) @ opentok.js:30517
destroySubscribers @ opentok.js:30516
(anonymous) @ opentok.js:30361
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
e.invokeTask @ polyfills.js:3
i.isUsingGlobalCallback.invoke @ polyfills.js:3
n @ polyfills.js:3
setTimeout (async)
o @ polyfills.js:3
t.scheduleTask @ polyfills.js:3
r.scheduleTask @ polyfills.js:3
r.scheduleMacroTask @ polyfills.js:3
(anonymous) @ polyfills.js:3
o.(anonymous function) @ polyfills.js:2
sessionDisconnectedHandler @ opentok.js:30350
EventEmitter.emit @ opentok.js:4903
trigger @ opentok.js:1857
dispatchEvent @ opentok.js:1827
Connection.destroy @ opentok.js:17975
(anonymous) @ opentok.js:33695
EventEmitter.emit @ opentok.js:4888
trigger @ opentok.js:1857
emit @ opentok.js:1867
Dispatcher.onClose @ opentok.js:32949
onClose @ opentok.js:62973
EventEmitter.emit @ opentok.js:4903
(anonymous) @ opentok.js:64116
g @ opentok.js:4972
EventEmitter.emit @ opentok.js:4903
_webSocketClosed @ opentok.js:63811
newWebSocket.onclose @ opentok.js:63733
H @ polyfills.js:3
t.invokeTask @ polyfills.js:3
r.runTask @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
home.ts:28 OpenTok connectivity test results {success: true, failedTests: Array(0)}failedTests: []success: true__proto__: Object

I have created a sample project here Sample StackBlitz. Please add your opentok credentials in src/assets/config.ts file for it to work. Thank you

[msach22]

@mmubasher Apologies for the delay. Quick question, are you running this for the web or mobile? Unfortunately, this network test does not support mobile endpoints (specifically if you're using Ionic with our Cordova plugin).

[mmubasher]

@msach22 thank you for your response. Yes you are right, I need to run it in a Cordova environment where camera is not accessible using browser kit. So, this means it needs to be implemented similar to the opentok/cordova-plugin-opentok right?

[msach22]

Yes, we would have to create a custom plugin for network test just like opentok/cordova-plugin-opentok.

I'm going to go ahead and close the issue here, but please feel free to file an issue on the Cordova plugin so we can track it there.