Call disconnects immediately

assaft commented 2 years ago

Hi, I'm experimenting with this quickstart tutorial on Chrome (101.0.4951.64) for MacOS (12.3.1). When I press "Call" it seems like there is an attempt to make a call but it disconnects immediately. There is no ring on the target phone that I try to call. I tried different phones and it behaves the same. I also tried another quickstart tutorial, for programmed voice, and it works well. So I believe my purchased number and the target number that I try to call are both fine.

The event log shows:

>  Requesting Access Token...
>  Got a token.
>  Initializing device
>  Twilio.Device Ready to make and receive calls!
>  Attempting to call <target number>...
>  Call disconnected.

Inspecting the JS console shows this:

Setting up VSP
twilio.min.js:1 Initializing preferred transport backoff using config:  {factor: 2, maxDelay: 1000, randomisationFactor: 0.4}
twilio.min.js:1 Initializing primary transport backoff using config:  {factor: 2, initialDelay: 100, maxDelay: 20000, randomisationFactor: 0.4}
twilio.min.js:1 WSTransport.open() called...
twilio.min.js:1 Attempting to connect...
twilio.min.js:1 Closing and cleaning up WebSocket...
twilio.min.js:1 No WebSocket to clean up.
twilio.min.js:1 WebSocket opened successfully.
twilio.min.js:1 Setting token and publishing listen
twilio.min.js:1 Stream is ready
twilio.min.js:1 signalingState is "have-local-offer"
twilio.min.js:1 dtlsTransportState is "new"
twilio.min.js:1 pc.iceGatheringState is "gathering"
twilio.min.js:1 ICE Candidate: {"candidate":"candidate:4131776327 1 udp 2122260223 192.168.68.115 55145 typ host generation 0 ufrag VD9m network-id 1 network-cost 10","sdpMid":"0","sdpMLineIndex":0}
twilio.min.js:1 ICE Candidate: {"candidate":"candidate:3099990967 1 tcp 1518280447 192.168.68.115 9 typ host tcptype active generation 0 ufrag VD9m network-id 1 network-cost 10","sdpMid":"0","sdpMLineIndex":0}
twilio.min.js:1 pc.iceGatheringState is "complete"
twilio.min.js:1 ICE Candidate: null
twilio.min.js:1 Received HANGUP from gateway
twilio.min.js:1 Received an error from the gateway: ConnectionError: ConnectionError (31005): Error sent from gateway in HANGUP
    at ConnectionError.TwilioError [as constructor] (twilio.min.js:1:98536)
    at new ConnectionError (twilio.min.js:1:84420)
    at PStream.Call._this._onHangup (twilio.min.js:1:21253)
    at emitOne (twilio.min.js:1:248707)
    at PStream.emit (twilio.min.js:1:250013)
    at PStream._handleTransportMessage (twilio.min.js:1:125763)
    at emitOne (twilio.min.js:1:248707)
    at WSTransport.emit (twilio.min.js:1:250013)
    at WebSocket.WSTransport._this._onSocketMessage (twilio.min.js:1:217569)
Log.error @ twilio.min.js:1
Call._this._onHangup @ twilio.min.js:1
emitOne @ twilio.min.js:1
emit @ twilio.min.js:1
PStream._handleTransportMessage @ twilio.min.js:1
emitOne @ twilio.min.js:1
emit @ twilio.min.js:1
WSTransport._this._onSocketMessage @ twilio.min.js:1
twilio.min.js:1 Disconnecting...
twilio.min.js:1 dtlsTransportState is "closed"

bld010 commented 2 years ago

Hi @assaft, Twilio Developer Educator here.

Sometimes I see this error when there's an issue with the AccessToken. I would first decode the AccessToken on jwt.io and make sure that it contains the proper SID for your TwiML App.

Also, you may want to check that your ngrok tunnel is working properly. Can you send a POST request to your ngrok.io/voice endpoint and get back TwiML? Can you send a GET request to your ngrok.io/token endpoint and receive a token? Is your TwiML App properly configured with your ngrok.io/voice URL?

These are some good places to start with troubleshooting. Let me know if you've verified that your AccessToken and endpoints/ngrok tunnel are working properly.

Thank you!

tommyorndorff commented 2 years ago

@assaft I had a similar problem. It only works when I use http://localhost:5000/ but not http://:5000. If I use the ngrok https URL and force Chrome through the certificate failure warning, it works there as well.

bld010 commented 2 years ago

@tommyorndorff When you configure your TwiML App and your Twilio Phone Number with your ngrok URL, are you using the HTTPS ngrok url?

tommyorndorff commented 2 years ago

Sure, my TwiML App is configured like this for the 'Request URL' parameter, just like in the README.md doc:

https://cc84-216-251-118-195.ngrok.io/voice

Then in Chrome:

http://localhost:5000 -> This works, I'm guessing because its localhost but not https
http://192.168.1.5:5000 -> This does not work as it is not localhost and not https
https://cc84-216-251-118-195.ngrok.io -> This works after bypassing the warnings as it is not "localhost" and it is https

jamesktan commented 2 years ago

I'm running into the same issue. I've tried using a TwiML App as well as routing it directly in the Twilio number's callbacks. Also, in terms of token generation, I have exactly the same as what is described in this repository. I've also tried changing SSL as described previously to no avail.

The one thing I have noticed, however, is that in Ngrok the request coming in from Twilio appears to be missing the 'To' parameter as well as any of the custom metadata I'm loading in the 'params' field.

bld010 commented 2 years ago

Hi @jamesktan in your Twilio Console under the Monitor tab in the left navigation pane, do you see any Call Logs (under Logs > Calls) created when you attempt to make a call?

If you see a call log created, on the call's Call Details page, do you see anything under Request Inspector? Also, do you see a Child Calls heading or a Parent Call SID under the Properties setting?

Do you see any errors under Monitor > Logs > Errors > Error logs?

If you can post a screenshot of your ngrok terminal, the request coming from Twilio, and/or any Request Inspector or Error information from the Twilio Console, that may help me figure out what's going on.

TwilioDevEd / voice-javascript-sdk-quickstart-python

Call disconnects immediately #10