songz/cordova-plugin-opentok

Cordova Plugin for OpenTok - add webrtc video to your iOS or Android App

Cordova Plugin for OpenTok iOS

Note: This repo is no longer maintained. You can find the updated Cordova OpenTok Plugin here.


Weave video chat into your web (and now mobile!) application.

Using Cordova CLI

Make sure You have Cordova 3.5.0 or greater installed. If you haven't, view Cordova instructions Page.
Bug filed against Cordova.

Clone this repo to get the source code for OpenTok's Cordova plugin

1. Create a Cordova app by typing into Terminal:
   cordova create my-app

2. Install OpenTok plugin into your app: cd my-app
cordova plugin add https://github.com/songz/cordova-plugin-opentok/

Plugin already exists? To remove OpenTokPlugin: cordova plugin remove com.tokbox.cordova.opentok

3a. For Android Apps, add Android platform into your cordova app cordova platform add android

3b. For iOS Apps, add iOS platform into your cordova app
cordova platform add ios
iOS deloyment, as of March 14, needs additional setup. See FAQ/Troubleshoot.

4. Edit your code in the created www folder

5. To deploy your app to your android device: cordova run android --device

6. To deploy your app to your iOS device:

As of 1/17/2014, you cannot deploy to device with Cordova CLI for iOS apps. You need to first prepare you iOS app: cordova prepare iOS
Next, open the project in xcode and run it on device: open platforms/ios/HelloWorld.xcodeproj

---

Getting Started on your Project:

All your editing will be done in your www folder.

To use the opentok library, make sure you include opentok.js file in your HTML document.
<script type="text/javascript" charset="utf-8" src="opentok.js"></script>

All JavaScript code should be written in deviceready function in /js/index.js because it is executed after all dependencies has loaded.

deviceready: function() {
    // Do Your Stuff Here!
},

To view and interact with elements on the browser console, use weinre. Here's a few things to take note of if you are using weinre on a local network:

• make sure all devices are connected to the same network
• make sure you bind weinre to 0.0.0.0 so your mobile devices: weinre --boundHost 0.0.0.0
• when you include the js library from weinre, make sure to use your computer's ip address and not localhost!

---

Sample code

Located in example/www. To see the interop between mobile and web, simply deploy to your device and visit https://opentokrtc.com/cordova on your browser.

All of the code resides in example/www/index.html and example/www/js/index.js.

Have Fun!

---

Contribute

1. Run npm install to install the necessary grunt files
2. Run grunt watch to run grunt tasks automatically after modifying files. This compiles the coffee files to JS and concatenates them
3. Modify JS components in src/js/
4. Modify iOS components in src/ios/
5. Modify Android components in src/android/
6. Send pull request!

---

Documentation for Cordova Plugin

---

Updates:

April 15 -

• fix issue 22 for sessionConnected callback
• fix issue 6 add connectionCreated and Destroyed events
• Reorganized event passing between JS and native SDKs

April 10 -

• Upgraded to v2.2 for Android SDK and iOS SDK. Solves orientation and performance issues.

March 14 -

• Removed jquery dependency on sample code
• Renamed namespace to com.tokbox.cordova.opentok
  • If you have the previous version, please remove it: cordova plugin remove com.tokbox.opentok.cordova.OpenTokPlugin

---

FAQ TROUBLESHOOT GUIDE:

• Xcode 5.1 and Cordova iOS not working
  • Solution at Cordova
• Building ios project gives Apple Mach-O Linker Errors that looks like this:
  • Solution:
    • Go to project build settings and change 'Build Active Architecture Only' to NO.
    • Do the same for cordovaLib build settings: change 'Build Active Architecture Only' to NO.
    • In the project build settings, remove armv7s and arm64 from Valid Architectures
• The provided sample code works, but how do I use my own credentials?
  • Replace data.apiKey, data.sid, data.token with your own apiKey, sessionId, token, respectively.
• How do I generate a sessionId or a Token?
  • You can generate sessionId and its corresponding tokens manually from your dashboard
  • Tutorials on how to generate sessionId and Token programmatically3

License

Copyright (c) 2014 TokBox, Inc.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

The software complies with Terms of Service for the OpenTok platform described in http://www.tokbox.com/termsofservice.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

cordova-plugin-opentok's Issues

No audio

Hello,
I can't hear the voice streams, but they can hear me. Is this a known issue? I am using an iphone 4s
Thank you,

Juan

Class OpenTokPlugin does not exist

hey, almost there! I just keep getting this error in Xcode debug:

2014-04-03 22:40:16.390 myApp[2969:60b] CDVPlugin class OpenTokPlugin (pluginName: OpenTokPlugin) does not exist. 2014-04-03 22:40:16.390 myApp[2969:60b] ERROR: Plugin 'OpenTokPlugin' not found, or is not a CDVPlugin. Check your plugin mapping in config.xml. 2014-04-03 22:40:16.390 myApp[2969:60b] -[CDVCommandQueue executePending] [Line 158] FAILED pluginJSON = [

Any ideas what I can do?

old subscribers are not cleared up on disconnect

When you connect/disconnect from the session, subscriber objects are not cleared up, causing old subscribers to be redrawn on the screen when you call OT.updateViews

ApiKey set to an INT crash the video

When the initsession load the parameter,
If the token is an int , the method .lenght is called and crash the application since .lenght is only for string

Have à Nice day

Connections Array not found after connection is established

sessionConnected': function( event ){
console.log(JSON.stringify(event));
console.log(event.connections);
},
JSON.stringify(event) gives
{"connection":{"connectionId":"E879436E-015C-44D1-8994-69CB1E74631B"}}
which means there is no connections array but the docs show there is
https://github.com/songz/cordova-plugin-opentok/blob/master/docs/sessionEvents.md

Errors building cordova project

I followed the first few steps, creating a blank cordova project, importing the library, and building the ios project but when it tried to build, it gave the following errors:

connection property of the session is always undefined

The connection property is not populated even after the sessionConnected event is dispatched. It just shows a connections array object with the other connection joined in the session

How can I add my keys to the app ?

How can I add my apiKey, sessionId and the token to the code ??

Thanks.

Update android to beta 2.2 version 3

Android: publishAudio false crashing

With the latest update, when initializing the publisher with publishAudio false, the app never makes it into the success call back for joining the session and crashes.

session.connect() breaking changes

session.connect() changed. My usual session.connect(apiKey, token) no longer works. It now seems to force me to specify a callback and does not want my api key.

Here is my code now:
session.connect(/*openTokApiKey, */token, function (err) {
if (err) {
console.error('session could not connect', err);
mobile.error('The session could not connect. Please try again later.');
} else {
console.log('session connected');
}
});

What should be the correct syntax? It does not match this document: https://swww.tokbox.com/opentok/libraries/client/js/migrating-to-version-2.2.html. I'd like to avoid having conditional branches for the cordova api vs web JS.

This particular call returns a value in my error parameter. But it's not really an error (I don't think).
Object
connection: Object
connectionId: "EF1BC5F8-EC52-447A-829A-636423C450BB"
creationTime: "1397415207924"
proto: —
connectionCount: "0"
environment: "production"
sessionConnectionStatus: "OTSessionConnectionStatusConnected"
sessionId: "1_MX4yODg3MzgyMn5-U3VuIEFwciAxMyAxMTozMDo0OSBQRFQgMjAxNH4wLjM5MzExNzl-fg"
streams: Array[0]
length: 0
proto: —
proto: —

Signaling is missing

I need it! :)

phonegap build

What do you think about submitting this project to phonegap build to be used as a plugin?

https://build.phonegap.com/plugins

We are looking into implementing opentok and have been happy using phonegap build for development.

Android could not connect to https://opentokrtc.com/cordova

The application could not connect to https://opentokrtc.com/cordova on the android device.

Any help please ???

Thanks.

on, off and once event handlers behave differently than web opentok.js

Should use the same helper libraries https://github.com/opentok/common-js-helpers

This will save you having to re-implement event handling. There are also a bunch of other helpful methods in there for DOM manipulation and stuff that could come in handy.

android 4.4.4 not showing video

I have the most recent git version as of 6/24/14 11:00PM EST. It is working on iOS 7.1, iphone 5. However, on nexus 7, android 4.4.4, I am not seeing any video. I only see the preview image of the video. Repositioning the video element and calling updateViews() is only effecting the preview.

I can see and hear the video and audio from the android device on the ios device.

cordova version: 3.5.0-0.2.4
com.tokbox.cordova.opentok 1.0.2 "OpenTokCordovaPlugin" (installed from git url)

Continue streaming after disconnect and unpublish

Which component is this for (JS API/AS3 API/iOS SDK/Server-side SDK)?

JS API with Phonegap

What steps will reproduce this problem?

1. init session
2. session connect
3. TB.initPublisher
4. session publish
5. session.disconnect()

Update iOS and Android to 2.2.1

http://www.tokbox.com/blog/mobile-sdks-2-2-1-resolve-openssl-vulnerability/

Cannot build for armv7s

Earlier last week, I was not able to build for armv64. Now I can't seem to be able to build for armv7s either.

Undefined symbols for architecture armv7s:
"OBJC_CLASS$_OTSubscriber", referenced from:
objc-class-ref in OpenTokPlugin.o
"OBJC_CLASS$_OTPublisher", referenced from:
objc-class-ref in OpenTokPlugin.o
"OBJC_CLASS$_OTSession", referenced from:
objc-class-ref in OpenTokPlugin.o
ld: symbol(s) not found for architecture armv7s

connectionCreated and connectionDestroyed are not fired

It seems connectionCreated and connectionDestroyed events are not triggered by OpenTok WebRTC in Cordova 3.4. I could be wrong but opentok.js has no implementation for these events.

session.disconnect() doesn't seem to clean up

Calling session.disconnect isn't working for me. It seems to work sometimes but most times it doesn't. The Publisher and Subscribers are left hanging.

publisher 'streamCreated' event no longer fires

This just broke when I upgraded to the master version.

Here is my code:
session.on('sessionConnected', function () {
console.log('agent session connected');
var publisher = self.publisher = TB.initPublisher(openTokApiKey, 'tok-stream-window', agentProperties);
console.log('creating publisher:', publisher);
publisher.on('streamCreated', function (event) {
console.log('your stream got created', event.stream);

Here is the console output. Note that my 'your stream got created' debug statement does not appear in the console. Hopefully, this will help you determine what is going on.
starting the video...
connection status changed from false to true
starting the connection
user starting a session...
showing standby: loading stream...
got tok session
Resource
JS Lib: adding event handlers -
Object
JS Lib: adding Event - streamDestroyed
JS Lib: adding event handlers -
Object
JS Lib: adding Event - exception
initiating a stream with role: agent
handling an agent session...
JS Lib: adding event handlers -
Object
JS Lib: adding Event - sessionConnected
JS Lib: adding Event - sessionConnected
success
JS Lib: sessionConnectedHandler -
Object
JS Lib: what is apiKey: 28873822 -
Object
JS Lib: what is token: T1==cGFydG5lcl9pZD0yODg3MzgyMiZzaWc9MDZmZDhlZTdhNTE5MjFjNjE4YTMxYzljYWQwMWUxNDg2ODY5OWYyZTpzZXNzaW9uX2lkPTFfTVg0eU9EZzNNemd5TW41LVUzVnVJRUZ3Y2lBeE15QXhNVG96TURvME9TQlFSRlFnTWpBeE5INHdMak01TXpFeE56bC1mZyZjcmVhdGVfdGltZT0xMzk3NDEzODQ5Jm5vbmNlPTMyNTcyOCZyb2xlPW1vZGVyYXRvciZzZXNzaW9uSWQ9MV9NWDR5T0RnM016Z3lNbjUtVTNWdUlFRndjaUF4TXlBeE1Ub3pNRG8wT1NCUVJGUWdNakF4Tkg0d0xqTTVNekV4TnpsLWZn -
Object
JS Lib: what is userHandlers -
Object
agent session connected
JS Lib: creating publisher -
Object
auto
auto
1
JS: Objects being updated in TBUpdateObjects
JS: Object updated
JS sessionId: TBPublisher
auto
auto
1
creating publisher:
TBPublisher
JS Lib: adding event handlers -
Object
JS Lib: adding event handlers -
Object
JS Lib: adding Event - streamCreated
JS Lib: adding event handlers -
Object
JS Lib: adding Event - archiveUpdated
JS Lib: adding event handlers -
Object
JS Lib: adding Event - archiveDestroyed
JS Lib: removing event sessionConnected -
Object
success
success
success

iOS Beta 3

http://www.tokbox.com/blog/opentok-ios-sdk-2-2-beta-3-is-released/

publisher.destroy() is not implemented

ERROR: Method 'destroyPublisher:' not defined in Plugin 'OpenTokPlugin'
2014-03-23 09:55:27.761 xxxxxx[2635:60b] -[CDVCommandQueue executePending] [Line 158] FAILED pluginJSON = [
"OpenTokPlugin268030753",
"OpenTokPlugin",
"destroyPublisher",
[

]
]

Wrong orientation on archives

We discussed this issue before. It was suggested that this plugin should use latest beta iOS SDK. Any ETA on fixing this? All archived video are upside down when filmed with iOS (using this plug-in). They show up correctly when filmed using the JS API in the browser.

android crashes when opentok client disconnects

Only happens if android client does not subscribe to user stream.

iOS 8 beta version - App does not work as it does on iOS7

I got the latest iOS 8 beta version and one of the first apps I tested was this app. It used to work very well on iOS7. On iOS 8, and iPhone 5S, I get a black square on the video.

I tried re-compiling the app with the latest xcode, there were no issues building or deploying to the iOS 8.0 device however the same result, black screen.

I understand this might be an Apple issue but I wanted the group to know. If you need any further debug information please let me know.

getting error and video showing

i also getting the same error like OT.initSession takes 2 parameters and also in real device. as per the video i implemented and got error and sovled that problem but no video. i am in the android devices.

Update Android to new OpenTok version

http://www.tokbox.com/blog/opentok-ios-and-android-sdks-2-2-into-production/

Update iOS to beta 2.2 new version

http://www.tokbox.com/blog/opentok-ios-and-android-sdks-2-2-into-production/

Poor video quality iOS => Browser

Hi @songz we are experiencing video quality issues when filming from iOS (using this plug-in). The video looks low-res and grainy. The exact same code produces a good quality video when streaming from browser to another browser. The network connection is the same in all scenarios (wi-fi broadband connection).

Can you acknowledge that you have seen this behavior on your end as well?

Destroy call button

I have an app which includes video calling using tokbox. The problem is that when I launch the video call, it opens on top of my app. I have been trying to add a hangup button on top of the video, but the video always opens on top of everything in my app.
Do you guys have any suggestions to make this happen?

Using AppGyver Steroids

Hi,

I'd like to use this plugin toghether with the AppGyver Steroids platform, wich is fully compatible with Cordova.

But the use Cordova 3.1 at the moment. Would it be compatible?

Thanks

Calros

Android plugin doesn't seem to layout correctly

As you can see in the screenshot, the Subscriber isn't positioned correctly over the whole video element. In this picture the Publisher is placed correctly, but it wasn't always in the right place.

Subscribed audio not working on Android. Both published and subscribed audio not working on Google Glass.

When subscribing to a session on android, the audio is not working (Using nexus 5). The audio being published from the android device is working. The only relevant warning I see in the logcat is:

05-12 12:45:05.112: W/AudioRecord(28542): AUDIO_INPUT_FLAG_FAST denied by client

When I connect using google glass, both subscribed audio and published audio are not working. In the logcat:

05-12 12:58:29.950: W/AudioTrack(26682): AUDIO_OUTPUT_FLAG_FAST denied by client
05-12 12:58:31.192: W/AudioRecord(26682): AUDIO_INPUT_FLAG_FAST denied by client

Any ideas?

Xcode Apple Mach-O Linker Errors - Troubleshooting guide doesn't fix errors

Trying to build and getting the Xcode Apple Mach-O Linker Errors.

Using XCode 5.0 and Base SDK: iOS 7.0.

Set Build Active Architecture Only to 'No' in the project and target of both the main app and the cordovaLib.

Using only armv7 in the project and target of both the main app and the cordovaLib.

Tried using Standard Architectures: $ARCHS_STANDARD and the $ARCHS_STANDARD w/ 64.

Any suggestions?

Archive Incorrectly Framed

When viewing a recorded showing the video that is played features a view whose frame is much higher than the one that appeared as a control video while recording the show.

As a result, the element that appeared to be centered while filming are either all the way at the bottom of the played back video or even out of frame.

https://www.dropbox.com/s/cxgtffz32bcypga/Photo%20Apr%2029%2C%206%2057%2015%20PM.png

https://www.dropbox.com/s/07vb8w0x3y6ugas/Photo%20Apr%2029%2C%207%2001%2014%20PM.png

Completion handlers are missing

I see that there is a success and failure method for Cordova.exec, that would map nicely to the completion handlers for subscribe, publish, connect, etc. in the v2.2 API.

new DOM when launching video but "insertmode:replace" is here

hello everyone,

i'm currently developing a mobile application with opentok 2.2 beta new version , and angularJs 1.2.9

i got a problem with the video conversation, when i initialize it, i can still push the button to terminate , but when the other user is connected , a new DOM is created with the video and i can't access (can't push it) anymore the button to terminate the conversation

The things i don't understand , it's that i did what the opentok Doc told me , i used the "insertmode:replace" , but it seems to do work like the "append" mode who create a child of the targeted element...

the Javascript :

var publisher = TB.initPublisher($scope.apiKey, 'layoutContainer');
var session = TB.initSession($scope.apiKey, $scope.sessionId);
session.on({
    streamCreated: function (event) {
        var subscriberProperties = {insertMode: "replace"};
        session.subscribe(event.stream, 'layoutContainer', subscriberProperties, function (error) {
            if (error) {
                console.log(error);
            } else {
            }
        });
});
session.connect($scope.token, function () {
    session.publish(publisher);
})

here the HTML :

<div class="main_view">
<div id="layoutContainer"></div>
<div id="boutonLayout"> </div>
</div>

css :

layoutContainer {

background-color: #e3e3e3;
position:absolute;
top:5%;left:5%;right:5%;bottom:20%;
}

boutonLayout {

position:absolute;
top:80%;left:5%;right:5%;bottom:0%;
}
.main_view{
position: absolute;
top:5%; left:0; right:0; bottom:0;
background-color: #FDFDFD;
}

thanks for reading , hope you can help me

Is cordova 3.5 safe to use?

I saw the note about 3.4.1. We are already at 3.5. Have you tested with this version?

If not, what do you think may not work?

Xcode 5.1 / iOS SDK 7.1

I am getting compilation errors since I upgraded my Xcode to 5.1 and iOS SDK to 7.1. Can you test on your side to confirm? I know that this is more of an issue with the underlying iOS SDK but the cordova plug-in is ultimately what I am interfacing with.

Joining a session with publishAudio:false doesn't work on Android

The following code successfully joins a phone to a session with the audio muted on an iPhone but not on Android. On android it joins with the audio on:

openTokSession = TB.initSession(data.tokboxKey, data.webRTC_session);

openTokPublisher = TB.initPublisher('myPublisherDiv', {publishAudio: false, publishVideo:false});

openTokSession.connect(data.token, function(error) {
             openTokSession.publish(openTokPublisher);
 });

PeerJs

Can I use peerJs library with this plugin ?
PeerJs works only on chrome .

Video out of position on iOS

I screenshotted my progress last night:

https://www.dropbox.com/s/28goe24n828sns3/2014-04-04%2001.02.18.png

The only thing on the page right now is the

container for the

Signalling - event.from.data is empty

I am testing on iOS and getting event.from.data as undefined. This works fine in the Javascript-WebRTC SDK

Publisher name not being set

Once the [_session publish:_publisher error:nil] function gets executed, it seems that the _publisher's name property is not passed, hence resulting in an empty stream name on the subscriber's end.

Some clarifications:

• The publisher name does get set properly in the initPublisher() function in OpenTokPlugin.m
• I've outputted the _publisher.name in the publish() function in OpenTokPlugin.m and it prints the correct value
• After executing the publish() function, an event gets triggered in the JavaScript's TBPublisher.prototype.eventReceived and the response.stream.name is always empty

Unable to hide/destroy publisher DIV

After calling TB.initPublisher(), with or without subsequent call to session.publish(), the publisher DIV is displayed. When I try any of the following:
session.disconnect() or
session.unpublish() or
publisher.destory()

The publisher DIV stays on the screen with video on.

In case of calling publisher.destory(), the following error message is shown:

2014-03-22 12:05:52.529 xxxxxx[2208:60b] ERROR: Method 'destroyPublisher:' not defined in Plugin 'OpenTokPlugin'
2014-03-22 12:05:52.530 xxxxxx[2208:60b] -[CDVCommandQueue executePending] [Line 158] FAILED pluginJSON = [
"OpenTokPlugin1211862497",
"OpenTokPlugin",
"destroyPublisher",
[ ]
]

About connecting web demo

Hi, i build an application with cordova plugin. Everything runs ok. But in android, application couldnt connect to https://opentokrtc.com/cordova

The other problem is, i got an api key, how can i use this in cordova & android?

Thanks

Audio playing on device earpiece instead of speaker

The subscribed audio stream is playing over the device earpiece instead of the speaker. Should at a very minimum have the option to play the audio over the speaker instead of just the earpiece of the device.

Signaling still not working for Android

session.on("signal", function(event) {
console.log("Signal sent from connection " + event.from.id);
console.log("Data " + event.data);
});

Getting undefined for both