Receiving incoming calls in the browser

Now that you know how to place and disconnect calls from the browser, it's time for your browser to start receiving incoming calls. By the end of this recipe, you will be able to make a call into your browser from your phone.

Getting Started

We're going to set up our Twilio Client app to accept incoming calls. This involves making changes to our Twilio app in our Twilio account.

To begin receiving incoming calls, we have to set up the Twilio Client app by performing the following steps:

  1. Give the browser session a client name. The browser will use this name when it registers itself with Twilio.
  2. Set up Twilio Client to notify your browser session about incoming connections.
  3. Write a TwiML code that directs incoming calls to your browser session.

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

How to do it…

We will be implementing the following steps to set up our own app to allow incoming calls into our browser:

  1. Firstly, since this is using the Twilio Client, you need to set up a TwiML app under your account; you can do this by logging in to your account and going to Dev Tools from the top menu 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. Add a URL in the Voice Request URL field to client.php on your web server 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 app. That is your app 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
  $appname = '';  //  YOUR CLIENT NAME
?>
  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);
  $capability->allowClientIncoming($appname);
  $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>

    We've once again set up our client interface. When we set up our token, we also specified to allow the app to accept incoming calls

  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");
  });
  
  Twilio.Device.incoming(function (conn) {
    $("#log").text("Incoming connection from " + 
      conn.parameters.From);
    conn.accept();
  });
  
  function call() {
    Twilio.Device.connect();
  }
  
  function hangup() {
    Twilio.Device.disconnectAll();
  }
</script>

    This JavaScript code may look similar to the last recipe, but we've also added a connection for incoming calls, which will display a message in the log div and also accept the call.

  9. Upload client.php to your web server using the following code:
    <?php
  include("config.php");
  header('Content-type: text/xml'),
?>
<Response>
  <Dial>
    <Client><?php echo $appname; ?></Client>
  </Dial>
</Response>
  10. Configure a Twilio number to use the application as shown in the following screenshot:
    How to do it…

How it works…

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

In steps 4 and 5, we downloaded and set up our Twilio Helper Library.

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

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

In step 8, we uploaded clientjs.php, which handles the process of talking to Twilio from the browser.

In step 9, we uploaded client.php, which receives incoming calls and connects to our browser session.

In step 10, we connected a Twilio number to our application.

Now, whenever a user calls on the number we have set up, it will connect to our Twilio app, which will in turn connect to the Twilio Client running in our browser and display the incoming call on your browser.

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

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