aullman / opentok-angular Goto Github PK

I'm getting a console message of: API Key is undefined. You must pass an API Key to initSession.

Yet I have the API key statically defined in the call to OTsession.init()

OTSession.init('STATICBUTHERE', $scope.interview.video_session_id, token, function (error, session) {});

The versions of OpenTok-Angular and opentok-layout-js published to npm are incompatible with each other with regards to the initLayoutContainer API call. OT-Angular (0.4.2) expects the method to be attached to the global TB while OT-layout-js (0.3.1) only globally exposes it.

Maybe I'm missing something? But the only way I can get these two to work together is to modify OT-Angular's call to initLayoutContainer by removing the TB namespace — either that or to re-add the line in OT-layout-js that attached the method to the OT object:

OT.initLayoutContainer = exports.initLayoutContainer;

Perhaps it's due to how we use it, but it seems that connectionDestroyed which removes a connection is only called when someone disconnects.

However if you're the one closing the conversation the connection stays in the list of connections since OTSession is a 'service', so joining a new conversation you have that 'stale' connection that wasn't cleaned up left in the array. I had to manually clear the array of connection on init.

Since subscirbe() is asynchronous subscriber.on fails sometimes with subscriber being null. I noticed it happening when closing a call going to a different state than starting a new call.

It's been deprecated from 2.14.0 and should be replaced by something like https://www.npmjs.com/package/events

Hi,

can you told me, how I can set the name for a subscriber? Need this for a video-chat conference.
The conference members should know the name of the other members.

regards,
MetalCar

I struggle with figuring out how to change props for directive oTPublisher, I know that I need change the props so this call will be executed correctly:

line 132: scope.publisher = OT.initPublisher(attrs.apikey || OTSession.session.apiKey,
element[0], props, function(err) {

but I have no idea how can I pass it through OTSession.

thanks

The example at https://github.com/aullman/OpenTok-Angular#example-usage should say:

$scope.session.on("sessionConnected", function(event) {
        $scope.session.publish($scope.publisher);
    });

npm install fails due to the postinstall script defined in package.json:

Error: Cannot find module 'gulp-jshint'

Since devDependencies aren't installed on a standard package install, the gulp plugins should likely be listed as regular dependencies as they are required before even requiring the module.

After upgrading opentok version to 2.14, we see this error:

Env:
angular-opentok: 2.1.2
opentok: 2.14.0

hi. i'm using opntok for creating the session and it was actually working fine before. and as per my requirement i made some changes. in my router.js i created to genereate token code and i wanted to store that in database. so i written this code
->
const apiKey = "xxxxxxxx";
const apiSecret = "xxxxxxxxxxxxxxxxxxxxxxxxx";

const R = require('ramda');
const Promise = require('bluebird');
const OpenTok = require('opentok');

// http://bluebirdjs.com/docs/api/promisification.html
const OT = Promise.promisifyAll(new OpenTok(apiKey, apiSecret));

generating token and storing in database
var credentials;
var sessionId;
var token
OT.createSession({}, function(error, session) {
if (error) {
console.log("Error creating session:", error)
} else {
sessionId = session.sessionId;
var tokenOptions = {};
tokenOptions.role = "publisher";
tokenOptions.data = req.body.session_name;
// Generate a token.
token = OT.generateToken(sessionId, tokenOptions);
var event = INSERT INTO events(session_name, identify_num, session_id, token ) VALUES (?, ?, ?, ?);
var events = [req.body.session_name, random, sessionId, token];
console.log(events);

-> host page rendering
router.get('/host', (req, res) => {
res.render('host.ejs', {credentials: credentials});
});
-> viewer page rendering
router.get('/participant', (req, res) => {
res.render('viewer.ejs', {credentials: credentials});
});

by this successfully i created token and i store that in database too. but when i fetch that back by the my ejs page getting error of as title for viewer page and for host page getting error as
-> OT.exception :: title: Authentication error (1004) msg: Unauthorized token (1004)

here are some scrren shot i added. not getting where i'm missing please help to solve this

Hi,
In the publisher directive you are passing in the api key:

scope.publisher = OT.initPublisher(attrs.apikey || OTSession.session.apiKey,
            element[0], props, function(err) {
              if (err) {
                scope.$emit('otPublisherError', err, scope.publisher);
              }
            });

This does not match with the documentation here: https://tokbox.com/developer/sdks/js/reference/OT.html#initPublisher

Is there a reason for this? It seems to work both ways but want to know if either way has undesired side effects.

Thanks

I am getting a 1004 error when trying to run the opentok api on the server, it is running fine on the localhost but when i ran the same code on the server, it gave me this opentok_authentication_error.

I have checked the apikey and serverkey multiple times and they both are correct, and the session id is also the same.

I can publish and subscribe sessions on the localhost, everything is working fine there but when i uploaded my website on the server and ran it their it gave me this error.

I've also checked the token value generated as well and it is the same which is being generated on the opentok website.

For frontend, I am using angular.js, I dont know what I am doing wrong and when it is working fine on localhost why is giving this error when running on a server.

server.js

   Opentok = require('opentok');
   var OTConfig = require('./config/otconfig');
   var opentok = new Opentok(OTConfig.apiKey, OTConfig.secretKey);
   var OT = require('./routes/opentok')(opentok, app);

routes/opentk.js

 var OT_config = require('../config/dbconfig');
 var express = require('express');
 var router = express.Router();

  module.exports = function(opentok, app) {

  app.post('/opentok/join', function(req, res) {

    var token,
    sessionId = req.body.ot_session,
    tokenOptions = {};

tokenOptions.role = "publisher";
tokenOptions.data = "username=" + req.body.name;
tokenOptions.data += "courseId=" + req.body.course;
tokenOptions.data += "role=" + req.body.role;

// Generate a token.
token = opentok.generateToken(sessionId, tokenOptions);
res.send(token);
 });
}

controller.js

  var opent = opentokService.generateToken(sessionId);
    opent.then(function(data) {
        $rootScope.token = data.data;
    });

opentok service

  return { 
        generateToken: function(id) {

            let info = {
                name: $rootScope.username,
                id: id,
                role: $rootScope.role,
                ot_session: $rootScope.sessionId 
            }
            return $http({
                method: 'post',
                url: '/opentok/join',
                data: info
            });
        }
    }

Hi! I have been using the library for several months without issues, I don't know what changed, but started throwing me some errors like:
Error: [$rootScope:inprog] http://errors.angular.js.org/1.5.9.$rootScope/inprog?p0=NaNigest
in this library I think so.

I'm using latest opentok-angular 1.2.1 version and angular 1.5.9 one.

Could you please give me a hand?

I appreciate your hard work here, thanks!

Hi!
Great job on that library!

If I still want to listen to opentok.js events (connectionEvent, sessionConnectedEvent etc..), what is the best way of doing that?
And should I even do that now that we have your new directives?
I want to let my server know what's happening so I can do a session assigning logic.

Thanks

Hi

I saw message error at console in the chrome "opentok.min.js:57 OT.Publisher.onStreamAvailableError "

Can you help me?

Regards,

safari on iOS will revert to not allowing the camera and mic after it's already been "Allowed". For example, when switching from the back camera to the front.
Here is the source: https://github.com/doxyme/angular-tokbox/blob/master/opentok-angular.js
But our Safari demo and a sample (https://jsfiddle.net/xajprcyn/16/) created by me is working fine. It might be Angular specific or something else.

First off thanks for this amazing project.

If I want to use the ot-subscriber and ot-publisher directives in the same page using an OTSession created using the same token, I am not able to see the self-published stream in the streams list.

But if a different publisher starts streaming, that stream shows up in the list.

Is this something TokBox restricts? Thanks.

@aullman Last version (1.2.1) seems to have a patch for an unnecesary "$rootScope.$apply()". Could you make it available for bower ?

I noticed your Angular module for the whiteboard uses the MIT license, but this specific module does not have any licensing information. Is your intention to leave this license as the default one or an MIT open-source license?

Hi,

I am able to use the 'OT_big' class on ot-publisher elements. However, is there any way to get the double-click resizing (dynamically adding & removing the class) effect seen in the opentok-layout-js demo using these directives? It seems that layout() has to be called to make it take effect, but how is layout() available to us using the directives?

Many thanks for your great work.

Hello,

How can I Enable/Disable video and audio in a ongoing call?

Thank you.

Hi @aullman,

I'm getting a undefined error on the following line during my call to OTSession.init(): https://github.com/aullman/OpenTok-Angular/blob/master/opentok-angular.js#L101

At this time the OTSession referenced on that line looks like:

{"streams":[],"connections":[],"publishers":[]}

I've verified the API key, session and token are being provided properly to init(), in fact at the present time the API key is a static value being passed to init().

The ot-publisher directive (in my use case, which is supposed to show yourself) doesn't render properly. It only shows a small headphone icon at the upper left corner of its container.

How do I pass a reference to a session?

I am using the cordova opentok plugin (https://github.com/songz/cordova-plugin-opentok) with this angular opentok library and I am getting an error,

Error: undefined is not an object (evaluating 'TB.$.eventing')

Maybe this has something to do with this issue (or not 😄 ),

aullman/opentok-meet#41

I am not used to the actual opentok library so I am not sure where to start looking. If you can point me in the right direction I dont mind trying to get this resolved.

How should a disconnect scenario be handled, both the case of you losing a connection and the other side disconnecting.

Am I a supposed to OTSession.init(...) again, what about the events I subscribed to do I need to unsubscribe manually? (what about the subscriber directive-s)

Does the publisher auto-magically works, since it doesn't seem like it can be made to re-connect / re-publish?

if this line is removed
if (!window.OT) throw new Error('You must include the OT library before the OT_Angular library');

and this is removed

  .factory('OT', function() {
    return OT;
  })

and OT injection changes to window.OT

and OT.$.eventing(OTSession);
changes to

      var _interval = $interval(function(){
        if (window.TB) {
                $interval.cancel(_interval);
                OT.$.eventing(OTSession);
        }
      }, 500);

then you can have:

        service.addScript = function(url, defer) {

           if (window.TB) {
                 defer.resolve()
                 return
            }

            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.async = true;
            script.onload = function(){
                defer.resolve();
            };
            script.src = url;
            document.getElementsByTagName('head')[0].appendChild(script);
        }

and in state definition:

resolve : {
    TBloaded: function(){
            service.addScript("...tokboxjslink...", defer)
           return defer.promise
     }
}

so then you can load tokbox asynchronously (and you can also register window.onload event to download tokbox after everything else has loaded). I think it makes a big difference because its a big library.

I could make a pull request but i probably won't find time to unit-test it, but if someone feels like doing it here's the coded needed.