Get Started

Twilio Client Conference Call Monitor

You can use Twilio Client to listen in to any conference call in progress. The conference calls may be phones only, web based, or a combination of the two. Using the Twilio REST API you can list all conferences room names in-progress, and you may select a room to listen in.

Usage

A user loads a web page, which lists all conference rooms with a status of in-progress. Next to each conference room name is a link to 'Listen in'. When clicked, the user will be added to the conference in muted mode, allowing them to hear the call in progress. The 'Listen in' link changes to a 'Leave' link allowing the user to exit the conference and choose another.

Concepts

This HowTo demonstrates using the Twilio REST API to view Conferences List resource, browser calling using Twilio Client, specifying an outgoing connection to a Twilio Applications, and joining conference calls using TwiML <Conference>.

Download

browser-conference-call-monitor.zip

Implementation

  1. Generate a Twilio Capability Token with appropriate permissions. Also create a Twilio REST client.
  2. Create javascript to setup a Twilio.Device and functions to connect and disconnect outgoing connections.
  3. Use the Twilio REST API to retrieve a list of in-progress conferences and display a link to listen in for each conference room
  4. When a listen in link is clicked an outgoing connection is made and Twilio requests the Voice URL specified in the Application which responds with TwiML instructions to join a conference in muted mode.
  5. Twilio establishes a connection to the user's browser and the user can listen into a conference.

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.

      • howtos/browser-conference-call-monitor/index.php
        	require_once('Services/Twilio.php');
        	require_once('Services/Twilio/Capability.php');
        
        	$API_VERSION = '2010-04-01';
        
        	$accountSid = 'ACxxxxxxxxxxxxxxx';
        	$authToken  = 'xxxxxxxxxxxxxxxxx';
        	$appSid = 'APXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';
        
        	$token = new Services_Twilio_Capability($accountSid, $authToken);
        	$token->allowClientOutgoing($appSid);
        
        	$client = new Services_Twilio($accountSid, $authToken);
            
  • 2

    • Add javascript to setup a Twilio.Device with the capability token, and implement javascript functions to monitor and leave a conference. Monitoring a conference involves connecting the device, while leaving a conference disconnects the device.
    • howtos/browser-conference-call-monitor/index.php
      		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
      		<script type="text/javascript" src="//static.twilio.com/libs/twiliojs/1.1/twilio.min.js"></script>
      
      		<script type="text/javascript">
      
      			var conn = null;
      
      			$(document).ready(function() {
      				Twilio.Device.setup("<?php echo $token->generateToken();?>");
      
      				$("li > a").click(function() {
      					name = $(this).prev().text();
      					monitorConference(name, $(this));
      				});
      			});
      
      			function monitorConference(name, link) {
      				if (conn == null)
      				{
      					conn = Twilio.Device.connect( { 'name' : name } );
      
      					link.text('Leave');
      					link.click(function() {
      						leaveConference(link);
      					});
      				}
      			}
      
      			function leaveConference(link) {
      				conn.disconnect();
      				conn = null;
      
      				link.text('Listen in');
      				link.click(function() {
      					name = link.prev().text();
      					monitorConference(name, link);
      				})
      			}
      
      		</script>
          
    • Call the Twilio REST API to retrieve a list of conferences with status of 'in-progress'. For each conference returned, render HTML with the name and a 'listen in' link.
    • howtos/browser-conference-call-monitor/index.php
          $conferences = $client->account->conferences->getPage(0, 50, array('Status' => 'in-progress'));
      
          echo '<p>Found '.$conferences->total.' conference(s)</p>';
      
          echo '<ul>';
          foreach ($conferences->getItems() as $conference) {
              echo '<li><span>'.$conference->friendly_name.'</span> <a href="#">Listen in</a></li>';
          }
          echo '</ul>';
      
          
    • jQuery binds the monitorConference function to each link. When a link is clicked, the monitorConference function calls Twilio.Device.connect method, which initiates an outbound connection. The Device will be connected to the Twilio Application specified in the Capability Token, and the conference room name is passed as a parameter.
  • 4

    • Twilio requests the Voice Url specified in the Application for instructions on how to handle the call logic, including the name parameter.

    • The Voice URL specified in the Application will respond to Twilio's request with TwiML.

  • howtos/browser-conference-call-monitor/dial-conference.php
    <?php
    	header('Content-type: text/xml');
    	echo '<?xml version="1.0" encoding="UTF-8"?>';
    ?>
    <Response>
    	<Dial>
    		<Conference muted="true" beep="false"><?php echo htmlspecialchars($_REQUEST['name']); ?></Conference>
    	</Dial>
    </Response>
        

Our TwiML instructs Twilio to put the caller in a <Conference> room with a name specified by the 'name' parameter. The 'muted' and 'beep' attributes are set to false, so the caller will not be heard by current participants. For a complete overview of TwiML (Twilio's XML) see the TwiML documentation.

  • 5

    • Twilio processes the TwiML we sent and adds the web client into the conference room. The call audio will be listenable in the browser.