Using plugin (opentok) with Ionic gives javascript reference not found error


#1

I’m trying to install the a plugin but I can’t seem to get the javascript to load

The plugin that I’m trying to load is https://github.com/songz/cordova-plugin-opentok

I tried installing the plugin as such

$ cd myIonicProjectFolder
$ cordova plugin add https://github.com/songz/cordova-plugin-opentok/

Afterwards, I tried adding the the js file in index.html

...
    <script src="cordova.js"></script>
    <script src="opentok.js"></script>

However, when I tried running it using the ionic serve or ionic emulate ios, I get this error that the javascript is not found.

But, when I looked in the plugin folder, I do see it there /plugins/com.tokbox.cordova.opentok/www/opentok.js

Below is the tree structure

|____com.tokbox.cordova.opentok
| |____Gruntfile.js
| |____LICENSE
| |____README.md
| |____docs
| | |____...
| |____example
| | |____...
| |____package.json
| |____plugin.xml
| |____scripts
| | |____...
| |____src
| | |____...
| |____www
| | |____opentok.js

Update 1

I’m noticed that when installing other plugins (such as SQLitePlugin), it is not required to include the extra js. So, I also tried updating /plugins/ios.json to include OpenTokPlugin, but still couldn’t get it to load. I noticed that my cordova_plugins.js file is not autoloading OpenTokPlugin

cordova.define('cordova/plugin_list', function(require, exports, module) {
module.exports = [
    {
        "file": "plugins/com.ionic.keyboard/www/keyboard.js",
        "id": "com.ionic.keyboard.keyboard",
        "clobbers": [
            "cordova.plugins.Keyboard"
        ]
    },
    {
        "file": "plugins/cordova-plugin-console/www/console-via-logger.js",
        "id": "cordova-plugin-console.console",
        "clobbers": [
            "console"
        ]
    },
    {
        "file": "plugins/cordova-plugin-console/www/logger.js",
        "id": "cordova-plugin-console.logger",
        "clobbers": [
            "cordova.logger"
        ]
    },
    {
        "file": "plugins/cordova-plugin-device/www/device.js",
        "id": "cordova-plugin-device.device",
        "clobbers": [
            "device"
        ]
    },
    {
        "file": "plugins/cordova-plugin-splashscreen/www/splashscreen.js",
        "id": "cordova-plugin-splashscreen.SplashScreen",
        "clobbers": [
            "navigator.splashscreen"
        ]
    },
    {
        "file": "plugins/cordova-sqlite-common/www/SQLitePlugin.js",
        "id": "cordova-sqlite-common.SQLitePlugin",
        "clobbers": [
            "SQLitePlugin"
        ]
    }
];
module.exports.metadata = 
// TOP OF METADATA
{
    "com.ionic.keyboard": "1.0.4",
    "cordova-plugin-console": "1.0.0",
    "cordova-plugin-device": "1.0.0",
    "cordova-plugin-splashscreen": "2.0.0",
    "cordova-plugin-whitelist": "1.0.0",
    "cordova-sqlite-common": "0.7.0-dev",
    "com.tokbox.cordova.opentok": "1.0.3"
}
// BOTTOM OF METADATA
});

Please advice,

Thanks!

Justin


#2

Hi All,

I have resolved this. I’m based in China and amazonaws is not very China friendly so when this plugin is trying to download OpenTok iOS SDK, it will just die.

So, I uploaded the SDK onto my own server and I would modify this file: plugins/com.tokbox.cordova.opentok/scripts/downloadiOSSDK.js

...
    // downloadFile('https://s3.amazonaws.com/artifact.tokbox.com/rel/ios-sdk/OpenTok-iOS-2.4.0.tar.bz2', './opentok-ios-sdk-2.4.0.tar.bz2', function (err) {
    downloadFile('https://my.own.hosting.com/OpenTok-iOS-2.4.0.tar.bz2', './opentok-ios-sdk-2.4.0.tar.bz2', function (err) {
...

Next, in my terminal, I would simply remove ios and add ios platform again

$ ionic platform rm ios
$ ionic platform add ios

Finally, in my index.html, I would have the following

...
    <script src="cordova.js"></script>
    <script src="opentok.js"></script>

Cheers!

Justin


#3

Justin - how did you use opentok.js. I tried using the approach mentioned in https://github.com/opentok/learning-opentok-web. I am getting error:

“You cannot test page using webRTC through file system due to browser permissions. You must run it over a web server”

Any pointers to solve this would be really helpful.

  • Saurabh

#4

I found “NetworkError: 404 Not Found - http://localhost:8100/opentok.js” after installing and run. Please help me

I placed in my index.html

Please help me


#5

Hi,

Do you have an apache (or some kinda web server) running on your local machine?

Justin