PHP Quickstart: Making Incoming and Outgoing Calls in Your Browser

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:

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-&gt;allowClientOutgoing($appSid);
$capability-&gt;allowClientIncoming($clientName);
$token = $capability-&gt;generateToken();
?>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Hello Client Monkey 5</title>
        <script type="text/javascript"
          src="//media.twiliocdn.com/sdk/js/client/v1.3/twilio.min.js"></script>
        <script type="text/javascript"
          src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <link href="//static0.twilio.com/resources/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>

Launch two browser windows, one pointing at http://example.com/client?client=jenny and the other at http://example.com/client?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.

Let's look at what's actually going on after you enter 'tommy' and press 'Call':

  1. Twilio Client connects to Twilio, sending along the 'PhoneNumber=tommy' parameter.
  2. Twilio looks up the Voice URL for application AP123, which is example.com/voice.
  3. Twilio makes a POST request to example.com/voice to determine where to route the call. Your app looks for letters in the PhoneNumber parameter, and returns TwiML to dial the given client: <Dial><Client>tommy</Client></Dial>. Twilio then sends an incoming call notice to tommy.
  4. The browser with tommy as the client receives an incoming call request.

Next Steps

That was it for this quickstart! We hope you had a great time building your first Twilio Client application. If you want to learn more about the JavaScript library that we have been using throughout this document, read the Twilio Client JavaScript API reference.