Azure comms, multiple calling numbers....

Question

I'm developing a web application with integrated telephony. I'm using the voice calling SDK for calling over public switched telephone networks (PSTN). In the front-end of the app (React JS), I'm using the @azure/communication-calling library, and the line of code below initiates an outgoing call:

const call = await callAgent.startCall([{ phoneNumber: <numberToCall> }], { alternateCallerId: { phoneNumber: <callingNumber> } });

As the app is to have users in Ireland and Chicago, I have two numbers in the comms service: One for Ireland and one for Chicago. App users won't be calling each other, just clients ( members of the public ) in their own locality over PSTN. I originally assumed that the API would automatically figure out which of the calling numbers to use based on the country code of the recipient number, but someone in a reply to a previous post said it doesn't. In that case, how does one specify? Would specifying it in the alternateCallerId parameter in the above line of code be enough? Please advise.

Answer 1

Hi Dylan Olney,

Thank you for reaching out to Microsoft Q&A.

Azure Communication Services (ACS) does not automatically select the alternateCallerId based on the recipient’s country code. Instead, you must explicitly specify which caller ID to use when initiating the call.

Since you have two numbers—one for Ireland (+353) and one for Chicago (+1)—you should implement logic in your React app to select the appropriate number before making a call.

const startCall = async () => {

  if (!callAgent) {

    console.error("Call Agent is not initialized.");

    return;

  }

  const numbersToCall = recipientNumbers.split(",").map((num) => num.trim());

  if (numbersToCall.length === 0 || numbersToCall[0] === "") {

    console.error("Please enter at least one phone number.");

    return;

  }

  const selectedCallerId = numbersToCall.some(num => num.startsWith("+353"))

    ? "+353XXXXXXX"  

    : "+1XXXXXXXXXX"; 

  try {

    const currentCall = callAgent.startCall(

      numbersToCall.map(num => ({ phoneNumber: num })),

      { alternateCallerId: { phoneNumber: selectedCallerId } }

    );

    setCall(currentCall);

    console.log("Call started using caller ID:", selectedCallerId);

  } catch (error) {

    console.error("Error starting call:", error);

  }

};

Refer this MSDOC and Link for more configuration with react acs.

Modify Your React App for Multiple Calling Numbers So that you can update your React application to handle multiple recipient phone numbers and either allow users to manually select or automatically assign the correct alternateCallerId based on the recipient's country code.

For more details on configuring ACS with React, refer to the following resources:

• Microsoft Documentation
• Stack Overflow

Hope this helps.

If the answer is helpful, please click Accept Answer and kindly upvote it. If you have any further questions about this answer, please click Comment.

Answer 2

Hi Sampath.

Your answer with the included code sample is very helpful and clear.

Exactly what I needed to know.

Thanks,

Dylan.

Answer 3

Hi Sampath.

Your answer with the included code sample is very helpful and clear.

Exactly what I needed to know,

Thanks,

Dylan.