Who we are

Nethram LLC is a promising name in the field of Telecommunications and Cloud Computing. Based in Silicon Valley, the company has a proud legacy spanning of over 11 successful years of software development. Nethram was born in August 2004 as a brainchild of two professionals Paul Mathews and Helani Mathew. Specialized in Cloud Computing, Telephone Solutions and Interactive TV with VOD, the company believes in the clever use of telecommunications as an effective tool to reach out to a wide mass with powerful, efficient and clear messages across borders. In June 2013, Nethram spread out its branches to India, with the formation of Nethram India Innovation Center Pvt Limited.

Call Us At

1-888-440-3740

Know more

Ethan M

Excellent work, great communication and very precise and detail oriented. Was able to implement on time and on budget! Rare indeed! highly recommended.

Our Blog

Onscreen dialpad : Append entries to text field, send dtmf for twilio calls

Sibin John
February 25, 2015
dial

How to create an onscreen dialpad for web pages ? And append the entries from dialpad to a text field. Here is one working example left for you,

This is a custom dialpad used in web twilio , the web client for twilioid app.

 

dial

 

 

CSS


<style>

.btn-primary.active{color:rgba(255, 255, 255, 0.75);}

.btn-primary{color:#ffffff;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);

background-color:#006dcc;

background-image:-moz-linear-gradient(top, #0088cc, #0044cc);

background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));

background-image:-webkit-linear-gradient(top, #0088cc, #0044cc);

background-image:-o-linear-gradient(top, #0088cc, #0044cc);

background-image:linear-gradient(to bottom, #0088cc, #0044cc);

background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);

border-color:#0044cc #0044cc #002a80;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);

*background-color:#0044cc;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,

.btn-primary[disabled]{color:#ffffff;background-color:#0044cc;*background-color:#003bb3;}

.btn-primary:active,.btn-primary.active{background-color:#003399 \9;}

</style>

Html

Code to create dialpad :


<table id="dialpad" cellpadding="3%">

<tr id="dial_row1">

<td><input type="button" value="1" id="button1" class="btn btn-primary">

<td><input type="button" value="2" id="button2" class="btn btn-primary"></td>

<td><input type="button" value="3" id="button3" class="btn btn-primary"></td>

<td><input type="button" value=" Clear " id="buttonclear" class="btn btn-warning"></td>

</tr>

<tr id="dial_row2">

<td><input type="button" value="4" id="button4" class="btn btn-primary"></td>

<td><input type="button" value="5" id="button5" class="btn btn-primary"></td>

<td><input type="button" value="6" id="button6" class="btn btn-primary"></td>

<td><input type="button" value="Erase " id="buttonerase" class="btn btn-warning"></td>

</tr>

<tr id="dial_row3">

<td><input type="button" value="7" id="button7" class="btn btn-primary"></td>

<td><input type="button" value="8" id="button8" class="btn btn-primary"></td>

<td><input type="button" value="9" id="button9" class="btn btn-primary"></td>

<td><input type="button" id="accept_button" class="btn btn-success" value="Accept" disabled="disabled"></td>

</tr>

<tr id="dial_row4">

<td><input type="button" value="*" id="buttonstar" class="btn btn-primary"></td>

<td><input type="button" value="0" id="button0" class="btn btn-primary"></td>

<td><input type="button" value="#" id="buttonpound" class="btn btn-primary"></td>

<td><input type="button" id="reject_button" class="btn btn-danger" value="Reject " disabled="disabled"/></td>

</tr>

</table>

and create a text field to append values,

</pre>
<form name="myform">

<input type="text" id="number_to_call"  name="number_to_call" />

</form>
<pre>

Script

 

for appending to text field,


$.each(['0','1','2','3','4','5','6','7','8','9','star','pound','erase','clear'], function(index, value) {

$('#button' + value).click(function()

{

var number=value;

if(number == 'star')

{

document.myform.number_to_call.value += '*';

}

else if(number == 'pound')

{

document.myform.number_to_call.value += '#';

}

else if(number == 'clear')

{

document.myform.number_to_call.value = '';

}

else if(number == 'erase')

{

number =(document.myform.number_to_call.value).slice(0,-1);

document.myform.number_to_call.value = number;

}

&nbsp;

else

{

document.myform.number_to_call.value += number;

}

});

});

for sending dtmf, change the click function as follows,


if (value=='star')

connection.sendDigits('*')

else if (value=='pound')

connection.sendDigits('#')

else

connection.sendDigits(value)

 

 

Refreshing twilio token programmatically

Sibin John

Twilio Client uses capability tokens to establish communications between devices to Twilio. Capability tokens allow you to add Twilio capabilities to web and mobile applications.

 

Allowing incoming and outgoing capability to a twilio client

 

You create a token on your server and specify what capabilities you’d like your device to have. Here is the code for creating capability token with your twilio credentials (ie. Accountsid and AuthToken). Also download the twilio library from https://github.com/twilio/twilio-php/archive/master.zip and move the twilio-php folder to your project directory and then include the library file, (using php)

 


require '/path/to/twilio-php/Services/Twilio.php';

require '/path/to/twilio-php/Services/Twilio/Capability.php';

$token = new Services_Twilio_Capability(‘Account sid’, ‘AuthToken’);

$token->allowClientOutgoing(‘Appsid’); //enter Appsid of twilio app

$token->allowClientIncoming(‘client name’); // enter client name

Generate tokens


A token can be generated, (using js )


Twilio.Device.setup("<?php echo $token->generateToken();?>");

using php,


$token_name = $token->generateToken();

Life time of tokens and need for refreshing

 

All tokens have a limited lifetime to protect you from abuse. The lifetime is configurable up to 24 hours. By default, this token will expire in one hour. If you’d like to change the token expiration time,generateToken takes an optional argument which specifies time to live in seconds.

in js:


Twilio.Device.setup("<?php echo $token->generateToken(600);?>");//This token will now expire in 10 mins

 

in php:


$token_name = $token->generateToken(600); //This token will now expire in 10 mins

If you are creating applications that requires the twilio client to be online all the time, then this tokens must be refreshed after they expired.

 

For example, web twilio is one of my application that refreshes twilio token every 10 hours.  I used the following simple technique to refresh the twilio token,


Twilio.Device.setup("<?php echo $token->generateToken();?>");

setTimeout(function()

{

location.reload();//reload page every 10hrs to refresh twilio token

}, 36000000);   // 36000000 milliseconds = 10 hours

One disadvantage of this method is that any call in progress, at the time of refreshing page, may be lost. If you want to avoid this problem generate another token in the timeout function.

 

Our Clients

SAMSUNG

ABS TRANSLATE

E RELEASES

LEFKOWITS LI

THE MOTELY FOOL

THE MEDICAL TEAM

TRULY WIRELESS

ATTENDENCE MANAGER

DIRECT MAILERS

E RELEASES

LEFKOWITS LI

ABS TRANSLATE

Our Services

Telecommunication

With our combined thirty years plus experience, we are experts in telecommunications and have made telecommunications easier to use for our clients.

READ MORE

Cloud Computing

Nethram team has a proven track record in accomplishing cloud computing services using Amazon AWS services, Google Cloud and Microsoft Azure.

READ MORE

Video On Demand

We are experts in video management, video hosting, video streaming, Roku channel development and Chromecast development.

READ MORE