Warning: make sure that you have read through the Plivo Web SDK Quick-Start Guide and have all of the Pre-requisites before you start this tutorial.

Make an Outgoing Call

In this tutorial you will learn how to:

  • Make a Call With a Browser to a Phone Number: this tutorial will show you how to build a app that enables your browser to act like a phone and make calls to mobile phones, landlines, or SIP-enabled devices including softphones.
  • Make a Call With a Browser to a SIP Endpoint: follow this tutorial to build a browser-based app that allows users to make phone calls without needing to use the same browser, telecom software, or plugins.
  • Note: Plivo's web SDK supports most modern browsers. Even if the browser does not support HTML5, it will automatically fallback to Flash with full functionality.
  • Hangup the Call: this tutorial identifies the code snippets that are responsible for hanging up calls made by your web app.
  • Destination Input Methods: Plivo's web SDK can build many powerful applications by modifying just a few elements. This tutorial will teach you how to create different methods of inputting the destination phone number.
    • Manually Input Destination Phone Numbers: this tutorial is useful for building web applications that require your user to make calls by entering their own destination phone number. Use cases include: conference apps, CRM systems, help desks, call centers, etc.
    • Pre-program Destination Phone Numbers (Click-to-call): this tutorial shows you how to create buttons that can make calls to pre-programmed phone numbers with a single click. Use cases include: call tracking, sales phone lines, support help desks, etc.

Make a Call With a Browser to a Phone Number

Let’s assume that your web server is located at www.example.com. Below are the steps and the code snippet to set up a route on your webserver. We will name this app make_outgoing. When you make an HTTP request to www.example.com/make_outgoing (i.e., www.example.com/make_outgoing.php for PHP), the route will be invoked. Afterwards, you will be able to initiate a call to your destination by loading the same URL into a browser.

Plivo Create Direct Dial Application

Step 1: Create a Plivo Application

First, we must configure the Plivo application and link it to the direct-dial app that you set up during the Web SDK Quick Start Guide. If you're using the default "Direct Dial" app that's provided in your Plivo account, you may skip this step and go directly to "Create a SIP Endpoint". If you've set up a route on your own web server, then follow the steps below to configure your Plivo application:

  1. Create a Plivo Application by visiting the Application Page in your Plivo GUI and click on New Application or by using Plivo's Application API.
  2. Give your application a name.
  3. Enter your server URL with your caller ID appended (e.g., http://www.example.com/direct-dial/?DialMusic=real&CLID=14152223333) in the Answer URL and Hangup URL fields.
  4. Set both methods as POST.
  5. Click on Create to save your application.
  6. Advanced Hack: you can also create, edit, and delete Plivo Applications through the Application API.
Plivo Create Direct Dial Application

Step 2: Create a SIP Endpoint

  1. Create a Plivo SIP Endpoint by visiting the Endpoint Page in your Plivo GUI and click on New Endpoint or by using Plivo's Endpoint API.
  2. Choose a username, password, and alias for your SIP endpoint. You will use the username and password to login to the webapp that you will build in the following steps.
  3. Link this SIP Endpoint to your server application by selecting it in the Application drop down. Select Direct Dial if you're using the default Plivo application. Or select the name of the application you set up in the first step (i.e., Create an Application section) of this tutorial.
Plivo Create SIP Endpoint

Step 3: Understanding the Code

Before we start building, let's first understand what the code is doing. We will provide the entire code in the Build the App section below.

To simplify things, here are the lines of code responsible for making the call. We've commented in on the functionalities of each line:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
if ($('#make_call').text() == "Call") { 
# make_call is the id of the Call button on the app webpage you will build. The value is initially set to "Call"
    var dest = $("#to").val(); 
    # the value of the text box in which the phone number is entered
    if (isNotEmpty(dest)) { 
    # checks if the destination number (i.e., dest) is not empty
        $('#status_txt').text('Calling..'); 
        # the status is changed to "Calling" if the above logic is satisfied
        Plivo.conn.call(dest); 
        # the call is placed to the destination number
        $('#make_call').text('End'); 
        # if the call is answered the call button (make_call) value is changed to "End"
    }else{
        $('#status_txt').text('Invalid Destination'); 
        # if the destination number is empty, then the status is changed to "Invalid Destination"
    }
}

Step 4: Build the App

Select the language you would like to use for your app.


Download the asset files
To build the web app, we first need all the static assets that will be supporting your web app (e.g., CSS, JavaScript, images, etc).
1. Create a "static" folder in the root directory of your app. 2. Download assets.zip and save it in the "static" folder that you just created (e.g., the location of the jquery.js file will be "static/jquery.js"). See line 7 of the make_outgoing.html file below for reference.
3. Serve up the asset files either directly through the web server or by using a content delivery network (CDN).

Create the calling app in Python
The code below will help to set up a route on your webserver.
1. Copy the code below into a text file and save it as make_outgoing.py.
2. Replace Your SIP Endpoint Username and Your SIP Endpoint Password with your SIP Endpoint credentials created in the previous step.
3. Next, we will render the HTML file of this app.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import plivo, plivoxml
from flask import Flask, render_template

app = Flask(__name__)

@app.route('/make_outgoing', methods=['GET','POST'])
def make_outgoing():

    username = "Your SIP Endpoint Username"
    password = "Your SIP Endpoint Password"
    # Render the html file
    return render_template('make_outgoing.html', username=username, password=password)

if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)


Render the HTML file
Assuming that your web server is located at www.example.com, the following HTML file will be rendered when we send an HTTP request to www.example.com/make_outgoing.
1. Create a folder called templates in the same path. For example, if make_outgoing.py was saved in the folder /documents/websdkapp/ then the new folder would be /documents/websdkapp/templates.
2. Copy the code below into a text file, name it as make_outgoing.html and save it in your new templates folder.
3. Make an HTTP request to www.example.com/make_outgoing. This will instruct the make_outgoing.py app to render the make_outgoing.html file.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Plivo Webphone Demo</title>
        <meta name="description" content="">
        <script language="javascript" content-type="text/javascript" src="static/jquery.js"></script>
        <script type="text/javascript" src="http://s3.amazonaws.com/plivosdk/web/plivo.min.js"></script>
        <link href="static/bootstrap-combined.min.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .container-narrow {
                margin: 0 auto;
                max-width: 700px;
            }
            .container-narrow > hr {
                margin: 30px 0;
            }
            #btn-container a{
                margin-top:7px;
                min-width:7px;
            }
        </style>
        <script type="text/javascript">
            // Make outgoing calls
            function call() {
                if ($('#make_call').text() == "Call") {
                    // The destination phone number to connect the call to
                    var dest = $("#to").val();
                    if (isNotEmpty(dest)) {
                        $('#status_txt').text('Calling..');
                        // Connect the call
                        Plivo.conn.call(dest);
                        $('#make_call').text('End');
                    }
                    else{
                        $('#status_txt').text('Invalid Destination');
                    }
                }
                else if($('#make_call').text() == "End") {
                    $('#status_txt').text('Ending..');
                    // Hang up the call
                    Plivo.conn.hangup();
                    $('#make_call').text('Call');
                    $('#status_txt').text('Ready');
                }
            }
            // Login with SIP Endpoint
            function login() {
                // SIP Endpoint username and password
                var username = '{{username}}';
                var password = '{{password}}';
                // Login
                Plivo.conn.login(username, password);
            }
            function logout() {
                $('#status_txt').text('Logged out');
                Plivo.conn.logout();
            }
            function isNotEmpty(n) {
                return n.length > 0;
            }
            function onCalling() {
                console.log("onCalling");
                $('#status_txt').text('Connecting....');
            }
            function  onMediaPermission (result) {
                if (result) {
                    console.log("get media permission");
                } else {
                    alert("you don't allow media permission, you will can't make a call until you allow it");
                }
            }
            function webrtcNotSupportedAlert() {
                $('#txtStatus').text("");
                alert("Your browser doesn't support WebRTC. You need Chrome 25 to use this demo");
            }
            function onLogin() {
                $('#status_txt').text('Logged in');
                $('#logout_box').show();
            }
            function onLoginFailed() {
                $('#status_txt').text("Login Failed");
            }
            function onCallRemoteRinging() {
                $('#status_txt').text('Ringing..');
            }
            function onCallAnswered() {
                console.log('onCallAnswered');
                $('#status_txt').text('Call Answered');
            }
            function onReady() {
                console.log("onReady...");
            }
            // Initialization 
            $(document).ready(function() {
                Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert;
                Plivo.onReady = onReady;
                Plivo.onLogin = onLogin;
                Plivo.onLoginFailed = onLoginFailed;
                Plivo.onCalling = onCalling;
                Plivo.onCallRemoteRinging = onCallRemoteRinging;
                Plivo.onCallAnswered = onCallAnswered;
                Plivo.onMediaPermission = onMediaPermission;
                Plivo.init();
            });
        </script>
    </head>
    <body>
        <div class="container-narrow">
            <div class="masthead">
                <img class="muted" src="static/logo.png">
            </div>
            <div class="row-fluid marketing">
                <div class="span12">
                    <h4>Plivo WebSDK Webphone Demo</h4>
                    <div id="logout_box" style="display: none">
                        <input class="btn" type="button" id="btn_logout" onclick="logout()" value="Logout">
                    </div>
                    <br>
                    <span class="label" id="status_txt">Login</span><br/><br/>
                    <form id="callcontainer" style="">
                        <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
                        <br/>
                        <a href="#" onclick="login();">Login</a>
                        <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


Download the asset files
To build the web app, we first need all the static assets that will be supporting your web app (e.g., CSS, JavaScript, images, etc).
1. Create a "public" folder in the root directory of your app. 2. Download assets.zip and save it in the "public" folder that you just created (e.g., the location of the jquery.js file will be "public/jquery.js"). Any assets under public will be served automatically as static files by the application or web server. See line 7 of the make_outgoing.erb file below for reference.
3. Serve up the asset files either directly through the web server or by using a content delivery network (CDN).

Create the calling app in Ruby
The code below will help to set up a route on your webserver.
1. Copy the code below into a text file and save it as make_outgoing.rb.
2. Replace Your SIP Endpoint Username and Your SIP Endpoint Password with your SIP Endpoint credentials created in the previous step.
3. Next, we will render the HTML file of this app.

1
2
3
4
5
6
7
8
9
require 'sinatra'
require 'rubygems'

get '/make_outgoing' do
    username = "Your SIP Endpoint Username"
    password = "Your SIP Endpoint Password"
    # Render the erb file
    erb :make_outgoing, :locals => {:username => username, :password => password}
end


Render the HTML file
Assuming that your web server is located at www.example.com, the following Embedded Ruby (i.e., .erb) file will be rendered when we send an HTTP request to www.example.com/make_outgoing.
1. Create a folder called views in the same path. For example, if make_outgoing.rb was saved in the folder /documents/websdkapp/ then the new folder would be /documents/websdkapp/views.
2. Copy the code below into a text file, name it as make_outgoing.erb and save it in your new views folder.
3. Make an HTTP request to www.example.com/make_outgoing. This will instruct the make_outgoing.rb app to render the make_outgoing.erb file.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Plivo Webphone Demo</title>
        <meta name="description" content="">
        <script language="javascript" content-type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="http://s3.amazonaws.com/plivosdk/web/plivo.min.js"></script>
        <link href="bootstrap-combined.min.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .container-narrow {
                margin: 0 auto;
                max-width: 700px;
            }
            .container-narrow > hr {
                margin: 30px 0;
            }
            #btn-container a{
                margin-top:7px;
                min-width:7px;
            }
        </style>
        <script type="text/javascript">
            // Make outgoing calls
            function call() {
                if ($('#make_call').text() == "Call") {
                    // The destination phone number to connect the call to
                    var dest = $("#to").val();
                    if (isNotEmpty(dest)) {
                        $('#status_txt').text('Calling..');
                        // Connect the call
                        Plivo.conn.call(dest);
                        $('#make_call').text('End');
                    }
                    else{
                        $('#status_txt').text('Invalid Destination');
                    }
                }
                else if($('#make_call').text() == "End") {
                    $('#status_txt').text('Ending..');
                    // Hang up the call
                    Plivo.conn.hangup();
                    $('#make_call').text('Call');
                    $('#status_txt').text('Ready');
                }
            }
            // Login with SIP Endpoint
            function login() {
                // SIP Endpoint username and password
                var username = "<%= username %>";
                var password = "<%= password %>";
                // Login
                Plivo.conn.login(username, password);
            }
            function logout() {
                $('#status_txt').text('Logged out');
                Plivo.conn.logout();
            }
            function isNotEmpty(n) {
                return n.length > 0;
            }
            function onCalling() {
                console.log("onCalling");
                $('#status_txt').text('Connecting....');
            }
            function  onMediaPermission (result) {
                if (result) {
                    console.log("get media permission");
                } else {
                    alert("you don't allow media permission, you will can't make a call until you allow it");
                }
            }
            function webrtcNotSupportedAlert() {
                $('#txtStatus').text("");
                alert("Your browser doesn't support WebRTC. You need Chrome 25 to use this demo");
            }
            function onLogin() {
                $('#status_txt').text('Logged in');
                $('#logout_box').show();
            }
            function onLoginFailed() {
                $('#status_txt').text("Login Failed");
            }
            function onCallRemoteRinging() {
                $('#status_txt').text('Ringing..');
            }
            function onCallAnswered() {
                console.log('onCallAnswered');
                $('#status_txt').text('Call Answered');
            }
            function onReady() {
                console.log("onReady...");
            }
            // Initialization 
            $(document).ready(function() {
                Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert;
                Plivo.onReady = onReady;
                Plivo.onLogin = onLogin;
                Plivo.onLoginFailed = onLoginFailed;
                Plivo.onCalling = onCalling;
                Plivo.onCallRemoteRinging = onCallRemoteRinging;
                Plivo.onCallAnswered = onCallAnswered;
                Plivo.onMediaPermission = onMediaPermission;
                Plivo.init();
            });
        </script>
    </head>
    <body>
        <div class="container-narrow">
            <div class="masthead">
                <img class="muted" src="logo.png">
            </div>
            <div class="row-fluid marketing">
                <div class="span12">
                    <h4>Plivo WebSDK Webphone Demo</h4>
                    <div id="logout_box" style="display: none">
                        <input class="btn" type="button" id="btn_logout" onclick="logout()" value="Logout">
                    </div>
                    <br>
                    <span class="label" id="status_txt">Login</span><br/><br/>
                    <form id="callcontainer" style="">
                        <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
                        <br/>
                        <a href="#" onclick="login();">Login</a>
                        <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


Download the asset files
To build the web app, we first need all the static assets that will be supporting your web app (e.g., CSS, JavaScript, images, etc).
1. Create a "static" folder in the root directory of your app. 2. Download assets.zip and save it in the "static" folder that you just created (e.g., the location of the jquery.js file will be "static/jquery.js"). See line 7 of the make_outgoing.php file below for reference.
3. Serve up the asset files either directly through the web server or by using a content delivery network (CDN).

Create the calling app in PHP
The code below will help to set up a route on your webserver.
1. Copy the code below into a text file and save it as make_outgoing.php.
2. Replace Your SIP Endpoint Username and Your SIP Endpoint Password with your SIP Endpoint credentials created in the previous step.
3. Assuming that your web server is located at www.example.com, make an HTTP request to www.example.com/make_outgoing.php to invoke the route.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<?php
$username = "Your SIP Endpoint Username";
$password = "Your SIP Endpoint Password";
?>

<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Plivo Webphone Demo</title>
        <meta name="description" content="">
        <script language="javascript" content-type="text/javascript" src="static/jquery.js"></script>
        <script type="text/javascript" src="http://s3.amazonaws.com/plivosdk/web/plivo.min.js"></script>
        <link href="static/bootstrap-combined.min.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .container-narrow {
                margin: 0 auto;
                max-width: 700px;
            }
            .container-narrow > hr {
                margin: 30px 0;
            }
            #btn-container a{
                margin-top:7px;
                min-width:7px;
            }
        </style>
        <script type="text/javascript">
            // Make outgoing calls
            function call() {
                if ($('#make_call').text() == "Call") {
                    // The destination phone number to connect the call to
                    var dest = $("#to").val();
                    if (isNotEmpty(dest)) {
                        $('#status_txt').text('Calling..');
                        // Connect the call
                        Plivo.conn.call(dest);
                        $('#make_call').text('End');
                    }
                    else{
                        $('#status_txt').text('Invalid Destination');
                    }
                }
                else if($('#make_call').text() == "End") {
                    $('#status_txt').text('Ending..');
                    // Hang up the call
                    Plivo.conn.hangup();
                    $('#make_call').text('Call');
                    $('#status_txt').text('Ready');
                }
            }
            // Login with SIP Endpoint
            function login() {
                // SIP Endpoint username and password
                var username = "<?php echo $username; ?>";
                var password = "<?php echo $password; ?>";
                
                // Login
                Plivo.conn.login(username, password);
            }
            function logout() {
                $('#status_txt').text('Logged out');
                Plivo.conn.logout();
            }
            function isNotEmpty(n) {
                return n.length > 0;
            }
            function onCalling() {
                console.log("onCalling");
                $('#status_txt').text('Connecting....');
            }
            function  onMediaPermission (result) {
                if (result) {
                    console.log("get media permission");
                } else {
                    alert("you don't allow media permission, you will can't make a call until you allow it");
                }
            }
            function webrtcNotSupportedAlert() {
                $('#txtStatus').text("");
                alert("Your browser doesn't support WebRTC. You need Chrome 25 to use this demo");
            }
            function onLogin() {
                $('#status_txt').text('Logged in');
                $('#logout_box').show();
            }
            function onLoginFailed() {
                $('#status_txt').text("Login Failed");
            }
            function onCallRemoteRinging() {
                $('#status_txt').text('Ringing..');
            }
            function onCallAnswered() {
                console.log('onCallAnswered');
                $('#status_txt').text('Call Answered');
            }
            function onReady() {
                console.log("onReady...");
            }
            // Initialization 
            $(document).ready(function() {
                Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert;
                Plivo.onReady = onReady;
                Plivo.onLogin = onLogin;
                Plivo.onLoginFailed = onLoginFailed;
                Plivo.onCalling = onCalling;
                Plivo.onCallRemoteRinging = onCallRemoteRinging;
                Plivo.onCallAnswered = onCallAnswered;
                Plivo.onMediaPermission = onMediaPermission;
                Plivo.init();
            });
        </script>
    </head>
    <body>
        <div class="container-narrow">
            <div class="masthead">
                <img class="muted" src="static/logo.png">
            </div>
            <div class="row-fluid marketing">
                <div class="span12">
                    <h4>Plivo WebSDK Webphone Demo</h4>
                    <div id="logout_box" style="display: none">
                        <input class="btn" type="button" id="btn_logout" onclick="logout()" value="Logout">
                    </div>
                    <br>
                    <span class="label" id="status_txt">Login</span><br/><br/>
                    <form id="callcontainer" style="">
                        <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
                        <br/>
                        <a href="#" onclick="login();">Login</a>
                        <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


Download the asset files
To build the web app, we first need all the static assets that will be supporting your web app (e.g., CSS, JavaScript, images, etc).
1. Create a "static" folder in the root directory of your app.
2. Download assets.zip and save it in the "static" folder that you just created (e.g., the location of the jquery.js file will be "static/jquery.js"). See line 12 of the make_outgoing.cshtml file below for reference.
3. Serve up the asset files either directly through the web server or by using a content delivery network (CDN).

Create the calling app in .NET
The code below will help to set up a route on your webserver.
1. Copy the code below into a text file and save it as make_outgoing.cshtml.
2. Replace Your SIP Endpoint Username and Your SIP Endpoint Password with your SIP Endpoint credentials created in the previous step.
3. Assuming that your web server is located at www.example.com, make an HTTP request to www.example.com/make_outgoing to invoke the route.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
@{
    var username = "Your SIP Endpoint username"; 
    var password = "Your SIP Endpoint password";
}
    
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Plivo Webphone Demo</title>
        <meta name="description" content="">
        <script language="javascript" content-type="text/javascript" src="static/jquery.js"></script>
        <script type="text/javascript" src="http://s3.amazonaws.com/plivosdk/web/plivo.min.js"></script>
        <link href="static/bootstrap-combined.min.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .container-narrow {
                margin: 0 auto;
                max-width: 700px;
            }
            .container-narrow > hr {
                margin: 30px 0;
            }
            #btn-container a{
                margin-top:7px;
                min-width:7px;
            }
        </style>
        <script type="text/javascript">
            // Make outgoing calls
            function call() {
                if ($('#make_call').text() == "Call") {
                    // The destination phone number to connect the call to
                    var dest = $("#to").val();
                    if (isNotEmpty(dest)) {
                        $('#status_txt').text('Calling..');
                        // Connect the call
                        Plivo.conn.call(dest);
                        $('#make_call').text('End');
                    }
                    else{
                        $('#status_txt').text('Invalid Destination');
                    }
                }
                else if($('#make_call').text() == "End") {
                    $('#status_txt').text('Ending..');
                    // Hang up the call
                    Plivo.conn.hangup();
                    $('#make_call').text('Call');
                    $('#status_txt').text('Ready');
                }
            }
            // Login with SIP Endpoint
            function login() {
                // Login
                Plivo.conn.login("@username", "@password");
            }
            function logout() {
                $('#status_txt').text('Logged out');
                Plivo.conn.logout();
            }
            function isNotEmpty(n) {
                return n.length > 0;
            }
            function onCalling() {
                console.log("onCalling");
                $('#status_txt').text('Connecting....');
            }
            function  onMediaPermission (result) {
                if (result) {
                    console.log("get media permission");
                } else {
                    alert("you don't allow media permission, you will can't make a call until you allow it");
                }
            }
            function webrtcNotSupportedAlert() {
                $('#txtStatus').text("");
                alert("Your browser doesn't support WebRTC. You need Chrome 25 to use this demo");
            }
            function onLogin() {
                $('#status_txt').text('Logged in');
                $('#logout_box').show();
            }
            function onLoginFailed() {
                $('#status_txt').text("Login Failed");
            }
            function onCallRemoteRinging() {
                $('#status_txt').text('Ringing..');
            }
            function onCallAnswered() {
                console.log('onCallAnswered');
                $('#status_txt').text('Call Answered');
            }
            function onReady() {
                console.log("onReady...");
            }
            // Initialization 
            $(document).ready(function() {
                Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert;
                Plivo.onReady = onReady;
                Plivo.onLogin = onLogin;
                Plivo.onLoginFailed = onLoginFailed;
                Plivo.onCalling = onCalling;
                Plivo.onCallRemoteRinging = onCallRemoteRinging;
                Plivo.onCallAnswered = onCallAnswered;
                Plivo.onMediaPermission = onMediaPermission;
                Plivo.init();
            });
        </script>
    </head>
    <body>
        <div class="container-narrow">
            <div class="masthead">
                <img class="muted" src="static/logo.png">
            </div>
            <div class="row-fluid marketing">
                <div class="span12">
                    <h4>Plivo WebSDK Webphone Demo</h4>
                    <div id="logout_box" style="display: none">
                        <input class="btn" type="button" id="btn_logout" onclick="logout()" value="Logout">
                    </div>
                    <br>
                    <span class="label" id="status_txt">Login</span><br/><br/>
                    <form id="callcontainer" style="">
                        <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
                        <br/>
                        <a href="#" onclick="login();">Login</a>
                        <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>


Download the asset files
To build the web app, we first need all the static assets that will be supporting your web app (e.g., CSS, JavaScript, images, etc).
1. Create a "WebContent" folder in the main directory of your app (i.e., "src/main/WebContent"). 2. Download assets.zip and save it in the "static" folder that you just created (e.g., the location of the jquery.js file will be "src/main/WebContent/jquery.js"). See line 7 of the make_outgoing.jsp file below for reference.
3. Serve up the asset files either directly through the web server or by using a content delivery network (CDN).

Create the calling app in Java
The code below will help to set up a route on your webserver.
1. Copy the code below into a text file and save it as make_outgoing.java.
2. Replace Your SIP Endpoint Username and Your SIP Endpoint Password with your SIP Endpoint credentials created in the previous step.
3. Next, we will render the HTML file of this app.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
package web_phne;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import java.io.IOException;

@WebServlet("/make_outgoing")
public class makeOutgoing extends HttpServlet {
    public void service(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {

        String username = "Your SIP ENdpoint username";
        String password = "Your SIP ENdpoint Password";

        // Forward the username and password information to a JSP view
        response.setContentType("text/html");
        request.setAttribute("username", username);
        request.setAttribute("password", password);
        RequestDispatcher view = request.getRequestDispatcher("make_outgoing.jsp");
        view.forward(request, response);
    }
}


Render the HTML file
Assuming that your web server is located at www.example.com, the following Java Server Page (i.e., .jsp) file will be rendered when we send an HTTP request to www.example.com/make_outgoing.
1. Create a folder called WebContent in the same path. For example, if make_outgoing.java was saved in the folder /documents/websdkapp/ then the new folder would be /documents/websdkapp/WebContent.
2. Copy the code below into a text file, name it as make_outgoing.jsp and save it in your new WebContent folder.
3. Make an HTTP request to www.example.com/make_outgoing. This will instruct the make_outgoing.java app to render the make_outgoing.jsp file.

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Plivo Webphone Demo</title>
        <meta name="description" content="">
        <script language="javascript" content-type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="http://s3.amazonaws.com/plivosdk/web/plivo.min.js"></script>
        <link href="bootstrap-combined.min.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 20px;
                padding-bottom: 40px;
            }
            .container-narrow {
                margin: 0 auto;
                max-width: 700px;
            }
            .container-narrow > hr {
                margin: 30px 0;
            }
            #btn-container a{
                margin-top:7px;
                min-width:7px;
            }
        </style>
        <script type="text/javascript">
            // Make outgoing calls
            function call() {
                if ($('#make_call').text() == "Call") {
                    // The destination phone number to connect the call to
                    var dest = $("#to").val();
                    if (isNotEmpty(dest)) {
                        $('#status_txt').text('Calling..');
                        // Connect the call
                        Plivo.conn.call(dest);
                        $('#make_call').text('End');
                    }
                    else{
                        $('#status_txt').text('Invalid Destination');
                    }
                }
                else if($('#make_call').text() == "End") {
                    $('#status_txt').text('Ending..');
                    // Hang up the call
                    Plivo.conn.hangup();
                    $('#make_call').text('Call');
                    $('#status_txt').text('Ready');
                }
            }
            // Login with SIP Endpoint
            function login() {
                // SIP Endpoint username and password
                var uname = '<%= request.getAttribute("username") %>';
                var password = '<%= request.getAttribute("password") %>';
                console.log(uname);
                console.log(password);
                // Login
                Plivo.conn.login(uname, password);
            }
            function logout() {
                $('#status_txt').text('Logged out');
                Plivo.conn.logout();
            }
            function isNotEmpty(n) {
                return n.length > 0;
            }
            function onCalling() {
                console.log("onCalling");
                $('#status_txt').text('Connecting....');
            }
            function  onMediaPermission (result) {
                if (result) {
                    console.log("get media permission");
                } else {
                    alert("you don't allow media permission, you will can't make a call until you allow it");
                }
            }
            function webrtcNotSupportedAlert() {
                $('#txtStatus').text("");
                alert("Your browser doesn't support WebRTC. You need Chrome 25 to use this demo");
            }
            function onLogin() {
                $('#status_txt').text('Logged in');
                $('#logout_box').show();
            }
            function onLoginFailed() {
                $('#status_txt').text("Login Failed");
            }
            function onCallRemoteRinging() {
                $('#status_txt').text('Ringing..');
            }
            function onCallAnswered() {
                console.log('onCallAnswered');
                $('#status_txt').text('Call Answered');
            }
            function onReady() {
                console.log("onReady...");
            }
            // Initialization 
            $(document).ready(function() {
                Plivo.onWebrtcNotSupported = webrtcNotSupportedAlert;
                Plivo.onReady = onReady;
                Plivo.onLogin = onLogin;
                Plivo.onLoginFailed = onLoginFailed;
                Plivo.onCalling = onCalling;
                Plivo.onCallRemoteRinging = onCallRemoteRinging;
                Plivo.onCallAnswered = onCallAnswered;
                Plivo.onMediaPermission = onMediaPermission;
                Plivo.init();
            });
        </script>
    </head>
    <body>
        <div class="container-narrow">
            <div class="masthead">
                <img class="muted" src="logo.png">
            </div>
            <div class="row-fluid marketing">
                <div class="span12">
                    <h4>Plivo WebSDK Webphone Demo</h4>
                    <div id="logout_box" style="display: none">
                        <input class="btn" type="button" id="btn_logout" onclick="logout()" value="Logout">
                    </div>
                    <br>
                    <span class="label" id="status_txt">Login</span><br/><br/>
                    <form id="callcontainer" style="">
                        <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
                        <br/>
                        <a href="#" onclick="login();">Login</a>
                        <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

Step 5: Test it out

  1. To initiate a call, load your app URL www.example.com/make_outgoing into a browser (use www.example.com/make_outgoing.php if you built your app using PHP).
  2. To enable your computer microphone for the app by clicking "Allow" when prompted by your browser.
  3. Allow media in browser

    Note: Plivo's web SDK supports most modern browsers. Even if the browser does not support HTML5, it will automatically fallback to Flash with full functionality.

    Allow media in browser for Flash
  4. Enter the destination phone number in the text field and click 'Call'. Be sure that the phone number include country code, area code, and phone number without spaces or dashes (e.g., 14153336666).
  5. screenshot make a call to a phone
  6. The call status will indicate the stage of the call (e.g., "Ready", "Connecting", "Ringing", and "Call Answered"). Once the call is answered, you may click "End" to hangup the call.
  7. screenshot call is answered

Make a Call With a Browser to a SIP Endpoint

Follow the same steps for making a call with a browser to a phone number, except that you will enter a valid SIP URI of a SIP Endpoint (e.g., abcd123456@phone.plivo.com) instead of a phone number.

make a call to a SIP endpoint

Hangup the Call

The ability to hang up the call via a button is already built into the code of the application. Once a call is initiated, the End button is used to hangup the call. The call does not have to be connected in order to hang up the call. Here's a screenshot of what that looks like:

screenshot hanging up a call

Here are the lines of code (from the full application code above) responsible for hanging up the call. We've commented in the functionality of each line:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
else if($('#make_call').text() == "End") {
# make_call is the id of the Call button on the app webpage you will build. Once the call has been established, this value to set to "End"
    $('#status_txt').text('Ending..');
    # when the "End" button is pressed, the status is changed to "Ending"
    // Hang up the call
    Plivo.conn.hangup(); 
    # the call is hungup
    $('#make_call').text('Call');
    # the value of the make_call button is changed back to "Call"
    $('#status_txt').text('Ready');
    # the status is changed back to "Ready"
}

Destination Input Methods

There are two main methods of inputting your destination phone number: entering the destination number manually in a text box on your web form or hard-coding a phone number into a button that dials the pre-programmed phone number when clicked (i.e., click-to-call).

Manually Input Destination Phone Numbers

Similar to the section on Make Outgoing Calls with a Browser, the user can enter the destination number in a text box after logging in. A call will then be placed to this number. The following lines of code will add a text box and a 'Call' button to the page. Add this to your html file to enable this function.


<form id="callcontainer" style="display: none">   
    <input type="text" name="to" value="" id="to" placeholder="Phone number or a SIP URI">
    <br/>
    <a href="#" id="make_call" class="btn main-btn btn-success" onclick="call();">Call</a>
</form>

The value of 'to' textbox is the destination number. This number is passed to 'call' js funtion as shown below.


function call() 
{
    if ($('#make_call').text() == "Call") 
    {
        var dest = $("#to").val();;
        if (isNotEmpty(dest)) 
        {
            $('#status_txt').text('Calling..');
            Plivo.conn.call(dest);
            $('#make_call').text('End');
        }
        else{
            $('#status_txt').text('Invalid Destination');
        }
    }
}
    


Pre-program the Destination Phone Number (Click-to-call)

The destination phone number or SIP endpoint can also be hardcoded. This is also known as a 'Click-to-Call' application where a call is made with a click of a button embedded on your web app. The phone number is essentially harcoded in the following 'call' js function.


function call() 
{
    var dest = "1111111111"
    Plivo.conn.call(dest);
}


Next Steps

Learn how to modify the login method of your app.

  1. Web SDK Quick Start
  2. Make a Call With a Browser to a Phone Number
  3. Make a Call With a Browser to a SIP Endpoint
  4. Hangup the Call
  5. Manually Input Destination Phone Numbers
  6. Pre-program Destination Phone Numbers (Click-to-call)
  7. Modify the Login Interface
  8. Receive Incoming Calls
  9. Create Dynamic SIP Endpoints