WebRTC Phone Calls via Asterisk

Are you ready for another off topic article on WebRTC?  This one is titled WebRTC Phone Calls via Asterisk. I have written about Asterisk before (HERE) and that article did have something to do with microcontrollers  😎  Asterisk is an open source full featured phone system (PBX). In my last post about WebRTC, I showed how to do video/audio sharing via WebRTC. This article shows how to turn your Web browser into a (tele)phone (using the PC audio devices and WebRTC Javascript code). With the code provided you can make and answer calls through your Asterisk system via the Web.

Of course you need an Asterisk system up and running for testing this. There are many helpful tutorials on the internet to help with that. The Asterisk wiki also has very good documentation on installing and customizing Asterisk.

The article to customize Asterisk for WebRTC is HERE. Basically, there are three configuration files that need changed to make WebRTC Phone Calls via Asterisk.  Usually these files (httpd.conf, extensions.conf, sip.conf) are found in the /etc/asterisk directory after installation .

For httpd.conf, you will need to select a port for both TLS and HTTP.  You will also need a valid SSL certificate. I am using one from Letsencrypt.org. In the example below I am using port 7070 for HTTP and 7079 for TLS.

For sip.conf , you need to specify the parameters for the phone (I am using extension 5099):

Note that WebRTC will be using the websocket protocol for communications to the Asterisk server.

In extensions.conf is where you specify the context and dialing plan so that the WebRTC enabled phone can make and receive calls:

Note: The dialing plan is where security is very important because it specifies who the  ‘phone/user’ is allowed to dial  and also what is allowed to call it.

Once Asterisk has been configured, the WebRTC code can be  accessed to try a call.  To implement the SIP and WebRTC protocols I have chosen to use the JSSIP Javascript library code (HERE).

Download  the JSSIP library and  place it (jssip.min.js) in the same Web directory as the two other files (index.html and sip.js) show below.

Here is the index.html page to enable the phone:

Here is the main Javascript code (sip.js):

Make sure to change the domain name and port to match what is configured in Asterisk. Then navigate to the index.html page and you should see this page:

WebRTC Phone Calls via Asterisk






Then put in the phone number and password  for the WebRTC phone and click Register. If all goes well, the Register button will change to ‘Registered’. Your WebRTC phone is now ready to answer or make calls.

Put in an extension to call and click the Call button. The Call button will change to match the state of the call. Any incoming calls will automatically be answered and the Call button will be updated to the state of the call. Note: WebRTC (the browser) will ask permission to use the microphone when the fist call is made or answered.

Note that diagnostic messages are logged to the web console. Un-commenting the JsSIP debug.enable in sip.js will also show a lot of interesting debug information for those curious as to what is happening behind the scenes.

Leave a Reply

Your email address will not be published.