Creating a WebRTC App With Typescript and Bandwidth

02 Aug

Bandwidth has the most robust communication APIs available for large scale voice and messaging applications. This is a tutorial on building a small WebRTC application using Node and Typescript in the backend and simple Javascript in the front.

blog-btn-bw-signupblog-btn-pricingblog-btn-githubblog-btn-deploy-heroku

Technologies used

ScreenShot

Why Typescript

Instead of typing out our reasonings for using typescript, I’ll refer you to Victor Savkin’s excellent Blog Post detailing many reasons why Angular 2 uses Typescript.

Application Overview

This app touches on:
* Ordering Phone Numbers
* Creating Bandwidth Application and setting callbacks
* Creating Bandwidth SIP Domain
* Creating Bandwidth SIP Endpoint
* Audio Playback
* Call Recording
* Call Recording Fetch
* Incoming Call Handling
* Outbound SIP Call Handling

Creating Bandwidth Application

The Bandwidth Application is a resource used to keep track of callback urls for batches of phone numbers. As part of the ‘one click deploy’ we create the Bandwidth application on first visit and appropriately set the callback url.

Searching and ordering phone number

As part of new user creation, the user requests a phone number in a certain area code.

Step 1

Creating the SIP Domain and Endpoints

Bandwidth has it’s own SIP registrar. In order to connect use web voice, each account must create a domain. Once the domain has been created, as many endpoints can be created on the domain. Each time a user registers, a new endpoint is created for the user.

Create new domain

Create endpoint for users

Each endpoint needs to use the applicationId set above to ensure any events are sent to your server.

Handling Callbacks Events

Each Callback event is routed to the backend server and must be handled.

Handling Incoming Call

Both calls FROM the SIP Endpoint AND calls from the telephone network appear to the server as incoming calls. It’s important to check the from value in the incoming call payload to see if it’s from the SIP Endpoint.

From SIP Endpoint

If the call is FROM the sip endpoint, we can simply use the transfer function to send the call the telephone network

From telephone network

In order to preserve the caller ID, the first call must first be put into a bridge . Then the call to the SIP Endpoint can be created with the bridgeID and the original caller ID.

WebRTC and Bandwidth

Works on:
* Firefox
* Chrome
* Opera

For full support check iswebrtcreadyyet.com

Full docs are here

CDN hosted library:
* minified
* not-minified
* JSFIDDLE Demo Client

Creating Outbound Call

Inbound Call

Further Reading

blog-btn-bw-signupblog-btn-pricingblog-btn-githubblog-btn-deploy-heroku

Tags:
,
Dan Tolbert
Dan Tolbert
dtolbert@bandwidth.com

Computer Nerd. Beer Snob. Music Enthusiast. Idea Machine. Developer Evangelist for Bandwidth.com. Telecommunications Expert.

No Comments

Post A Comment