How to Implement Outbound Conference Calling with Twilio Client-Side Voice SDKs – Twilio Support

Conference calls come with a lot of benefits over a standard 2-person <Dial> call, so it's no surprise many Twilio users wish to combine Conference with their Voice SDK application(s).

Our client-side Voice SDKs enable our customers to implement VoIP calling into their front-end user applications. For browser-based web applications, we have a Javascript SDK, and we have android and iOS SDKs for mobile applications.

Implementing our Conference product into a front-end application not only enables your users to create and participate in conversations with more than 2 people, but it also makes it easier for you to manage call holding, call transfers, and the overall call experience.

In this article, we will walk you through the entire setup, so you can take your Voice SDK application to the next level leveraging Conference.

How it works

To enable conference calling in a Voice SDK application, you will need to update your backend "server-side" Twilio logic.

For those new to Twilio, this may not be intuitive. You may think, "I'm working with the client-side SDK, the call control functionality must be included there!" The more you work with Twilio however, you will see that all the TwiML and API requests are handled by the backend app server, usually with one of Twilio's helper libraries. One benefit to this approach is that the process to implement Conference calling is the same for all our Voice SDKs (Javascript, android, and iOS).

Here's how it works at a high level using an outbound SDK call as an example.

Your user logs into your app, and in some way or another (e.g. this may occur upon login, or when they launch the calling dial-pad), your app registers with Twilio by sending an access token. This access token contains a TwiML App SID which contains a URL that will tell Twilio what to do when a call is made.
Your user inputs the number(s) they wish to call (or selects multiple parties from their contact list).
The user clicks the call button in your application. This triggers a "device.connect()" function which creates a UDP connection with Twilio.
Twilio then checks the URL from the TwiML App SID sent in the access token for instructions on what to do with this connection.

--- Now starts the process unique to a conference ---
For a conference call, your server will do two things in parallel:
Your server will use the inbound request from Twilio to trigger a POST request to the /Conference/Participant resource of the API, and
Your server will immediately connect the SDK call leg with the conference by responding to Twilio with <Dial><Conference> TwiML instructions.
The POST request to the /Participant resource will automatically create an outbound-api call to the endpoint your user is calling (a <Number>, another <Client> app user, or a <Sip> endpoint) and when answered, connect them to the conference specified in the request.

*NOTE: an alternative approach would be to create an outbound-api call to the endpoint the user is calling by sending a POST request to the /Call resource of the API, then your request would include TwiML instructions to <Dial> the <Conference> upon answer. The /Conference/Participant resource now supports answering machine detection (AMD) and has the same features as the /Call resource, so it is typically the preferred approach.

The Quickstarts

If you built one of the Twilio Voice SDK Quickstart Apps, which we recommend that everyone do if you will be building with our Voice SDKs, then you probably know the quickstart app does not make conference calls. That's because by default, the quickstart app will dial just a single endpoint - either a <Number>, <Client>, or <Sip> endpoint - and bridge that endpoint with using <Dial> with the SDK device.

To support Conference calls, you will need to update the logic provided by the Quickstart following the method described above where you will use the API to send an outbound call to the callee and connect them to the conference, then use <Dial><Conference> to connect the SDK call leg to the conference.

Example with the JavaScript SDK

The examples below are based on the Voice JavaScript SDK Quickstart app. Therefore, we recommend the following prerequisites to ensure you don't have issues.

Prerequisites

You have downloaded and set up our Voice JavaScript SDK Quickstart app successfully: https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-node.
You have already placed some test calls prior to this, and confirmed everything is operational with the default quickstart configuration.

How to Setup Outbound Conference

An outbound conference scenario is just like the one discussed above. You will have a request to your app server initiated by the client-side SDK's connection to Twilio (step 1 in the diagram below). This request from Twilio to your app server (step 2) will asynchronously trigger one or more API requests to the endpoint(s) the user is calling, then the app server will respond to Twilio with <Dial><Conference> TwiML instructions (step 3) which will connect the SDK app to the conference (step 4).

Voice_JS_SDK_Diagram.width-800.png

That can be a lot to take in, so let's look at some code to help this make more sense.

Referencing the JavaScript quickstart app's architecture with a Node.js backend, here's how you would set this up.

Open the project in your preferred code editor. Navigate to your file explorer (usually the left margin), and open the handler.js file under src folder. This is where your server logic lives, using Twilio's NodeJS helper library in this case to send API requests and TwiML responses.
Initialize a callerId variable and a global Twilio client at the beginning of the file among your other variables just before your first function.
*NOTE: You will also need to add your apiKey and your apiSecret variables in order to initialize the client. Please refer to How can I create API Keys?
```
const callerId = config.callerId;
const apiKey = config.apiKey; // Twilio API Key
const apiSecret = config.apiSecret; // Twilio API Secret
const client = require('twilio')(apiKey, apiSecret, { accountSid })
```

Now we need to update the logic in our handler.js file at the voice URL you configured on your TwiML App. The function in the quickstart for this is called voiceResponse.

Here we will update the code to instead create an outbound call by POSTing to the /Participant resource AND also respond to Twilio with <Dial><Conference> TwiML.

exports.voiceResponse = function voiceResponse(requestBody) {
  let callee;
  if (requestBody.To == callerId) callee = 'client:' + identity;
  else callee = requestBody.To;

  let twiml = new VoiceResponse();

  /*Code added to enable Conference Calls using Participant Resource*/
  client.conferences('My Conference')
    .participants
    .create({
       from: callerId,
       to: callee,
    })
    .then(participant => {
      console.log(participant.callSid);
    })
    .catch(e => {console.log('Got an error:', e.code, e.message)});

    if (requestBody.To){           
          dial = twiml.dial({ callerId: callerId });
          dial.conference({startConferenceOnEnter: true, record: 'record-from-start'}, 'My Conference');     
}   else {           
          twiml.say("Thanks for calling!");     
      }         
      // return twiml         
      return twiml.toString();   
};

And that's it! Be sure to save and redeploy, then you're ready to test! The code above also supports inbound calling, so if you configure a Twilio number webhook with the same URL as in your TwiML app, you will be able to receive calls in a Conference environment as well!