Twilio Outbound call - Add more people to existing call

Question

I am trying to create an web application where in :

1. I place outbound call from browser application to a phone number through twilio. I am using Twilio Client(js) v 1.10.1 for browser application. The backend webhook is written in Java using the Twilio's Dial and Number verb. I was able to achieve it using twilio's programmable voice.

   Pseudo code is like below

   Front end code

   let device = require('twilio-client').Device;
   let outboundCall = '';
   const twilioInit = () => {
   // twilio client initialization logic goes here
   
   }
   
   // on phone icon click i am calling the below method
   const makeOutboundCall = () => {
           outboundCall = device.connect({        
               To: TO_NUMBER // The first to number
           });
   }
   

   Back end code - server side (webhook)

   @RequestMapping(value="/callCustomers", produces= "text/xml")
   public String callByBrowserToMobile(@RequestParam String ApplicationSid, @RequestParam String ApiVersion, 
                                       @RequestParam String Called, @RequestParam String Caller, 
                                       @RequestParam String CallStatus, @RequestParam String To,
                                       @RequestParam String From, @RequestParam String CallSid,
                                       @RequestParam String Direction, @RequestParam String AccountSid) {
   
       Number number = new Number.Builder(To).build();
       Dial dial = new Dial.Builder().answerOnBridge(true).number(number).callerId(myTwilioNumber).build();
       VoiceResponse response = new VoiceResponse.Builder().dial(dial).build();
       logger.info(response.toXml());              
       return response.toXml();    
   }
   

2. Secondly, once the outbound call is connected i want to add more people to the ongoing call.

How to achieve the second requirement?

EDITED: I tried with below code for conference call:

@RequestMapping(value = "/callMobile", produces = "text/xml")
public String callByBrowserToMobile(@RequestParam String ApplicationSid, @RequestParam String ApiVersion,
        @RequestParam String Called, @RequestParam String Caller, @RequestParam String CallStatus,
        @RequestParam String To, @RequestParam String From, @RequestParam String CallSid,
        @RequestParam String Direction, @RequestParam String AccountSid) {

    LOG.info("Call by browser to mobile");
    
    String voiceCallBackUri = new StringBuilder(
            env.getProperty("twilio.exposed.uri").concat("/conferenceCallBack")).toString();
    String joinConferenceUri = new StringBuilder(
            env.getProperty("twilio.exposed.uri").concat("/joinConference")).toString();
    
    String fromNumber = "+xxxxxxxxx35"; // Bought Twilio Number
    Call call = Call.creator(
                new com.twilio.type.PhoneNumber("+"+To),
                new com.twilio.type.PhoneNumber(fromNumber),
                URI.create(joinConferenceUri))
            .setMethod(HttpMethod.GET)
            .setStatusCallback(URI.create(voiceCallBackUri))
            .setStatusCallbackMethod(HttpMethod.POST)
        .create();
    
    
    Conference.Builder conferenceBuilder = new Conference.Builder("My Conference");
    
    Dial dial = new Dial.Builder().conference(conferenceBuilder.build()).build();
    VoiceResponse twiml = new VoiceResponse.Builder().dial(dial).build();       
    
    return twiml.toXml();
}

@RequestMapping("/joinConference")
public String joinConference() {
    
    LOG.info("joinConference");
    
    Conference.Builder conferenceBuilder = new Conference.Builder("My Conference");
    
    Dial dial = new Dial.Builder().conference(conferenceBuilder.build()).build();
    VoiceResponse twiml = new VoiceResponse.Builder().dial(dial).build();       
    
    return twiml.toXml();
}

@RequestMapping("/conferenceCallBack")
public void conferenceCallBack(@RequestParam String Called, @RequestParam String ToState,
        @RequestParam String CallerCountry, @RequestParam String Timestamp, @RequestParam String Direction,
        @RequestParam String CallbackSource, @RequestParam String SipResponseCode, @RequestParam String CallerState,
        @RequestParam String ToZip, @RequestParam String SequenceNumber, @RequestParam String To,
        @RequestParam String CallSid, @RequestParam String ToCountry, @RequestParam String CallerZip,
        @RequestParam String ApiVersion, @RequestParam String CalledZip,@RequestParam String CallStatus,
        @RequestParam String CalledCity, @RequestParam String Duration, @RequestParam String From, 
        @RequestParam String CallDuration, @RequestParam String AccountSid, @RequestParam String CalledCountry, 
        @RequestParam String CallerCity, @RequestParam String Caller, @RequestParam String FromCountry, 
        @RequestParam String ToCity, @RequestParam String FromCity, @RequestParam String CalledState, 
        @RequestParam String FromZip, @RequestParam String FromState) {
    LOG.info("conferenceCallBack");
}

Using the above code for conference the caller(browser application) hears waiting music for conference call and the callee gets the call but when picked just hears the conference name and the call for callee disconnects. Please guide on finding the issue.

Answer 1

Twilio developer evangelist here.

You aren't serving your /joinConference route as text/xml so Twilio is reading it as text/plain and treating it as if it were a <Say>.

I think you need to add produces = 'text/xml' to the RequestMapping, like so:

@RequestMapping("/joinConference", produces = "text/xml")

Let me know if that helps at all.