CODEWITHSUNDEEP
twiliotwilio-apitwilio-phptwilio-click-to-call
Farman Ali Khan
Farman Ali Khan

Reputation: 896

Twilio outgoing call from browser

I am begineer in twilio. I have read quickstart to make outgoing call from browser. My code is given below

 <?php
require 'twilio-php-master/Twilio/autoload.php';
use Twilio\Jwt\ClientToken;
$accountSid = '***************************';
$authToken  = '***************************';
$appSid = '****************';

$capability = new ClientToken($accountSid, $authToken);
$capability->allowClientOutgoing($appSid);
$capability->allowClientIncoming('jenny');
$token = $capability->generateToken();
?>

<!DOCTYPE html>
<html>
  <head>
    <title>Hello Client Monkey 4</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("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 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 to call"/>

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

TwiML Code is here

<?xml version="1.0" encoding="UTF-8"?>
<Response>
  <Dial callerId="+14159426198">
    <Number>+91**********</Number>
  </Dial>
</Response>

I am able to make outgoing call. I have made TwiML application using above twiML bin but in twiML outgoing call number is static. How to make it dynamic to make outgoing call in any number?

Please help.

Upvotes: 4

Views: 1799

Answers (2)

philnash
philnash

Reputation: 73075

Twilio developer evangelist here.

You already have the UI set up to make calls to any number, the only thing you need to do is make your TwiML application dynamic. You can see that when you start a call with the Client you are sending some parameters:

  function call() {
    // get the phone number to connect the call to
    params = {"PhoneNumber": $("#number").val()};
    Twilio.Device.connect(params);
  }

When Twilio gets this call it sends the parameters to your TwiML application and then makes the call based on the TwiML. You need to update your TwiML be dynamically generated based on the PhoneNumber parameter that you are sending. Something like this should work:

<?php
  $phoneNumber = $_REQUEST['PhoneNumber'];
  header("Content-type: text/xml");
?>
<Response>
  <Dial callerId="+14159426198">
    <Number><?php echo $phoneNumber ?></Number>
  </Dial>
</Response>

Let me know if that helps at all.

Upvotes: 2

miknik
miknik

Reputation: 5951

In the quickstart you set your outgoing caller ID in the config.php file. You can only use numbers you have bought from Twilio or verified.

Upvotes: 0

Related Questions