[FIXED] How to answer incoming call in browser using javascript and php

Issue

connection.on('incoming', function(conn) {}) function not called.

I am trying to implement the incoming call in the browser. What I tried is a javascript code

var number = $("#number").val();

params = {
    "PhoneNumber": number,  
    "CallerId": "+13604924000",
    "AgentName": "Noman Javed",
};

Twilio.Device.setup(token);

Twilio.Device.ready(function(device) {

    console.log('Ready');

    // ---------------------------------------------------
    // Explicitly create a new outgoing connection
    var connection = Twilio.Device.connect(params);

    console.log('PhoneNumber: ' + params.PhoneNumber);

    $('#hangup_btn_span').show();
    $("#hangup_btn").show();

    connection.on('error', function(error) {
        console.log(error);
    });

    connection.on('accept', function(conn) {
    
    });

    connection.on('incoming', function(conn) {
        console.log("incoming call connection object log");
        console.log(conn);
        console.log('Incoming connection from ' + conn.parameters.From);
        // accept the incoming connection and start two-way audio
        // conn.accept();
    });

}

For outgoing calls, I had to add the URL of the Twiml App outgoing call URL and dial the call using rest API to hit twiml page.

For incoming calls, I had add incoming call URL in the phone number incoming call URL that is

mydomain.com/Welcome/incoming_call

The incoming call urls code is:

header('Content-Type: application/xml');
// Load the required files
require APPPATH . 'libraries/vendor/autoload.php';

use Twilio\Jwt\ClientToken;
use Twilio\Rest\Client;
use Twilio\TwiMl;
use Twilio\TwiML\VoiceResponse;

    file_put_contents('request.log', "\n" . "incoming call - : " . json_encode($_REQUEST)  . "\n", FILE_APPEND);    
?>
<Response>
   <Pause length="2"/>
   <Say voice="woman">Dialing number</Say>   
   <Dial callerId="<?php echo $_REQUEST['From']; ?>" >
        <?php echo $_REQUEST['To']; ?>        
   </Dial>
</Response>

How I will receive the call in the browser in this function with parameters

connection.on('incoming', function(conn) {
    console.log("incoming call connection object log");
    console.log(conn);
    console.log('Incoming connection from ' + conn.parameters.From);
    // accept the incoming connection and start two-way audio
    // conn.accept();
});

Do I need to add an incoming call URL in Twiml App too or just add in the phone number incoming URL?

Thanks in advance for helping and guiding.

Solution

First, in the twiml app you have to add the url for your backend api where you have your php code and add that twiml app to your incoming number.

Now, while generating the token for your user you must have used an 'identity'. We need to use that identity value to connect the incoming call to the user. Something like below:

$response = new VoiceResponse();
$dial = $response->dial('');
$dial->client(IDENTITY_VALUE);

this dial->client will connect the incoming call to the browser.

If you have not used identity attribute in your token generation, check this url: https://www.twilio.com/docs/iam/access-tokens?code-sample=code-creating-an-access-token-voice-2&code-language=PHP&code-sdk-version=5.x

Answered By - ShivamGupta

Answer Checked By - Clifford M. (PHPFixing Volunteer)