Comments (21)
@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!
from twilio-video.js.
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
from twilio-video.js.
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
from twilio-video.js.
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.
from twilio-video.js.
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
from twilio-video.js.
@acomito thanks for the additional info and example application. Meteor is untested right now, but we will start looking into it.
from twilio-video.js.
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
from twilio-video.js.
Hi @markandrus, when will you release -beta4
and will this issue be fixed there?
from twilio-video.js.
Hi @markandrus,
I had the same issue and can confirm the version change fixed the issue in: https://github.com/DylanKojiCheslin/twilioVideoChatMeteorExample
from twilio-video.js.
@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
from twilio-video.js.
@acomito @tarasd @DylanKojiCheslin -beta4
is now released. Please pin to this version:
{
"dependencies": {
"twilio-video": "1.0.0-beta4"
}
}
Thanks!
Mark
from twilio-video.js.
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
from twilio-video.js.
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
from twilio-video.js.
@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.
from twilio-video.js.
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
from twilio-video.js.
Should I also share my client code??
But I am assuming it is all right, since localhost is functioning perfectly
Thanks and Regards
from twilio-video.js.
@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.
from twilio-video.js.
@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
from twilio-video.js.
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.
from twilio-video.js.
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!
from twilio-video.js.
@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
from twilio-video.js.
Related Issues (20)
- Intermittent video stream flickering on Android/Chrome
- participant.networkQualityLevel Returns Null When Connect to a Room with Audio and Video Off HOT 1
- Failed to execute 'send' on 'WebSocket': Still in CONNECTING state.
- DOMException error with no stack trace
- Restarting local audio track with noise cancellation
- Angular 6 Uncaught TypeError: Cannot assign to read only property 'exports' of object '[object Object]' ;
- Apple hand gestures getting sent on video call HOT 1
- End of Life HOT 2
- Twilio Programmable Video End of Life and Transition Plan HOT 10
- Thank You
- Issue with datatracks React - Sometimes participants new are not subcribed
- Video: Test Group Room with TURN & Video: Test Group Room without TURN FAILS HOT 1
- Mark Brave supported HOT 1
- Anyone experiencing crashes with Chrome v122? HOT 11
- Officially support Chromium's new documentPictureInPicture API HOT 1
- Allow calling `track.restart()` on local tracks created using constructors HOT 1
- Black video stream issue
- FitType Property is not applying on webgl but working on canvas2D
- Build is broken
- Screen Turns White switching between front and rear cameras for iPhone 11 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twilio-video.js.