Twilio JS SDK Unable to get the status change of call

Question

I am using Twilio JS SDKs in my Angular application to call my customers. I have a requirement to show the status of the call on the UI(Ringing/Inprogress/completed). For that I have seen some documents to use StatusCallBack web hooks, but how will I be notified in the UI if the web hook gets executed and return the TwiML. Please suggest if any alternatives.

This is my Angular code:

    this.device.connect(function (connection) {
      connection.on('warning', function (warningName, warningData) {
        // alert(warningName);
        if (warningName == "low-bytes-received" || warningName == "low-bytes-sent") {
          myscope.NetworkIssue();
        }
      });
      connection.on('ringing', function (param1) {
        // alert(warningName);
        debugger;
      });
      connection.on('accept', function (param2) {
        // alert(warningName);
        debugger;
      });
});

This is my TWI ML App code:

var response = new VoiceResponse();
            var dial = new Dial(callerId: twilioNumber);
            if (phoneNumber != null)
            {
                dial.Number(phoneNumber);
                dial.AnswerOnBridge = true;
            }
            response.Append(dial);
            return Content(response.ToString(), "application/xml");

Answer 1

Twilio developer evangelist here.

You can actually get the status of the call including the difference between ringing and in progress now.

You can see the events you can receive in the documentation here. To enable the ringing state, you need to include the enableRingingState option when you setup the device:

Twilio.Device.setup(token, { enableRingingState: true });

You also need to ensure that you set the answerOnBridge attribute to true in your <Dial>.

When you have that setup, once you make an outbound call you will receive the events "ringing", "accept" and then "disconnect" to correspond to your ringing/in progress/completed requirements.

Edit

In your TwiML you are setting answerOnBridge incorrectly. You need to pass it as part of an options object to the Dial method, along with the callerID. Like this:

var response = new VoiceResponse();
var dial = response.dial({
  callerId: twilioNumber,
  answerOnBridge: true
});
if (phoneNumber != null) {
  dial.Number(phoneNumber);
}
return Content(response.ToString(), "application/xml");

Edit 2

You are using the callback version of device.connect which is deprecated. But it is also too late to setup your event handlers on the connection object. Instead, when you call device.connect to place the outgoing call, you will get a connection object returned and you should setup the listeners then.

To avoid confusion, you should also use device.on('connect', handler) to listen for connection events.

Something like this:

var connection = this.device.connect(connectOptions);

connection.on('warning', function (warningName, warningData) {
  // alert(warningName);
  if (warningName == "low-bytes-received" || warningName == "low-bytes-sent") {
    myscope.NetworkIssue();
  }
});
connection.on('ringing', function (param1) {
  // alert(warningName);
  debugger;
});
connection.on('accept', function (param2) {
  // alert(warningName);
  debugger;
});

this.device.on("connect", function() {
  console.log("Now connected");
})