Twilio-无法接听或拒绝来电

时间:2016-01-11 14:33:56

标签: browser twilio incoming-call

我的浏览器会响铃,但我无法接听或拒绝来电。接到来电时,接听和拒绝按钮不会显示。我在代码中遗漏了什么吗?需要帮助!

我的摘录是:

<!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> 

1 个答案:

答案 0 :(得分:1)

Twilio开发者传道者在这里。

我认为您可能在这里错误地打开了JQuery UI对话框。

您要做的是在来电事件之外设置对话框,然后,当您收到呼叫事件时,打开对话框。

所以,它应该更像这样:

<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>

请告诉我这是否有帮助!