Twilio Client Browser Conference Call

You can add group chat to your website using Twilio Client and conference rooms. Twilio conferences work with browsers and traditional phone calls so you can also provide a call in number for non web users to join in the fun. In this example all website users are placed in the same conference room, but you can also choose to place users separately into selectively named conference rooms.

Usage

A user loads a web page and is immediately joined into a conference call. If the user is the first person to join they will hear hold music. The conference begins when a second participant arrives. Status text shows the current state of the call.

Concepts

This HowTo demonstrates browser calling using Twilio Client, specifying an outgoing connection to a Twilio Applications, and creating conference calls using TwiML <Conference>.

Download

browser-conference-call.zip

Implementation

1. Generate a Twilio Capability Token with appropriate permissions
2. Create javascript to setup a Twilio.Device and HTML to display current call status
3. When the Device is ready the callback automatically connects the browser to the Application specified in the TwilioCapability
4. Twilio requests the Voice URL specified in the Application which responds with TwiML instructions to join a conference.
5. Twilio establishes a conference call to the user's browser and the user can participate in 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/browser-conference.php

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

• 2

  • Add javascript to setup a Twilio.Device with the capability token, and implement callback methods to update the status text.
  • howtos/browser-conference-call/browser-conference.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();?>");
    
    			Twilio.Device.ready(function (device) {
    				$('#status').text('Ready to join conference');
    				Twilio.Device.connect();
    			});
    
    			Twilio.Device.offline(function (device) {
    				$('#status').text('Connection offline');
    			});
    
    			Twilio.Device.error(function (error) {
    				$('#status').text(error);
    			});
    
    			Twilio.Device.connect(function (conn) {
    				$('#status').text("Successfully joined conference");
    			});
    
    			Twilio.Device.disconnect(function (conn) {
    				$('#status').text("Disconnected");
    			});
    			
    		});
    
    		</script>
        

  • Create HTML for the status text.
  • howtos/browser-conference-call/browser-conference.php

    			<div id="status">
    				Connection offline
    			</div>
        

• 3

  • When the page is loaded, after the Twilio Device is setup the ready callback function will be invoked. This function will instruct the device to connect, which initiates an outbound connection to the Twilio Application specified in the Capability Token.

• 4

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

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

Our TwiML instructs Twilio to put the caller in a <Conference> room named 'Client'. 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. Hold music will be heard until another participant enters, at which time all parties will be able to speak.