How to Implement Click-to-Call on a Web Page

By: Eric Hernaez on May 8th, 2012

I never cease to be amazed by the treasures that can be uncovered with a bit of googling.

Over the weekend, I came across some open source PHP code that implements click-to-call from a web page.   I was intrigued enough to give it a try and, surprisingly, I had it up running in about an hour. If you need to implement click-to-call on a web site, this example will show how to do it using PHP-SIP class and your NetSapiens PBX.

Prerequisites

In order to accomplish the scenario shown in the diagram below, you will need the following:

  • Basic knowledge of SIP protocol.
  • PHP-SIP class
  • NetSapiens PBX extension – this will be our SIP Proxy and sip:user1@sip in the diagram below
  • PHP (version >= 5) enabled web server
  • Zoiper softphone, or any other SIP phone registered to the NetSapiens PBX

 

SIP Flow diagram

Click to Call SIP flow diagram

  1. User submits a form with calling (sip:user1@sip) and called (sip:user2@sip) parties SIP URIs.
  2. Web Server sends INVITE to sip:user1@sip.
  3. Once INVITE is accepted by user1, web server immediately sends REFER with sip:user2@sip in “Refer-to” header.
  4. Web Server terminates “call” by sending BYE to user1.
  5. As instructed in REFER request sent by a web server, user1 sends INVITE to sip:user2@sip.

 

Step 1. Create Click to Call web page

Go to your web server root directory and create a file called c2c.php file with the content below. Note the ‘setUsername’, ‘setPasword’ and ‘setFrom’ parameters in the code. These must be edited to reflect the SIP user, password and domain of the extension that you will use to make the call. This is necessary in order to authenticate with the NetSapiens PBX because the web page will be initiating a call on behalf of your PBX extension.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>

<head><title>PHP-SIP Click to Call</title></head>

<body>

<?php
if ( !function_exists(‘sys_get_temp_dir’)) {
function sys_get_temp_dir() {
if( $temp=getenv(‘TMP’) ) return $temp;
if( $temp=getenv(‘TEMP’) ) return $temp;
if( $temp=getenv(‘TMPDIR’) ) return $temp;
$temp=tempnam(__FILE__,”);
if (file_exists($temp)) {
unlink($temp);
return dirname($temp);
}
return null;
}
}
?>

<?php if (isset($_POST['from']) && isset($_POST['to'])) : ?>

<?php require_once(‘php-sip/PhpSIP.class.php’) ?>

<?php $from = $_POST['from']; $to = $_POST['to'] ?>

Trying call from <?php echo $from ?> to <?php echo $to ?> …<br />

<?php flush() ?>

<pre>
<?php

try{

$api = new PhpSIP();
// If you get “Failed to obtain IP address to bind. Please set bind address manualy.”
// use the line below instead:
// $api = new PhpSIP(‘your_web_server_IP_address’);

$api->setDebug(true);
$api->setUsername(‘2012′);
$api->setPassword(‘2012-Password’);
$api->addHeader(‘Subject: click2call’);
$api->setMethod(‘INVITE’);
$api->setFrom(‘sip:2012@demo.netsapiens.com’);
$api->setUri($from);

$res = $api->send();

if ($res == 200)
{
$api->setMethod(‘REFER’);
$api->addHeader(‘Refer-to: ‘.$to);
$api->addHeader(‘Referred-By: sip:c2c@’.$api->getSrcIp());
$api->send();
$api->setMethod(‘BYE’);
$api->send();
$api->listen(‘NOTIFY’);
$api->reply(481,’Call Leg/Transaction Does Not Exist’);
}

if ($res == ‘No final response in 5 seconds.’)
{
$api->setMethod(‘CANCEL’);
$res = $api->send();
}

echo $res;

} catch (Exception $e) {

echo “Opps… Caught exception:”;
echo $e;
}

?>
</pre>
<hr />

<a href=”<?php echo $_SERVER['PHP_SELF']; ?>”>Back</a>

<?php else : ?>

<form action=”<?php echo $_SERVER['PHP_SELF'] ?>” method=”post”>
<fieldset>
From: <input type=”text” name=”from” size=”25″ value=”” />
To: <input type=”text” name=”to” size=”25″ value=”sip:enum-test@sip.nemox.net” />
<input type=”submit” value=”Call” />
</fieldset>
</form>

<?php endif ?>

</body>

</html>

 

Step 2. Install PHP SIP Class

Download PHP-SIP from code.google.com/p/php-sip/downloads/list and extract it into your web server root directory, so it looks as shown below:

/web-root/c2c.php
/web-root/php-sip/PhpSIP.class.php
/web-root/php-sip/PhpSIP.Exception.php
/web-root/php-sip/README

Now open the web browser and navigate to http://your_web_server/c2c.php which should show a form similar to:

Step 3. Register SIP Phone

For the purpose of this sample we will register using the NetSapiens PBX extension 2012 using the Zoiper softphone. Obviously, this should be replaced with a PBX user from your own domain. Chances are that you already have a SIP phone registered to the NetSapiens PBX extension. If that is the case, skip this and proceed to the next step.

Start Zoiper, select Preferences… and enter your NetSapiens PBX extension details:

… click the OK button and your softphone should display: Registered

 

 

Step 4. Testing

Open a web browser and navigate to your “Click to Call” page. Enter sip:your_extension@yourdomain.com into the From field (use the same SIP user configured in the PHP code), and enter another registered extension or PSTN number in the To field using the format sip:other_extension@yourdomain.com, then click the Call button. Your SIP phone (Zoiper in this example) should indicate an incoming call. Answer the call and your phone will be transferred to the extension or telephone number you dialed (you will hear the IVR prompt ‘Please hold while your call is transferred’). Once the call is connected, the click-to-call web page will display the call status as shown in the screenshot below.

Congratulations! Your Click to Call web page works!

 

Summary

The above illustrates the simplest possible scenario. In real life you can modify the PHP code to fetch users or destinations from a database or CRM application.

These instructions were taken from the Level 7 tutorial, and slightly modified to show how it works with the NetSapiens PBX. The original post contains a very useful comments section.