Twilio Client PHP Quickstart

Making Incoming and Outgoing Calls in Your Browser

Using your quickstart skills, you’ve already:

received an incoming connection
initiated an outgoing connection

It's time to put it all together -- let’s call from a browser client to another browser client.

For this to work, we need to have two different web browser windows open. Of course, each web browser needs to be registered under a separate name. For this example, we'll have one browser window be registered as 'jenny' and another one as 'tommy'.

We'll change the hello-client-monkey source code one more time to look for the client name in the URL. Take a look below:

quickstart/client/hello-client-monkey-5.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';

// put your default Twilio Client name here
$clientName = 'jenny';

// get the Twilio Client name from the page request parameters, if given
if (isset($_REQUEST['client'])) {
    $clientName = $_REQUEST['client'];
}

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

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Client Monkey 5</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("Client '<?php echo $clientName ?>' is 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() {
        // get the phone number or client to connect the call to
        params = {"PhoneNumber": $("#number").val()};
        Twilio.Device.connect(params);
      }

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

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

    <input type="text" id="number" name="number"
      placeholder="Enter a phone number or client to call"/>

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

Now we’re ready to connect the two browsers together!

Launch two browser windows, one pointing at hello-client-monkey.php?client=jenny and the other at hello-client-monkey.php?client=tommy. Now, use the text box in one of them to call the other browser by client name. Once the connection has been established, the two browser clients will be talking to each other.

Next: Displaying Availability of Other Clients »