Plivo webRTC phone

Simple softphone made with Plivo's webRTC browser SDK. Calls can be made to PSTN numbers and SIP addresses.

Two ways to make a call

1. Call via the browser (uses OPUS Codec)

2. Click-to-call

   User enters their phone number in the settings. When a call is placed, the user's handset will be called first and then the call will be connected to the destination #

Deploying the application

git clone https://github.com/seanmiller802/webRTC-phone.git

cd webRTC-phone

npm install 

npm run start

Application setup

Some initial setup is required before using this application (< 10 minutes). Let's get started!

1. Register for a Plivo account here https://console.plivo.com/accounts/register/

2. Create a PHLO. This will handle all of the call logic behind the scenes once a call is initiated.

See Creating a PHLO below

3. Create a new Plivo application and assign it to our PHLO.

4. Create a new Plivo endpoint and assign it to the application created in Step 3. (Note: your endpoint username and password will be used for signing in)

5. Purchase a new Plivo phone number and assign this to our application.

Creating a PHLO

PHLO stands for Plivo High Level Objects. This product was built with the goal of reducing Voice and SMS application development time from weeks to minutes. The drag & drop UI allows both developers and non-technical people to quickly build and test apps without writing any code or managing a server. In the future this product will have full parity with our developer APIs.

How this PHLO works:

Every PHLO begins with a start node that can be triggered by an HTTP request or an incoming call (incoming SMS if it is an SMS PHLO). Since our phone can make calls in more than one way, we'll utilize both trigger events here.

Let's start with an incoming call.

When the phone is configured to make calls from the browser, all we have to do is use the browser SDK's call() method to initiate a call from our application endpoint to our destination #. In this case our PHLO is the endpoint, so our outbound call is actually treated as an inbound call to our PHLO. Once we hit the endpoint we just forward the call to our destination number.

our code should look like this:

  const customCallerId = 14154830302;
  const extraHeaders = {'X-PH-Test1': 'test1', 'X-PH-callerId': customCallerId};
  this.plivoBrowserSdk.client.call(dest, extraHeaders);

Now for the click-to-call. This is is a slightly more complicated use case because it requires us to actually send an HTTP request with a payload to our PHLO endpoint. Remember that we will be making a call to our user's handset first, and then connecting to the destination once the first call is answered. We'll need to get both phone numbers from our application and send it to our server. Our code should look something like this:

let XMLReq = new XMLHttpRequest();
XMLReq.open("POST", "/makeCall");
XMLReq.setRequestHeader("Content-Type", "application/json");
XMLReq.onreadystatechange = function() {
     console.log('response text', XMLReq.responseText);
}
XMLReq.send(JSON.stringify({"src": this.state.phoneMeNumber, "dst": dest}));

We'll need to listen for this request on our server. Once we receive this request and get the numbers from the payload, we will set up another HTTP request that sends this data to our PHLO. Here's our code:

// when we receive an http post request
app.post('/makeCall/', function(req, res) {
  console.log(req.fields);

  jsonObject = JSON.stringify({
      "phoneMeNumber"     : req.fields.src,
      "destinationNumber" : req.fields.dst,
  });

  // prepare the header
  let postHeaders = {
    'Content-Type' : 'application/json',
    "Authorization": "Basic " + btoa("AuthID:AuthToken")
  };

  // set the post options
  let postOptions = {
    port   : 443,
    host   : 'phlo-runner-service.plivo.com',
    path   : '/account/MAMMJLN2YWZJFMMME5YZ/phlo/cc636f87-4212-46a9-b7a6-fc540aed1a8e', // our PHLO endpoint
    method : 'POST',
    headers: postHeaders,
  };

  // do the POST request
  let reqPost = https.request(postOptions, function(response) {
    console.log("statusCode: ", response.statusCode);
    response.on('data', function(d) {
      console.info('POST result:\n');
      process.stdout.write(d);
      console.info('\n\nPOST completed');
      res.send(d);
    });
  });

  // write the json data
  console.log(jsonObject);
  reqPost.write(jsonObject);
  reqPost.end();
  reqPost.on('error', function(e) {  // log any errors
    console.error(e);
  });
})

We should now have access to both numbers when our PHLO receives the HTTP request. We can use these numbers to control our call. Refer to the two GIFs below to see how to create a new PHLO and set up our call flows.

Basic Authentication

You will need to provide your Plivo Auth ID and Auth Token in /server/index.js in the HTTP request headers. Store these as environment variable

  let postHeaders = {
    'Content-Type' : 'application/json',
    "Authorization": "Basic " + btoa("process.env.AuthID:process.env.AuthToken")
  };
  

Features

• Make calls (Browser, Click-to-call)
• Receive calls
• Log calls
• Live call quality metrics (displayed in real time during network events during the call)
• Send feedback to Plivo

Built With

• React - Javascript framework for building UIs
• Material-UI - React components that implement Google's material design standards
• Plivo - Making and receiving calls

Authors

• Sean Miller - Initial work - seanmiller802

License

This project is licensed under the MIT License - see the LICENSE.txt file for details

Acknowledgments

• Joe Leaver - Mentor - joeleaver
• The entire team at Plivo, Inc.