Leading Blockchain Development Company

Web-to-Phone System Using Asterisk

Asterisk is a powerful open-source platform that enables developers to create voice applications such as VoIP systems, conference bridges, and call centers. In this tutorial, we’ll guide you through building a web-to-phone solution using Asterisk. This system allows users to make phone calls directly from a web interface. Prerequisites Before we begin, make sure you […]

Prerequisites
Step 1: Install Asterisk
1. Update Your Server
2. Install Dependencies
3. Download and Install Asterisk
Step 2: Configure Asterisk for WebRTC
1. Enable SIP in sip.conf
2. Generate SSL Certificates
Step 3: Create Dial Plan in extensions.conf
Step 4: Set Up a Web Client
1. Include SIP.js in Your HTML
Step 5: Configure Asterisk for WebSockets
Step 6: Test the Web-to-Phone System
Advanced Tips
Conclusion

Asterisk is a powerful open-source platform that enables developers to create voice applications such as VoIP systems, conference bridges, and call centers. In this tutorial, we’ll guide you through building a web-to-phone solution using Asterisk. This system allows users to make phone calls directly from a web interface.

Prerequisites

Before we begin, make sure you have the following:

Asterisk installed on a Linux server (e.g., Ubuntu 20.04 or CentOS).
Basic understanding of SIP (Session Initiation Protocol) and VoIP.
A public IP address for your Asterisk server.
A domain or subdomain pointed to your server (optional but recommended for SSL).
WebSocket-enabled SIP library for the web client (e.g., SIP.js).

Step 1: Install Asterisk

If Asterisk is not already installed on your server, follow these steps:

1. Update Your Server

sudo apt update && sudo apt upgrade -y

2. Install Dependencies

sudo apt install wget build-essential subversion libjansson-dev libxml2-dev libncurses5-dev

3. Download and Install Asterisk

cd /usr/src
sudo wget http://downloads.asterisk.org/pub/telephony/asterisk/asterisk-20-current.tar.gz
sudo tar -zxvf asterisk-20-current.tar.gz
cd asterisk-20*/
sudo ./configure
sudo make
sudo make install
sudo make samples
sudo make config
sudo systemctl start asterisk
sudo systemctl enable asterisk

Check the installation:

sudo asterisk -rvv

Step 2: Configure Asterisk for WebRTC

WebRTC is essential for enabling web-to-phone communication.

1. Enable SIP in `sip.conf`

Edit the SIP configuration file:

sudo nano /etc/asterisk/sip.conf

Add the following:

[general]
context=default
udpbindaddr=0.0.0.0
tcpenable=yes
tcpbindaddr=0.0.0.0
transport=udp,tcp,ws,wss

[webrtc_client]
type=friend
host=dynamic
secret=your_password
context=from-internal
encryption=yes
avpf=yes
force_avp=yes
dtlsenable=yes
dtlsverify=fingerprint
dtlsrekey=60
dtlscertfile=/etc/asterisk/keys/asterisk.pem
dtlsprivatekey=/etc/asterisk/keys/asterisk.pem
dtlssetup=actpass

2. Generate SSL Certificates

Install OpenSSL and generate certificates for DTLS (required for WebRTC):

sudo mkdir /etc/asterisk/keys
cd /etc/asterisk/keys
sudo openssl genrsa -out asterisk.key 2048
sudo openssl req -new -x509 -key asterisk.key -out asterisk.crt -days 365
sudo cat asterisk.crt asterisk.key > asterisk.pem

Step 3: Create Dial Plan in `extensions.conf`

Edit the dial plan file:

bashCopy codesudo nano /etc/asterisk/extensions.conf

Add a simple plan to route calls:

[from-internal]
exten => _X.,1,Dial(SIP/${EXTEN}@your_sip_provider)
exten => _X.,n,Hangup

Replace your_sip_provider with your VoIP provider’s SIP trunk name.

Step 4: Set Up a Web Client

Use a WebRTC-compatible library like SIP.js to create a web interface.

1. Include SIP.js in Your HTML

<!DOCTYPE html>
<html>
<head>
    <title>Web to Phone</title>
    <script src="https://sipjs.com/releases/0.15.10/sip.min.js"></script>
</head>
<body>
    <h1>Web-to-Phone</h1>
    <input type="text" id="phone-number" placeholder="Enter Phone Number">
    <button id="call-btn">Call</button>

    <script>
        const userAgent = new SIP.UserAgent({
            uri: 'sip:webrtc_client@your-server-ip',
            transportOptions: {
                wsServers: 'wss://your-server-ip:8089/ws'
            },
            authorizationUsername: 'webrtc_client',
            authorizationPassword: 'your_password'
        });

        userAgent.start();

        document.getElementById('call-btn').addEventListener('click', () => {
            const phoneNumber = document.getElementById('phone-number').value;
            userAgent.invite('sip:' + phoneNumber + '@your-server-ip');
        });
    </script>
</body>
</html>

Replace your-server-ip with your public server IP or domain.

Step 5: Configure Asterisk for WebSockets

Edit the http.conf file to enable the Asterisk WebSocket server:

bashCopy codesudo nano /etc/asterisk/http.conf

Add the following:

[general]
enabled=yes
bindaddr=0.0.0.0
bindport=8089
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/etc/asterisk/keys/asterisk.pem
tlsprivatekey=/etc/asterisk/keys/asterisk.pem

Restart Asterisk:

sudo systemctl restart asterisk

Step 6: Test the Web-to-Phone System

Start your web server (e.g., with Python):bashCopy codepython3 -m http.server
Open the HTML file in a browser.
Enter a phone number and press “Call.”
Check Asterisk logs for call progress:bashCopy codesudo asterisk -rvv

Advanced Tips

Secure WebSocket: Use HTTPS with WebSocket for secure communication.
Call Logging: Use Asterisk’s built-in CDR feature to log call details.
UI Enhancements: Add call status, end call buttons, and error handling in the web interface.

Conclusion

Asterisk, combined with WebRTC, is a powerful tool for creating a web-to-phone system. By following the steps outlined in this blog, you can set up a basic solution that bridges web interfaces and traditional phone systems.

Feel free to expand on this by integrating features like voicemail, IVR, or SMS.

Happy coding!

Web-to-Phone System Using Asterisk

Table of Contents

Prerequisites

Step 1: Install Asterisk

1. Update Your Server

2. Install Dependencies

3. Download and Install Asterisk

Step 2: Configure Asterisk for WebRTC

1. Enable SIP in `sip.conf`

2. Generate SSL Certificates

Step 3: Create Dial Plan in `extensions.conf`

Step 4: Set Up a Web Client

1. Include SIP.js in Your HTML

Step 5: Configure Asterisk for WebSockets

Step 6: Test the Web-to-Phone System

Advanced Tips

Conclusion

Get in touch!

Web-to-Phone System Using Asterisk

Table of Contents

Prerequisites

Step 1: Install Asterisk

1. Update Your Server

2. Install Dependencies

3. Download and Install Asterisk

Step 2: Configure Asterisk for WebRTC

1. Enable SIP in sip.conf

2. Generate SSL Certificates

Step 3: Create Dial Plan in extensions.conf

Step 4: Set Up a Web Client

1. Include SIP.js in Your HTML

Step 5: Configure Asterisk for WebSockets

Step 6: Test the Web-to-Phone System

Advanced Tips

Conclusion

Get in touch!

1. Enable SIP in `sip.conf`

Step 3: Create Dial Plan in `extensions.conf`