Building a Twilio Client Web App – Part 2

| 9 Comments

In my previous post I showed you how to build a basic Twilio Client Web App that makes an outgoing call and plays the Twilio welcome message. In this post we’ll be taking a bit of a deeper dive and you’ll learn how to conference all your Web App Users onto one call and also allow them to call each other. We’ll be building off of what we built in part 1 of this series, so if you haven’t read that you may want to now!

Oh… Hai TwiML!

Before we dive into the Twilio Client code, let’s take a brief look at Twilio Markup XML (TwiML). TwiML is the language you use to communicate desired action(s) to Twilio. It’s very powerful. Want to send a text? Want to make a call? Want to conference? TwiML will help you make that happen, For our purposes, we’ll just be using the most basic functionality. If you want to find out more about it you should take a look at the documentation.

Initially we’ll be using the following TwiML code (You can save it to call.xml on your server):

<?xml version="1.0" encoding="UTF-8"?>
<Response>
<Say>Connecting You to The Room</Say>
<Dial>
<Conference>TwilioClientRoom</Conference>
</Dial>
</Response>

First, we include a standard XML declaration. Next we include the TwiML root node “Response”. Response let’s Twilio know that we’re directly responding to their request. Next we include the “Say” verb. Say allows our app to speak to the user, in the case we’ll be notifying them that they’re being connected. Next we include the “Dial” verb and nest the “Conference” verb inside it to connect them to a room called “TwilioClientRoom”. One important thing to note is that all the TwiML verbs are case sensitive so if you try to use response/say/dial/conference you’ll get an error.

Updating Account Settings

Now that we built some TwiML to respond to the Twilio request we need to tell Twilio to use it. Log into your Account Dashboard and set the for your app to point at the XML you just saved on your server.

Wait… That’s All?

Open the page you built in part 1 of this tutorial. Hit call… You should hear “Connecting You to The Room” and then the beautiful Twilio hold music. Send it to a friend, have them hit call.  You’ll now be connected and talking in a conference room. Send it to another friend, or maybe another few. Yes, we seriously just switched what seemed like a basic demo app into a conference calling system in less than 5 minutes.

Now What?

Ok, I wanted to start this post off doing something really quick and easy to further prove how awesome Twilio Client is! Now that you’re probably drooling at the possibilities, let’s get into the deeper details and update our app to do something a bit more complex. Let’s create a new TwiML file, but this time we’ll save it as a .php file.

<?php
header('Content-type: text/xml');
if (isset($_REQUEST['PhoneNumber'])) {
$client = htmlspecialchars($_REQUEST['PhoneNumber']);
}
?>
<Response>
<?php if (empty($client)) { ?>
 <Dial>
<Client><?php echo $client; ?></Client>
</Dial>
<?php } else { ?>
<Say>An Error Occurred. We are sorry.</Say>
<?php } ?>
</Response>

First thing we do is set the Content-type to “text/xml” so that Twilio properly handles our response. Next, we check to see if we’ve been passed a PhoneNumber in the $_REQUEST scope. This is a value that’s set by Twilio to inform us of what phone number or client they’re trying to reach with the request. Next, we’ll confirm client isn’t empy. If it isn’t, we’ll send the familiar Dail verb, but this time we’ll nest “Client”. Client is a verb that specifically notifies Twilio that you want to dial a certain client using your app.  If the client variable is empty we’ll notify the user of an error. Now update your Account Dashboard to point your app Voice URL at this PHP file.

Updating Twilio Client Code

Finally, we’re going back to the Twilio Client code we wrote in part 1 of this series. In the previous step we step our TwiML to call a “client”, but we need to tell Twilio that clients exist so it knows how to connect. Let’s update our code to do that:

$client = (isset($_REQUEST['client']) ? $_REQUEST['client'] : 'friend';

$capability = new Services_Twilio_Capability($accountSid, $authToken);
// give this app permissions
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming($client);

First we’re checking the $_REQUEST scope for a client variable, if it’s not set we’ll use a default name of ‘friend’. Next we have the instantiation of a new Services_Twilio_Capability and allowClientOutgoing() function call that we setup in part 1. But we then add something new, a call to the allowClientIncoming() function with our $client name. This is the code that tells Twilio that this client has permissions to receive incoming calls, and notifies of what name we’ll be using to reference the client.

Last Few Things…

We’re just a few more lines away from making a browser to browser call. Can you believe it?!? First let’s update our page to include a text input for entering the desired client to call.

Client to Call: <input type="text" id="client" name="client" />

And now we’ll update our JavaScript call() function to use this information.

function call() {
// make call
params = { "PhoneNumber" : $("#client").val() };
Twilio.Device.connect(params);
}

Finally, we’ll add the Twilio.Device.incoming callback and tell it to automatically accept incoming calls.

Twilio.Device.incoming(function (conn) {
// automatically accept the call
conn.accept();
});

Ok, now it’s time for the moment of truth. Load up the page and pass it your desired client name (example: http://yourdomain.com/phpfile.php?client=ricky). Now send the link to your friend without the client parameter. Enter “friend” in your Client to Call field and hit call… Hopefully you’ll be magically connected in a conversation. Chances are you will be, because it’s Twilio and typically things just work. If it doesn’t work feel free to leave a comment here, I’d be more than happy to help you debug. Twilio also hosts IRC office hours where you can talk to the real experts.

Thanks!

Well, that’s all I’ve got for you in this post. I have to spend the rest of my nights finishing up my submission for the wonderful Twilio Client Contest. You should be doing the same! I’ll be following up with one last post in the series talking about the app I built for the contest, and some interesting things I encountered along the way.