Caller ID with Asterisk and Ajax

Combine Asterisk and Ajax to display incoming and outgoing call information.

I've been using an Asterisk server to handle all of our telephone service for about a year now. During this time, I've discovered many really neat things that can be done with Asterisk, VoIP and various other technologies. One of the more gimmicky things I've done is sent the caller-ID information from incoming calls to a Web page on my browser, in real time. To do this, I had to use Asterisk, Perl, CGI, HTML, CSS, SQL, XML and Asynchronous JavaScript, or Ajax. There are a lot of different pieces to bring together, but sometimes that's what makes a project interesting.

Here's how it works in a nutshell. When someone calls us at the house, the Asterisk server waits for the caller-ID information to be sent. The server then puts this information, and a few other pieces of information, into a file in a subdirectory under /tmp. This is all done in the Asterisk dial plan. Then, I have a Web page open in my browser that runs a JavaScript program every second. This JavaScript program uses an XMLHttpRequest object to query the server for new caller-ID information. The CGI script on the server returns an XML file containing the caller information. The JavaScript program parses the returned XML and displays the content. I've created a Cascading Style Sheet (CSS) that makes the caller information look like a sticky note placed on the Web page. When the incoming call is complete, the Asterisk server creates a Call Detail Record, or CDR, which resides in an SQL database.

Each time the JavaScript contacts the server, the CGI script looks for the CDR. If it exists, the program knows that the call is over and deletes the caller information file in /tmp. This has the effect of causing the sticky notes to disappear when the call is complete.

As an added bonus, the program supports up to four concurrent calls and can be used to indicate outbound calls as well. It's kind of nice to be able to see who's on the phone, regardless of whether the person is the caller or callee, without having to interrupt the person on the phone to ask. When my boys get older, this may become an even more important feature.

For this system to work, you must configure your Asterisk server to put CDRs in an SQL database. By default, Asterisk puts CDRs in a comma-delimited file. The problem is that the flat file CDRs don't contain the call's unique ID, which this system uses to detect when a call has completed. The CDRs that get put into the SQL database contain this field. This shouldn't be a steep requirement though. As I recall, configuring Asterisk to store CDRs in a Postgres database was fairly straightforward and well documented in the cdr_pgsql.conf file. You also could use a MySQL or ODBC database, if you like.

The first, and easiest, part of this project is to modify the Asterisk dial plan to create the flat file when an incoming or outgoing call is made. Once you determine where to make the change, it's a simple one-line addition, as shown here (all one line):

exten => s, n, system(echo "IN#${CALLERID(name)}
↪#${CALLERID(number)}#${UNIQUEID}" >

This line creates a file in /tmp/panels/cid that contains four fields, delimited by the # character. Of course, you need to create /tmp/panels/cid and give it appropriate permissions so that the Asterisk server can create files in it and the CGI script can read and delete those files. The first field is either IN or OUT and indicates that the call is INcoming, or OUTgoing. The next two fields call the CALLERID() function to retrieve the caller's name and phone number. The last field is the call's unique identifier. You need to place this line in your dial plan, such that the server has already received the caller-ID information but before the call is handed off to the dial command. If you want to receive information about outgoing calls, you could add a line like this to your dial plan:

exten => s, n, system(echo "OUT##${EXTEN}#${UNIQUEID}"
↪> /tmp/panels/cid/${UNIQUEID})

In the case of the outgoing call, we don't have any caller-ID information to display, so the second field is left blank. We do know the number that was dialed, which is retrieved via the ${EXTEN} variable in the third field.

In both the incoming and outgoing cases, you need to make sure to update the extension field and the priority fields (s and n in this example).

For the purpose of demonstration, I've stripped the Web page down to its most basic requirements, as shown in Listing 1.

This seemingly simple HTML code does a lot of things. First, it loads the cid.js JavaScript code. Then, it imports a stylesheet called cid.css. This stylesheet will give you a lot of flexibility to customize the appearance of the sticky notes. Then, the HTML code creates four div sections, called phone1 through phone4. These sections will be made visible later on and will be filled in with caller information. Finally, the HTML code starts the periodic polling by calling the start_cid() function. We'll discuss that function later.

Even though my CSS skills aren't world-class, I've included a sample cid.css file to get you started (Listing 2).


Mike Diehl is a freelance Computer Nerd specializing in Linux administration, programing, and VoIP. Mike lives in Albuquerque, NM. with his wife and 3 sons. He can be reached at


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Regarding script in linux

Sagar's picture

I need a script which will count the number of lines in a file or directory without counting the commented lines with different patterns.Can anyone help me out in this.

This is great, however, it

sarge's picture

This is great, however, it requires that your browser window be open at all times and on top of all other windows for you to see the caller info.

I have created a windows service that will listen on a defined port. When the call comes in, * posts some details to the listener service and this pops open my default browser to a predefined page and the page then loads the caller information from a call database. This way the only thing running on the windows pc is a small service and not javascript refreshing every second.

The above solution was for my windows machines...but for a linux solution wouldn't it be just as easy to run a system command to open the browser along with the url to a page like And then have the php page pull the caller information when the page loads from the unique id 1 time instead of constantly?

sarge! if you can share your windows listener

Abdul Basit's picture

agree. I need the same functionality as you developed for windows environment.
I will appreciate if you will share this windows listener.

Great combination of scripts

eayala's picture

Just wanted to than you Mike for these great examples. I just finished adding your scripts into our intranet web page and enjoyed learning on the way. This is my first time trying out anything on AJAX and I'm already impressed.

Thank you

Mike Diehl.'s picture

Thank you for the kind words. Sorry I'm just getting back to you; I don't usually check this forum. Take care and have fun,

Mike Diehl.

Caller ID with Asterisk and Ajax

Tattoo Design's picture

Thanks for sharing your in depth knowledge with us.