The Browser as a Telephone

There is a new revolution brewing in internet communication, and while it isn’t likely to make the news the way the open source telecom revolution did, it very definitely has the potential to quietly replace the heart of every current communication application.

Today, the internet offers a profusion of closed source conferencing applications. They all do roughly the same thing, and yet most require proprietary software to be installed before you can use them (which of course will helpfully attempt to remain loaded in the memory of your computer). Each delivers nothing much different than the last conferencing application you were forced to install (for some other meeting you’ve attended). Each of these companies is hoping that it will rise above the others to dominate the space. Meanwhile, WebRTC is quietly creating a standard that compellingly eliminates all concepts of proprietary multimedia communications, which hopefully will eliminate some of this narrow-minded, walled-garden thinking, and open up communications to some actual innovation.

For as long as there have been web browsers, attempts have been made to integrate multimedia into the internet experience. This has proven more difficult than expected, so that today, it is still common for the telephone to be a separate application (or, of course, a separate device altogether).

WebRTC promises to change all that.

In this chapter, we’re going to get you up and running with Asterisk’s interpretation of WebRTC. By no means should this be considered a comprehensive introduction; all we’re going to have time to do is take you through the creation of a bog-standard video conferencing application, which is essentially the “Hello World” application that everyone uses to get started with WebRTC. It’s a great way to kick the tires, but it’s important to understand that WebRTC is going to be so much more.

Preliminary Knowledge

Before diving into WebRTC, there are some underlying technologies that have to come together.

First and foremost: if you’re serious about getting into WebRTC, you will need access to a web developer, and ideally somebody who has a deep knowledge of the various languages, protocols, and technologies that make the internet work. WebRTC is web development, and it is bleeding-edge technology, and you are going to run into incompatibilities, browser-specific issues, undiscovered bugs, incomplete documentation, and other sorts of challenges inherent in new technology. If you are not a full-stack developer with solid networking and Linux skills, you’re going to have a very steep learning curve with WebRTC!

So, yeah, you’ll want to be a full-stack developer, plus a VoIP guru, if you want to comfortably dive into WebRTC. We say this not to scare you off, but rather to assure you that if you find it challenging, it’s not due to any shortcoming on your part, but simply because this is complex, multilayered stuff.

Having said all that, it is possible to get a taste of WebRTC without all of that, and in this chapter we’re going to configure Asterisk to support WebRTC, and run a pre-built web application that will demonstrate the basic audio/video capabilities of Asterisk’s WebRTC implementation. You’re still going to have that steep learning curve, but hopefully we’ve delivered a foundation on which to build.

Configuring Asterisk for WebRTC

To pass calls through Asterisk using WebRTC, the PJSIP channel driver must be used. The configuration will be similar to that of standard SIP telephones, but not identical.

For this we’ll need a transport type, which we’ll add to the /etc/asterisk/pjsip.conf file:

[transport-udp]
type=transport
protocol=udp
bind=0.0.0.0

[transport-tls]
type=transport
protocol=tls
bind=0.0.0.0
cert_file=/home/asterisk/certs/self-signed.crt
priv_key_file=/home/asterisk/certs/self-signed.key

That’s all for editing the config file. For the rest of the PJSIP changes, we’ll be using the database.¹

We’re going to create two new subscribers named WS_PHONE_A and WS_PHONE_B. The WebRTC client will use the credentials for these endpoints to communicate with the PJSIP channel driver in Asterisk (i.e., to make phone calls).

Two records need to be added to the ps_aors table:

INSERT into asterisk.ps_aors 
(id, max_contacts) 
values ('WS_PHONE_A', 5),
       ('WS_PHONE_B', 5)
;

Corresponding ps_auth records are needed:

INSERT into asterisk.ps_auths 
(id, auth_type, password, username) 
values ('WS_PHONE_A','userpass','spiderwrench','WS_PHONE_A'),
       ('WS_PHONE_B','userpass','arachnoratchet','WS_PHONE_B')
;

We then create the endpoints themselves:

INSERT INTO asterisk.ps_endpoints 
 (id,aors,auth,context,
 transport,dtls_auto_generate_cert,webrtc,disallow,allow)
VALUES 
 ('WS_PHONE_A','WS_PHONE_A','WS_PHONE_A','sets',
  'transport-tls','yes','yes','all','vp8,opus,ulaw'),
 ('WS_PHONE_B','WS_PHONE_B','WS_PHONE_B','sets',
 'transport-tls','yes','yes','all','vp8,opus,ulaw');

In Chapter 4 we already generated our certificates, so we should be able to use them here as well.

$ ls -l /home/asterisk/certs/

That should take care of the channel configuration for our WebRTC example.

We’ll now need to configure Asterisk’s web server to handle HTTPS.

$ sudo vim /etc/asterisk/http.conf

[general]
enabled=yes
bindaddr=0.0.0.0
bindport=8088
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/home/asterisk/certs/self-signed.crt
tlsprivatekey=/home/asterisk/certs/self-signed.key

Save and restart Asterisk.

$ sudo service asterisk restart

Verify that Asterisk is now running not just an HTTP server, but also HTTPS:

*CLI> http show status

HTTP Server Status:
Server Enabled and Bound to 0.0.0.0:8088
HTTPS Server Enabled and Bound to 0.0.0.0:8089

Enabled URI's:
/ws => Asterisk HTTP WebSocket

You’re looking in the output for HTTPS to verify that the certificates are working, and you also want to see /ws as that indicates the WebSockets components have loaded.

$ sudo grep sealert /var/log/messages

The firewall isn’t currently configured for those ports, so we’ll need to add a few rules to handle that:

$ sudo firewall-cmd --zone=public --add-port=8088/tcp
$ sudo firewall-cmd --zone=public --add-port=8088/tcp --permanent
$ sudo firewall-cmd --zone=public --add-port=8089/tcp
$ sudo firewall-cmd --zone=public --add-port=8089/tcp --permanent
$ sudo firewall-cmd --zone=public --add-port=5061/udp
$ sudo firewall-cmd --zone=public --add-port=5061/udp --permanent

At this point you need to fire up your web browser and make a connection. Your browser will complain about the connection if you are using a self-signed certificate, but it will allow you to make the connection. This is a critical step, as you need to tell your browser to store the certificate permanently, so that WebRTC can use the WebSocket connection. The following URL will connect you:

https://ip-of-asterisk-server:8089/ws

If you get to an Upgrade Required message, that’s a good thing. It means that the connection is good, and that’s just the protocol telling you there’s not enough technology being served up for this to be an actual WebSocket connection. We’re where we need to be.

Of course the next thing is to actually experience a WebRTC session through this environment we’ve configured, and in order to test all this out, we’re going to need to fire up our browser and load some sort of WebRTC client into it. The next section will do just that.

Cyber Mega Phone

In order to see WebRTC in action on your Asterisk system, you’ll need something running on your browser. The easiest way to see this in action is to take Digium’s Cyber Mega Phone for a spin. This will allow you to quickly set up a working WebRTC session using Asterisk.

First up, since WebRTC requires the use of TLS (it’s not optional, as it is with SIP), we’re going to nag you one more time to verify that your certificates are installed. If you haven’t yet done so, now is the time to work through Chapter 4, or there is also a script provided as part of the Asterisk source code that will generate the keys and certificates (you’ll find it in the Asterisk source code under the /home/astmin/src/asterisk-16.<TAB>/contrib/scripts/ folder. The script is named ast_tls_cert, and it is documented on the Asterisk wiki.

OK, now we need a tiny bit of dialplan for our WebRTC calls to arrive at:

$ vim /etc/asterisk/extensions.conf

exten => 246,1,Noop()
  same => n,Answer()
  same => n,Wait(0.5)
  same => n,StreamEcho(4)
  same => n,Hangup()

The Cyber Mega Phone itself is found at GitHub, under the Asterisk account.

You can download the code and run it from your local PC, or you can load it into a web server and serve it from there.

Let’s serve it up from our Asterisk server:

$ cd /var/lib/asterisk/static-http

$ sudo git clone https://github.com/asterisk/cyber_mega_phone_2k.git

$ sudo chown -R asterisk:asterisk cyber_mega_phone_2k ; sudo chmod 755 cyber_mega_phone_2k

We’ll need a small change to the configuration of Asterisk’s HTTP server to allow it to serve static content.

$ sudo vim /etc/asterisk/http.conf 

[general]
enabled=yes
bindaddr=0.0.0.0
bindport=8088
tlsenable=yes
tlsbindaddr=0.0.0.0:8089
tlscertfile=/home/asterisk/certs/asterisk.crt
tlsprivatekey=/home/asterisk/certs/asterisk.key
enablestatic=yes
redirect=/cmp2k /static/cyber_mega_phone_2k/index.html

Save and reload the http module from your Asterisk console:

*CLI> module reload http

Now, using your browser, you can navigate over to your new WebRTC client app:

https://your asterisk server:8089/cmp2k

If all went as planned, you should see something like Figure 20-1.

Figure 20-1. Cyber Mega Phone 2K

Press the Account button, and input the credentials for your WebRTC user (see Figure 20-2).

Figure 20-2. WebRTC account credentials

Once you’ve input the details relevant to your system, press X to save and close.

Now, you can press the Connect button, and if all went well your WebRTC client should register to Asterisk (this would be a good time to monitor the Asterisk console to see what’s happening and whether there are any errors).

If you press the Call button now, you should end up connected via WebRTC, and you’ll see two windows (Figure 20-3). One of them is your local video, and the other is reflected back from the far end (i.e., it is simulating another user by echoing back what you sent). If all your audio is working too, you might even get some feedback noise!

Figure 20-3. Echo application with video

You see that there is a Remote Video window alongside the Local Video window. We haven’t achieved much to brag about, perhaps, but your Asterisk system is handling WebRTC, so smile and take a break. You’ve earned it.

More About WebRTC

The WebRTC ecosystem is rapidly evolving, and what is true as of this writing may not be true in the near future. We have found the following resources to be very helpful:

• Tsahi Levant-Levi is involved in many different WebRTC initiatives, and he generously shares knowledge relating to how to learn WebRTC. Check out his bloggeek.me website. Follow him.

• A group of folks under the Kranky Geek handle produced some WebRTC conferences, and shared many useful videos on YouTube. The YouTube channel Kranky Geek is where you’ll find them.

• Get familiar with the various signaling protocols that are popular with WebRTC: SIP, VIRTO (from the FreeSwitch project), XMPP, and even JSON.

• Look up various WebRTC signaling libraries. Currently, the popular ones include: sipML5 (arguably the very first WebRTC library) and JsSIP (plus a fork of JsSIP named SIP.js).

• webrtc.org is the official home of WebRTC, and certainly deserves some of your time. Check out the Getting Started page.

• O’Reilly’s online learning platform has a few videos that are worth a watch. For any books and videos, keep an eye on the publish date, since anything older than a year or two is likely to be out of date—WebRTC is still under rapid development.

There is so much more to learn, but we’re out of pages here.

Conclusion

WebRTC is exciting and important, and it’s very likely that VoIP developers and integrators are going to need to be familiar with this technology if they are to keep their skill sets relevant. As of this writing, WebRTC is still very much a work in progress. As with any exploration of new frontiers, those who blaze a trail must be creative, persistent, optimistic, and tough.

Asterisk could be a useful component in a future-ready VoIP environment, serving at least as a bridge between next-generation WebRTC products and old-school telecommunications.