Setting up the client

In this recipe, we're going to set up a simple Twilio Client app.

We'll set up our app to let you make a call by pushing a button. For now, the call will just be a welcome message.

How to do it…

This first recipe will set up a basic Twilio Client app in the following manner:

  1. First, since this recipe is using Twilio Client, you need to set up a TwiML app under your account as shown in the following screenshot:
    How to do it…
  2. Click on the Create TwiML App button and enter a name for your app. Leave the Voice Request URL field empty for now; just add a name in the Friendly Name field and click on Save Changes as shown in the following screenshot:
    How to do it…
  3. Now, go back to the application list, and you will see your new application. Look at the line directly beneath the name of your application. That is your application SID; copy it as you will need it for this recipe.
    How to do it…
  4. Download the Twilio Helper Library available at https://github.com/twilio/twilio-php/zipball/master and unzip it.
  5. Upload the Services/ folder to your website.
  6. .Upload config.php to your web server using the following code:
    <?php
$accountsid = '';  //  YOUR TWILIO ACCOUNT SID
$authtoken = '';  //  YOUR TWILIO AUTH TOKEN
$appsid = '';  //  YOUR TWILIO APP SID
?>
  7. Upload hello.php to your web server using the following code:
    <?php
  include("config.php");
  include 'Services/Twilio/Capability.php';
  
  $capability = new Services_Twilio_Capability($accountsid, 
    $authtoken);
  $capability->allowClientOutgoing($appsid);
  $token = $capability->generateToken();
?>
<!DOCTYPE html>
<html>
<head>
  <title>Hello Client</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>
<?php include("clientjs.php");?>
</head>
<body>
  <button class="call" onclick="call();">Call</button>
  <button class="hangup" onclick="hangup();">Hangup
    </button>
  <div id="log"></div>
</body>
</html>

    This sets up our base client interface and gets the token we will use for our app.

  8. Upload clientjs.php to your web server using the following code:
    <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");
  });
  
  function call() {
    Twilio.Device.connect();
  }
  
  function hangup() {
    Twilio.Device.disconnectAll();
  }
</script>

    The preceding code is our base Twilio Client code; it sets up instructions on what our app will do when it talks to Twilio.

    In this case, we tell it to update div with the ID "log" when we are ready to make calls, when we make a call, and when the call is ended.

  9. Open the clientjs.php file in your web server, and you will see a button to begin a call. Click on the button to begin the call, and you will be prompted to allow Twilio Client to access your microphone. Click on allow. When you make the call, you will hear a welcome message.
  10. You can then click on the Hangup button and hang up the call.

How it works…

In steps 1, 2, and 3, we set up a TwiML app in our Twilio account.

In steps 4 and 5, we downloaded and set up our Twilio PHP library.

In step 6, we set up our config.php file with our Twilio settings.

In step 7, we uploaded hello.php, which is our Twilio Client app.

In step 8, we uploaded our clientjs.php file, which contains our Twilio Client JavaScript code. This code is used to handle the process of talking to Twilio from our web app.

This is a basic example that allows you to make a call and hang up. In the upcoming recipes, we'll have a look at receiving incoming calls and making outgoing calls.

The complete code for this recipe can be found in the Recipe1 folder under Code.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset