Make a PSTN call with UI Composites inside JavaScript-based Applications

Võ Quốc Minh 0 Reputation points
2024-06-18T07:29:39.8666667+00:00

I'm implementing PSTN calling functionality on my website (with HTML and Javascript) and I'm using UI Composites inside JavaScript-based Applications as instructed in: [azure.github.io/communication-ui-library/?path =/docs/use-composite-in-non-react-environment--page].

But I have a problem that I don't know where to pass the alternateCallerId and targetCallees so that I can make a call immediately when the [Start Call] button is pressed.

Here is my sample code:

<script src="./callcomposite.js"></script> // a prebuilt bundles that I downloaded from the website above.
<script type="module">
    const callAdapter = await callComposite.loadCallComposite(
        {
            locator: { groupId: "test-group-id" },
            displayName: "test-name",
            userId: { communicationUserId: "..." },
            token: "..."
        },
        document.getElementById('call-container'),
    );
</script>
Azure Communication Services
Azure Communication Services
An Azure communication platform for deploying applications across devices and platforms.
847 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. Grmacjon-MSFT 17,886 Reputation points
    2024-07-30T00:02:47.5666667+00:00

    @Võ Quốc Minh the code you shared initializes the Call Composite component but doesn't demonstrate how to initiate a call with alternateCallerId and targetCallees.

    To make a PSTN call immediately when the [Start Call] button is pressed, you need to pass the alternateCallerId and targetCallees parameters to the callAdapter when initializing the call.

    Here's how you can incorporate those parameters to make a call upon clicking a button:

    <button id="start-call-button">Start Call</button>
<script type="module">
  // ... existing code to load Call Composite
  const startCallButton = document.getElementById('start-call-button');
  startCallButton.addEventListener('click', async () => {
    const alternateCallerId = 'your-alternate-caller-id'; // Replace with your desired alternate caller ID
    const targetCallees = ['sip:target-number-1@contoso.com', 'sip:target-number-2@contoso.com']; // Replace with target SIP URIs
    // Initiate the call with alternateCallerId and targetCallees
    await callAdapter.startCall({ alternateCallerId, targetCallees });
  });
</script>

    Hope that helps

    -Grace

    0 comments

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.