Get Started

Twilio Client Browser-to-Browser Call

Twilio Client provides an easy way for your website visitors to speak to each using a usb headset or microphone. You can easily build an internal company switchboard or add voice chat to your social application. This example demonstrates browser to browser calling using Twilio Client.

Usage

A user enters his name into a form so he may be identified. Next, the user is prompted to enter another user name to call. Upon pressing the 'Start Call' button Twilio will call the browser of the specified user, which will automatically answer and establish a voice chat session. The call status and a disconnect button are displayed on the screen. The parties may talk until one of them disconnects.

Concepts

This HowTo demonstrates browser to browser calling using Twilio Client (both outbound and inbound), specifying an outgoing connection to a Twilio Applications, passing parameters to the Application, and creating TwiML call logic using the <Dial> verb and <Client> noun.

Download

browser_call.zip

Implementation

  1. User inputs their name into an HTML form and submits their name to a php page.
  2. Generate a Twilio Capability Token with permission to make outgoing and accept incoming connections.
  3. Create javascript and HTML to setup Twilio.Device, initiate and accept calls. When this user types another user's name into a text box and clicks Start Call, javascript will connects to the Application specified in the TwilioCapability and pass the specified name as a parameter.
  4. Twilio requests the Application's Voice URL which returns TwiML instructions to Dial another web client by their name.
  5. The called web client automatically accepts the incoming connection and establishes a call between the two browsers

Get Started

  • 1

    • User inputs their name into an HTML form, which is submitted as parameter 'name' to a php script.

      • howtos/browser_call/enter_name.html
        		<div align="center">
        			<form method="GET" action="call_client.php">
        				Enter your first name: <input type="text" name="name"/> <input type="submit"/>
        			</form>
        		</div>
            
  • 2

    • Create a capability token to securely bind Twilio Client to your account and also give the device the ability to make outgoing calls to a Twilio Application and receive incoming calls identified by the name parameter.
    • howtos/browser_call/call_client.php
      	include 'Services/Twilio/Capability.php';
      
      	$accountSid = 'ACxxxxxxxxxxxxxxx';
      	$authToken  = 'xxxxxxxxxxxxxxxxx';
      
      	$token = new Services_Twilio_Capability($accountSid, $authToken);
      	$token->allowClientOutgoing('APxxxxxxxxxxxxxxx');
      	$token->allowClientIncoming($_REQUEST['name']);
          
  • 3

  • Create HTML and Javascript for the 'Call' and 'Disconnect' buttons as well as a text field to input the name of the person to call. Another div displays status information. Set the initial visibility of the 'Disconnect' button to 'none'.

  • howtos/browser_call/call_client.php
    		<div align="center">
    			Who would you like to call?<br/>
    			<input type="text" id="client_to_call" name="client_to_call"/>
    			<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>
        

The javascript sets up Twilio.Device with the capability token. We use jQuery to create click handlers for the call and disconnect buttons, as well as implement Twilio.Device callbacks to update the status text and automatically accept incoming calls. We toggle the visibility of the 'Call' and 'Disconnect' buttons when a connection is connected or disconnected. When the user clicks the 'Start Call' button, javascript invokes the Twilio.Device connect method which initiates an outbound connection to the Application specified in the Capability Token. The value of the 'client_to_call' field is passed as a parameter named 'client' to the Application.

  • howtos/browser_call/call_client.php
    		<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.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();?>");
    
    			$("#call").click(function() {  
    		        params =  { "client" : $("#client_to_call").val() };
    		        Twilio.Device.connect(params);
    			});
    			$("#hangup").click(function() {  
    				Twilio.Device.disconnectAll();
    			});
    
    			Twilio.Device.incoming(function (conn) {
    				conn.accept();
    			});
    			
    			Twilio.Device.ready(function (device) {
    				$('#status').text('Ready to start call');
    			});
    
    			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();
    			}
    
    		});
    		</script>
        
  • 4

    • Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic. The Voice URL will respond to Twilio's request with TwiML. The response is dynamically created based on the 'name' parameter passed into Twilio.Device.connect.

The TwiML initiates a connection to the other client's browser via a <Dial> verb. We nest the <Client> noun to instruct Twilio to connect to another client by name. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

  • 5

    • The other client's Twilio.Device.incoming callback will trigger, and its implementation will automatically accept the connection and the browsers will be connected.