Twilio Client Browser Soft Phone

You can use your web browser as a telephone using Twilio Client. This HowTo shows how you can place outgoing calls to any phone using a usb headset or microphone and also create a virtual dialpad to send touch tone digits. You may also optionally provision a traditional phone number to ring in the browser when called.

Usage

A user enters a phone number they want to call and clicks the 'Start Call' button. Twilio will call the specified phone number and setup a call between that phone number and the browser. The call status and a disconnect button are displayed on the page and a browser based dialpad is available for touch tone entry. The parties may talk until one of them disconnects. If an incoming call is detected, the browser will prompt the user to accept the call, and make the connection if confirmed.

Concepts

This HowTo demonstrates browser calling using Twilio Client, specifying an outgoing connection to a Twilio Application and creating TwiML call logic using the <Dial> verb.

Download

browser-phone.zip

Implementation

1. Generate a Twilio Capability Token with permissions to make outgoing and and accept incoming calls.
2. Create javascript to setup a Twilio.Device and the HTML user interface
3. When ' is clicked, an outgoing connection is initiated to the Application specified in the TwilioCapability
4. Twilio requests the Voice URL specified in the Application, which returns TwiML instructions to dial the third party number.
5. Twilio establishes a call between the third party phone and the user's browser.
6. Incoming calls are signaled via Twilio.Device.incoming and may be answered via the Connection.accept method

Get Started

• 1

  • Create a capability token to securely bind Twilio Client to your account and also give the device the ability to make outbound calls to a Twilio Application, as well as accept incoming connections to the name 'alice'.

    • howtos/browser-phone/browser-phone.php

      include 'Services/Twilio/Capability.php';
      
      $accountSid = 'ACxxxxxxxxxxxxxxx';
      $authToken  = 'xxxxxxxxxxxxxxxxx';
      
      $token = new Services_Twilio_Capability($accountSid, $authToken);
      $token->allowClientOutgoing('APxxxxxxxxxxxxxxx');
      $token->allowClientIncoming("alice");
          

• 2

  • Add javascript to setup a Twilio.Device with the capability token. We use jQuery to create click handlers for the call and disconnect buttons as well as register Twilio.Device callbacks to update the status text. We also toggle the visibility of the 'Call' and 'Disconnect' buttons and dialpad when a call is connected or disconnected. In addition each dialpad button is assigned a click handler which will invoke Twilio.Connection's sendDigits method when pressed.
  • howtos/browser-phone/browser-phone.php

    		<script type="text/javascript" src="http://static.twilio.com/libs/twiliojs/1.0/twilio.js"></script>
    		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    		<script type="text/javascript">
    		$(document).ready(function(){
    
    			Twilio.Device.setup("<?php echo $token->generateToken();?>");
    			var connection=null;
    			
    			$("#call").click(function() {  
    				params = { "tocall" : $('#tocall').val()};
    				connection = Twilio.Device.connect(params);
    			});
    			$("#hangup").click(function() {  
    				Twilio.Device.disconnectAll();
    			});
    
    			Twilio.Device.ready(function (device) {
    				$('#status').text('Ready to start call');
    			});
    
    			Twilio.Device.incoming(function (conn) {
    				if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){
    					connection=conn;
    				    conn.accept();
    				}
    			});
    
    			Twilio.Device.offline(function (device) {
    				$('#status').text('Offline');
    			});
    
    			Twilio.Device.error(function (error) {
    				$('#status').text(error);
    			});
    
    			Twilio.Device.connect(function (conn) {
    				$('#status').text("Successfully established call");
    				toggleCallStatus();
    			});
    
    			Twilio.Device.disconnect(function (conn) {
    				$('#status').text("Call ended");
    				toggleCallStatus();
    			});
    			
    			function toggleCallStatus(){
    				$('#call').toggle();
    				$('#hangup').toggle();
    				$('#dialpad').toggle();
    			}
    
    			$.each(['0','1','2','3','4','5','6','7','8','9','star','pound'], function(index, value) { 
    		    	$('#button' + value).click(function(){ 
    					if(connection) {
    						if (value=='star')
    							connection.sendDigits('*')
    						else if (value=='pound')
    							connection.sendDigits('#')
    						else
    							connection.sendDigits(value)
    						return false;
    					} 
    					});
    			});
    
    
    		});
    
    		</script>
        

  • Create HTML for the 'Call' and 'Disconnect' buttons as well as a div to hold status information. Set the initial visibility of the 'Disconnect' button to 'none'. Also create html buttons for each dialpad key inside a hidden div.
  • howtos/browser-phone/browser-phone.php

    			Number to call: <input type="text" id="tocall" value="">
    			<input type="button" id="call" value="Start Call"/>
    			<input type="button" id="hangup" value="Hangup Call" style="display:none;"/>
    			<div id="status">
    				Offline
    			</div>
    			<div id="dialpad" style="display:none;">
    				<table>
    				<tr>
    				<td><input type="button" value="1" id="button1"></td>
    				<td><input type="button" value="2" id="button2"></td>
    				<td><input type="button" value="3" id="button3"></td>
    				</tr>
    				<tr>
    				<td><input type="button" value="4" id="button4"></td>
    				<td><input type="button" value="5" id="button5"></td>
    				<td><input type="button" value="6" id="button6"></td>
    				</tr>
    				<tr>
    				<td><input type="button" value="7" id="button7"></td>
    				<td><input type="button" value="8" id="button8"></td>
    				<td><input type="button" value="9" id="button9"></td>
    				</tr>
    				<tr>
    				<td><input type="button" value="*" id="buttonstar"></td>
    				<td><input type="button" value="0" id="button0"></td>
    				<td><input type="button" value="#" id="buttonpound"></td>
    				</tr>
    				</table>
    			</div>
        

• 3

  • The user clicks the 'Start Call' button which invokes Twilio.Device's connect method and initiates an outbound connection.

• 4

  • Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic, and includes the 'tocall' parameter in the request. The Voice URL specified in the Application will respond to Twilio's request with TwiML, instructing Twilio how to handle the call.
  • howtos/browser-phone/dial_number.php

    <?php
    header('Content-type: text/xml');
    ?>
    <Response>
    <Dial callerId="NNNNNNNNNN"><?php echo htmlspecialchars($_REQUEST["tocall"]); ?></Dial>
    </Response>
        

  • Our TwiML initiates a phone call to the number in the 'tocall' parameter via a <Dial> verb. The 'callerId' attribute of <Dial> is required and determines the number the other party sees on their phone when it rings. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

• 5

Twilio processes the TwiML we sent and calls the specified phone number and successfully connects the two parties.

• 6

  • This example will also accept incoming calls from phones or other Twilio phones or clients configured to <Dial> the <Client> named 'alice'. Establishing the incoming connection is handled via a javascript confirm box in the Twilio.Device.incoming method.