Twilio-video.js: Uncaught (in promise) TypeError: Cannot read property 'close' of undefined(…)

[acomito]

import Video from 'twilio-video';

class VideoComponent extends React.Component {
    componentDidMount(){


        const client = new Video.Client('My Key');
        const localMedia = new Video.LocalMedia();

        Video.getUserMedia().then(mediaStream => {localMedia.addStream(mediaStream);});


                client.connect({ to: 'my-room', localMedia: localMedia}).then(room => {console.log('Connected to the Room "%s"', room.name);
}, error => { console.error('Failed to connect to the Room', error);});
    }
    render(){
        return <div>Video Component</div>
    }
}

I am running into Uncaught (in promise) TypeError: Cannot read property 'close' of undefined(…)

I only get it when I'm calling client.connect.

[markandrus]

Hi @acomito,

Thanks for the report. Would you mind please re-running your example, clicking into the … in the console, and copying out the full stack trace? Alternatively, could you share a full example we can try out ourselves?

Thank you,
Mark

[acomito]

Hello @markandrus,

Here is an example app that hits the same problem:

https://github.com/acomito/twilio-video-example/blob/master/README.md

I should have also noted I'm using react with meteor.

[acomito]

Hi @markandrus here is the stack trace:

sip.ua | configuration parameters after validation:
sip.ua | · viaHost: "59g2b9s68sr7.invalid"
sip.ua | · uri: sip:[email protected]
sip.ua | · wsServers: [{"ws_uri":"wss://ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com","sip_uri":"<sip:ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com;transport=ws;lr>","weight":0,"status":0,"scheme":"WSS"}]
sip.ua | · password: NOT SHOWN
sip.ua | · registerExpires: 600
sip.ua | · register: false
sip.ua | · registrarServer: sip:acdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com
sip.ua | · wsServerMaxReconnection: 3
sip.ua | · wsServerReconnectionTimeout: 4
sip.ua | · connectionRecoveryMinInterval: 2
sip.ua | · connectionRecoveryMaxInterval: 30
sip.ua | · keepAliveInterval: 30
sip.ua | · extraSupported: ["room-signaling","timer"]
sip.ua | · usePreloadedRoute: false
sip.ua | · userAgentString: "undefined/0.7.5"
sip.ua | · iceCheckingTimeout: 5000
sip.ua | · noAnswerTimeout: 60000
sip.ua | · stunServers: ["stun:stun.l.google.com:19302"]
sip.ua | · turnServers: []
sip.ua | · traceSip: true
sip.ua | · hackViaTcp: false
sip.ua | · hackIpInContact: false
sip.ua | · hackWssInTransport: true
sip.ua | · hackAllowUnregisteredOptionTags: true
sip.ua | · contactTransport: "wss"
sip.ua | · forceRport: false
sip.ua | · autostart: false
sip.ua | · rel100: "none"
sip.ua | · replaces: "none"
sip.ua | · mediaHandlerFactory: function promisifiedFactory() {                                                      // 1571
          var mediaHandler = mediaHandlerFactory.apply(this, arguments);                                               // 1572
                                                                                                                       // 1573
          function patchMethod (methodName) {                                                                          // 1574
            var method = mediaHandler[methodName];                                                                     // 1575
            if (method.length > 1) {                                                                                   // 1576
              var callbacksFirst = methodName === 'getDescription';                                                    // 1577
              mediaHandler[methodName] = SIP.Utils.promisify(mediaHandler, methodName, callbacksFirst);                // 1578
            }                                                                                                          // 1579
          }                                                                                                            // 1580
                                                                                                                       // 1581
          patchMethod('getDescription');                                                                               // 1582
          patchMethod('setDescription');                                                                               // 1583
                                                                                                                       // 1584
          return mediaHandler;                                                                                         // 1585
        }
sip.ua | · authenticationFactory: undefined
sip.ua | · instanceId: "c7089eed-7e1f-492b-8972-6ed67a9b9535"
sip.ua | · sipjsId: "8l3kj"
sip.ua | · hostportParams: "ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com"
sip.ua | · authorizationUser: "anthony"
sip.ua | · media: undefined
ecs.us1.twilio.com/v1/Configuration:1 POST https://ecs.us1.twilio.com/v1/Configuration 403 (Forbidden)
modules.js?hash=d5a13bc…:64978 client WARN Failed to fetch Endpoint Configuration: {"message":"com.twilio.domain.auth.jwt.JwtAuthorizationException: Auth Token expired at Tue Nov 15 14:32:27 PST 2016","code":9221,"user_error":true,"params":{"requestId":"5fc2ff91-96e6-44b6-971a-4b1c2b3fd3fc"}}log @ modules.js?hash=d5a13bc…:64978warn @ modules.js?hash=d5a13bc…:65011(anonymous function) @ modules.js?hash=d5a13bc…:64229(anonymous function) @ meteor.js?hash=f9ccb2f…:1105
modules.js?hash=d5a13bc…:64978 client WARN Failed to fetch ice servers from ECS: network_traversal_service not availablelog @ modules.js?hash=d5a13bc…:64978warn @ modules.js?hash=d5a13bc…:65011(anonymous function) @ modules.js?hash=d5a13bc…:64500(anonymous function) @ meteor.js?hash=f9ccb2f…:1105
sip.ua | user requested startup...
sip.transport | connecting to WebSocket wss://ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com
sip.transport | WebSocket wss://ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com connected
sip.ua | connection state set to 0
sip.transport | unable to send message, WebSocket is not openLoggerFactory.print @ modules.js?hash=d5a13bc…:85466LoggerFactory.(anonymous function) @ modules.js?hash=d5a13bc…:85483Logger.(anonymous function) @ modules.js?hash=d5a13bc…:85477send @ modules.js?hash=d5a13bc…:96316InviteClientTransaction.send @ modules.js?hash=d5a13bc…:87261send @ modules.js?hash=d5a13bc…:88220ClientContext.send @ modules.js?hash=d5a13bc…:88737onSuccess @ modules.js?hash=d5a13bc…:90701(anonymous function) @ meteor.js?hash=f9ccb2f…:1105
modules.js?hash=d5a13bc…:85466 Mon Nov 21 2016 09:58:58 GMT-0500 (EST) | sip.transaction.ict | transport error occurred, deleting INVITE client transaction z9hG4bK3640477
modules.js?hash=d5a13bc…:80865 Uncaught (in promise) TypeError: Cannot read property 'close' of undefined(…)exports.clearTimeout.exports.clearInterval @ modules.js?hash=d5a13bc…:80865Timers.(anonymous function) @ modules.js?hash=d5a13bc…:85879InviteClientTransaction.onTransportError @ modules.js?hash=d5a13bc…:87269InviteClientTransaction.send @ modules.js?hash=d5a13bc…:87262send @ modules.js?hash=d5a13bc…:88220ClientContext.send @ modules.js?hash=d5a13bc…:88737onSuccess @ modules.js?hash=d5a13bc…:90701(anonymous function) @ meteor.js?hash=f9ccb2f…:1105

seems like this is the main issue... a websocket gets closed:

sip.ua | user requested startup...
sip.transport | connecting to WebSocket 
sip.transport | WebSocket wss://ACdc2b7cb77a05c18e0038188ef3b9d09d.endpoint.twilio.com connected
sip.ua | connection state set to 0
sip.transport | unable to send message, WebSocket is not open
LoggerFactory.print @ modules.js?hash=d5a13bc…:85466
LoggerFactory.(anonymous function) @ modules.js?hash=d5a13bc…:85483Logger.(anonymous function) @ modules.js?hash=d5a13bc…:85477send @ modules.js?hash=d5a13bc…:96316
InviteClientTransaction.send @ modules.js?hash=d5a13bc…:87261send @ modules.js?hash=d5a13bc…:88220
ClientContext.send @ modules.js?hash=d5a13bc…:88737
onSuccess @ modules.js?hash=d5a13bc…:90701(anonymous function) @ meteor.js?hash=f9ccb2f…:1105
modules.js?hash=d5a13bc…:85466
sip.transaction.ict | transport error occurred, deleting INVITE client transaction z9hG4bK3640477

[markandrus]

@acomito thanks for the additional info and example application. Meteor is untested right now, but we will start looking into it.

[markandrus]

@acomito I've dug a little deeper and I've discovered that the WebSocket error is due to a mis-interaction between an older version of ws and meteor. The older version of ws lacked the readyState constants on the WebSocket constructor (e.g. OPEN, CLOSED, etc.). This typically isn't a problem in browser contexts where we don't use ws; however, meteor's build process is a little different and causes us to trigger this code. I've since bumped our ws dependency; however, there is another misinteraction I need to solve in a second dependency of twilio-video (SIP.js) so please stay tuned!

[markandrus]

Hi @acomito,

I think we've finally addressed the issues with Meteor (along with Angular, React, etc.). To ensure we maintain support going forward, we've added a number of "Framework Tests" including twilio-video-meteor. Any time we make changes going forward, Travis CI will ensure we test against each of these frameworks. We'll be cutting an RC this week and hopefully a -beta4 very soon, but if you want to test out today, you can pin the master branch in your dependencies, e.g.

{
  "dependencies": {
    "twilio-video": "twilio/twilio-video.js#master"
  }
}

Can you please let us know if this fixes the issue?

Thanks,
Mark

[taras-danyliuk]

Hi @markandrus, when will you release -beta4 and will this issue be fixed there?

[DylanKojiCheslin]

Hi @markandrus,

I had the same issue and can confirm the version change fixed the issue in: https://github.com/DylanKojiCheslin/twilioVideoChatMeteorExample

[markandrus]

@DylanKojiCheslin thanks for confirming 👍

@TarasD we just cut 1.0.0-rc11 today, which is our Release Candidate for -beta4. If all our tests pass, we expect to cut -beta4 in the coming day or so.

Best,
Mark

[markandrus]

@acomito @TarasD @DylanKojiCheslin -beta4 is now released. Please pin to this version:

{
  "dependencies": {
    "twilio-video": "1.0.0-beta4"
  }
}

Thanks!
Mark

[harzkr]

Hi @markandrus @acomito @TarasD ,

I was having the same issue as initiated earlier,
I am using a Meteor 1.4.4.2 App with react while the app works perfectly fine in the localhost mode, and despite serving on https and no cors conflicts, it doesn't work in production mode.

While all calls with all participants work perfectly well, the audio and video etc., in the development mode but the heroku deployed app doesn't host any audio video from any participants, only the name gets reflected and the call gets cut in 30-32 seconds everytime.

So I was in discussion with the Support Centre at Twilio, but with no success, the logLevel : debug showed an error with sip transport.js, with the websocket abruptly closing, so i stumbled here and tried to change my App exactly according to the suggestions here, and followed also ver closely the example by @DylanKojiCheslin to modify it for my meteor-react app, but it doesn't seem to work and I am getting the same error format.

Is there a way I can debug, or have the packages gone mismatching again with the updates for each particular ones.

I am really in the need to get the app fully functional in Production mode, and I am really out of wits to see it coming out that way.
Really need help, thanks

[markandrus]

Hi @harzkr,

Thanks for writing in, and sorry you're having trouble. Can you clarify what you mean here?

the heroku deployed app doesn't host any audio video from any participants, only the name gets reflected and the call gets cut in 30-32 seconds everytime.

The Heroku-deployed app should simply host the HTML/JS that supports your twilio-video.js-enable app, right? So it will ultimately be your users (on their own devices) accessing your app that will "host" (or "capture" or "playback", etc.) the audio/video. Meteor is not handling audio/video, right?

If you could include a minimal repro example (and logs), it would help us debug.

Thanks,
Mark

[DylanKojiCheslin]

@harzkr is your project open source? I'd be happy to take a look. also what version of that example app are you looking at? I think I broke the example a few time in later updates of it.

[harzkr]

Hi @markandrus , @DylanKojiCheslin
Thanks for responding so quickly, actually the project is not open source, it's already live and it's actually foreign exchange deal website, with the facility of videocalling the agent, it's exactly there where I'm having the problem. I'll share everything I can here from the logs to the architecture and other info, and I really need it to function, since I plan to use twilio-Video for many more production level apps.

@markandrus by the heroku deployed app, I wated to be specific as to where I have hosted it, yeah, it is just facilitating deployment for the app online, twilio Video functions are handling the Video Calling on client side in meteor with only the token generation on the server side.

I am console.logging the participants once they join the room, so while in localhost the object of the participant has all local audio,video,media tracks for all the participants that join in, the live version is empty of the media tracks, audio and video, only the name of the participant gets available.

Moreover, to elaborate, just like in the usual examples, I'm making a div with participant id as the id of the div and attaching media to it, while it works fine in localhost, it does not for the live version. it's really odd.

You can visit the site here:
www.bestsellforex.com

on the bottom right hand corner there is a get a videocall button, just enter it, and enter a name, and start the video, for right now, I am just creating one room, called cool room, so all the participants from any where starting the video will join one single room(i have kept it for testing purposes), you can try opening one more instance and join with a different name, and you will see the problem, please also the console.log, and where it stops
The above process works absolutely fine on localhost, Have attached images

I am attaching along the debug logs when I had enabled logLevel :debug for twilio-video, having the same option ON for this package namely:twilio-1.0.0-beta4, does not display anything, so would have to do with console logs, or is there a way to set that option for this package as well??

Thanks will be bery appreciative from all your help

local&globallogs.zip

[harzkr]

Should I also share my client code??

But I am assuming it is all right, since localhost is functioning perfectly

Thanks and Regards

[markandrus]

@harzkr I was able to reproduce on your site. It's very strange. It looks like something is intercepting the WebSocket connection, although I am not sure. Also, can you try with 1.0.0? It should be easier to debug (and possibly fix) a more recent release.

Should I also share my client code??

Maybe a list of any other libraries included would be helpful? Especially anything that may interact with WebSocket.

[harzkr]

@markandrus
Thanks, I had done it with 1.0.0, will redo it on another branch and get back to you

And sure would share the client part of my code, where I am connecting, and as far as I know, I am not using anything that interacts with the websocket per se, still I'll list all the libraries

Am also in discussions with the service help centre at Twilio, even he finds it pretty strange that something like this is happening. He'll get back to me post this weekend after running some tests

Thanks again

[DylanKojiCheslin]

if it only happens in production its probably caused by your hosting. you could try deploying a simpler example of the video chat to the same hosting service, if that works then you know that it's something in your code.

[harzkr]

Hi @markandrus @DylanKojiCheslin

Wanted to give you a great news, it's finally started working, it so happened in dealing with another issues i happened to dump the standard js minfiers package, and it turns out that was the culprit, not bundling the js functions properly for production.

Now it's working crystal clear...absolutely no problems with Twilio package, happened to be meteor-production error

Should I continue using the beta4 package or just confirm the same with 1.0.0 package?
I would be using the same for many more apps, so just wanted to confirm here from the experts.

Thanks alot!

[markandrus]

i happened to dump the standard js minfiers package, and it turns out that was the culprit, not bundling the js functions properly for production.

Hmm, the issues you faced are a very strange symptom, though. Oh, well—glad it is fixed :-)

Should I continue using the beta4 package or just confirm the same with 1.0.0 package?

I would definitely recommend updating to 1.0.0 sooner than later. We are planning some new features, e.g. Track names, that you'll be able to take advantage of once you are on the updated APIs. (1.0.0 also has a number of bug fixes.)

Best,
Mark

[harzkr]

@markandrus
One more small update, the 1.0.0 package is working like a charm now too, only the Meteor's own minification part seemed to be the problem, everything else was absolutely fine

Thanks again