Twilio outgoing call from browser

Question

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.

score 2 · Accepted Answer · answered Oct 09 '17 at 10:16

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.

I tried you same code but phone number not reach at my twmil link via Request. Could you please let me know why this is happens — Hamid Ejaz, Mar 26 '19 at 12:10
I'm afraid I'll need more detail than that in order to help. I would check to see that you have set up a TwiML application correctly, with links to your application, but beyond that I don't really know. I'd recommend you start a new question and explain what you're trying to do, share any relevant code and explain what is not working. — philnash, Mar 28 '19 at 00:02

score 0 · Answer 2 · answered Oct 06 '17 at 21:27

0

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.

answered Oct 06 '17 at 21:27

miknik

5,748
1
10
26

For caller ID I have twilio number. But I want to make call to any number. I have created a twiML application where I added abiove twiML . In twiML I have add a number. I want to make that number dynamic. – Farman Ali Khan Oct 07 '17 at 04:28

Twilio outgoing call from browser

2 Answers2