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

Question

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>

Answer 1

@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