WebRTC has growing applications by the day, but some may argue that it’s limited by its domain: the web. The world’s cellular network is more expansive and accessible than the web. Is it possible to connect the two for a true 100% coverage solution? The answer is yes, and you can employ it today using OpenTok’s SIP interconnect API and Nexmo.

Laying the groundwork

There are many applications for having an SIP protocol in place before, during, or after a WebRTC call. One of the most apparent and widely-seen applications is the ability to join a WebRTC call by phone by using a dial-in or dial-out feature. Let’s say you need to make a call, but for whatever reason, you don’t have access to a stable internet connection, so you’d rather connect to the call’s audio using your phone. 

We’ll build an app that allows you to enter a request to be called back in order to join the call via audio.

Setting up

Luckily, OpenTok has a demo ready for us to clone. We just have to configure and run it. First, clone the repo into your desired directory.

Now create a config.js file in the root directory.

Copy this code into your config file:

You will need to create a Tokbox account to obtain the Tokbox API key and secret and a Nexmo account to obtain the Nexmo API key and secret. You will also need to register a number with Nexmo to make and receive calls. Connect this number with your Nexmo Voice Application and fill in the config file with the remaining information. Leave the server URL for now.

Running the app

Running the app is not as straightforward. Nexmo requires webhooks to communicate with your server about key events that take place in the app. Because of this, you need to either have (1) a DHCP server connected with a DNS name lookup that binds an address to your server or (2) a reverse proxy software like ngrok that allows you to create secure tunnels through any NAT or firewall with a public URL. To get started, download and run ngrok as specified on their website.

Now run ngrok on port 3000 and copy the public URL.

Paste the public URL into (1) the server URL key in your config file and (2) your Nexmo phone number’s webhook URLs in the Nexmo configuration page.

Make sure the Nexmo phone number you created is linked to the application:

You’re all set! Now run “npm start,” head over to localhost:3000, and try dialing in to or out of the WebRTC call.

Conclusion

Connecting SIP with WebRTC makes technologies with WebRTC more accessible, and there are countless applications for this! You could play games via text, see your doctor, and talk to a group of friends all while waiting for roadside assistance in the middle of Nevada. Check this functionality out to see what you can do with it.