Twilio Client PHP Quickstart

Receiving Connections

Now that you know how to disconnect connections from the browser, it's time for your browser to start receiving incoming connections! By the end of this tutorial, you will be able to call into your browser from your phone.

In order to receive incoming connections, we'll do the following things:

Give the browser client a name and register it with Twilio.
Add callbacks that notify your app of incoming connections.
Write some TwiML that directs incoming calls to <Dial> your named <Client>.

The client identifier currently may only contain alpha-numeric and underscore characters.

The new additions to our code are highlighted below. This is the summary of the important changes:

The function allowClientIncoming('jenny'); grants the browser permission to register itself with Twilio under the name 'jenny'. If your TwiML <Dial>s 'jenny', your browser will receive a connection request.
The callback registered to Twilio.Device.incoming is triggered when an incoming connection request is received.

You'll also need to update allowClientOutgoing with the Application Sid of your Twilio Sandbox. You can find this Application Sid on the Sandbox portion of your Account Dashboard.

quickstart/client/hello-client-monkey-3.php

<?php
include 'Services/Twilio/Capability.php';

// put your Twilio API credentials here
$accountSid = 'ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
$authToken  = 'yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy';

// put your Twilio Application Sid here
$appSid     = 'APzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz';

$capability = new Services_Twilio_Capability($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('jenny');
$token = $capability->generateToken();
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Client Monkey 3</title>
    <script type="text/javascript"
      src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
    <script type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
    </script>
    <link href="http://static0.twilio.com/packages/quickstart/client.css"
      type="text/css" rel="stylesheet" />
    <script type="text/javascript">

      Twilio.Device.setup("<?php echo $token; ?>");

      Twilio.Device.ready(function (device) {
        $("#log").text("Ready");
      });

      Twilio.Device.error(function (error) {
        $("#log").text("Error: " + error.message);
      });

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

      Twilio.Device.disconnect(function (conn) {
        $("#log").text("Call ended");
      });

      Twilio.Device.incoming(function (conn) {
        $("#log").text("Incoming connection from " + conn.parameters.From);
        // accept the incoming connection and start two-way audio
        conn.accept();
      });

      function call() {
        Twilio.Device.connect();
      }

      function hangup() {
        Twilio.Device.disconnectAll();
      }
    </script>
  </head>
  <body>
    <button class="call" onclick="call();">
      Call
    </button>

    <button class="hangup" onclick="hangup();">
      Hangup
    </button>

    <div id="log">Loading pigeons...</div>
  </body>
</html>

Copy the following code into a file named hello-client-twiml.php on your web server. Assuming you put the file in the document root of your companyfoo.com web site, the URL will be: http://companyfoo.com/hello-client-twiml.php. When you're done, load that URL in your browser to make sure the script renders the TwiML snippet correctly.

quickstart/client/hello-client-twiml.php

<?php
header('Content-type: text/xml');
?>

<Response>
    <Dial>
        <Client>jenny</Client>
    </Dial>
</Response>

Now we need a Twilio phone number (for this tutorial, we'll just use your Twilio Sandbox number). Configure the Voice URL on your Sandbox (in the Account Dashboard) to point to the TwiML file at http://companyfoo.com/hello-client-twiml.php

Reload your Twilio Client web page, and your browser is now ready to receive incoming calls! Call your Twilio Sandbox number from your phone and you should be connected to your browser, which will automatically answer the call... Now start talkin’!

Next: Making Outgoing Calls »