CODEWITHSUNDEEP
browsertwilioincoming-call
WillD
WillD

Reputation: 3

Twilio-unable to accept or reject incoming call

My browser will ring, but Im unable to accept or reject the call. The accept and reject buttons do not show when I receive an incoming call. Am I missing something in my code? Need help!

my snippet is:

<!DOCTYPE html>
<html>
<head>
<title> Screenpop </title>
<script type="text/javascript"
  src="//static.twilio.com/libs/twiliojs/1.2/twilio.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js">
</script>

<link rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<head>

<link href="/images/stylesheets/favicon.ico"
  type="image/x-icon" rel="icon" />   
<link href="/stylesheets/playusclient.css"
  type="text/css" rel="stylesheet" /> 

<script type="text/javascript">
  var socket = io.connect();
  $(function() {
    $(".call").on("click", function() {

      // The properties of this object will be sent as POST
      // Parameters to URL which generates TwiML.
      Twilio.Device.connect({
        CallerId:'<%= phone_number %>' , 
        // Replace this value with a verified Twilio number:
        // https://www.twilio.com/user/account/phone-numbers/verified

        PhoneNumber:$("#number").val() //pass in the value of the text field
      });
    });

    $(".hangup").on("click", function() {
      Twilio.Device.disconnectAll();
    });

    /* Create the Client with a Capability Token */
    Twilio.Device.setup('<%= token %>', {debug: true});

    /* Let us know when the client is ready. */
    Twilio.Device.ready(function (device) {
        $("#log").text("Ready");
    });

    Twilio.Device.incoming(function(connection) {
      $( "#dialog-confirm" ).dialog({
        resizable: false,
        modal: true,
        autoOpen: false,
        buttons: {
          "Accept": function() {
            connection.accept();
            $("#log").html("Call answered!");
            $( this ).dialog( "close" );
          },
          "Reject": function() {
            connection.reject();
            $("#log").html("Call rejected! Awaiting next call.");
            $( this ).dialog( "close" );
          }
        }
      });

      $("#log").html("Incoming call from " + connection.parameters.From);
      socket.emit("incoming",connection.parameters.From);
    });

    Twilio.Device.disconnect(function(connection) {
      $("#log").html("Ready");
    });

    /* Report any errors on the screen */
    Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);
    });

    Twilio.Device.connect(function (conn) {
        $("#log").text("Successfully established call");
    });

    socket.on('foundPerson', function(data) {

      $("#dialog-confirm").html("<i>" + data.number + "
      </i><br /><b>" + data.name + "</b><img src='" + 
      data.photo + "' />");
      $( "#dialog-confirm" ).dialog( "open" );
    });
  });

</script>
</head>

<body>
<div id="dialog-confirm" title="Receive Call?" style="display: none">
</div>
<button class="call">
  Call
</button>
<button class="hangup">
  Hangup
</button>
<input id="number" type="text" placeholder="Enter a number like 
+16519998888"/>
<div id="log">Loading pigeons...</div>
</body>

</html>

Upvotes: 0

Views: 909

Answers (1)

philnash
philnash

Reputation: 73027

Twilio developer evangelist here.

I think you may be opening your JQuery UI dialog incorrectly here.

What you want to do is set up the dialog outside of the incoming call event and then, when you get the call event, open the dialog.

So, it should be a bit more like this:

<script type="text/javascript">
  var socket = io.connect();

  // set up the dialog
  $(function() {
    var dialog = $("#dialog-confirm").dialog({
      resizable: false,
      modal: true,
      autoOpen: false,
      buttons: {
        "Accept": function() {
          Twilio.Device.activeConnection().accept();
          $("#log").html("Call answered!");
          $( this ).dialog( "close" );
        },
        "Reject": function() {
          Twilio.Device.activeConnection().reject();
          $("#log").html("Call rejected! Awaiting next call.");
          $( this ).dialog( "close" );
        }
      }
    });

    // do other Twilio.Device setup here

    Twilio.Device.incoming(function(connection) {
      // open the dialog
      dialog.dialog("open");

      $("#log").html("Incoming call from " + connection.parameters.From);
      socket.emit("incoming",connection.parameters.From);
    });

    // do other Twilio.Device setup here

</script>

Let me know if that helps at all!

Upvotes: 1

Related Questions