Forum Discussion

Grahem_Cuthbetson's avatar
Grahem_Cuthbetson
Copper Contributor
Jul 28, 2023

Multiple Video/Voice Sessions

Hi Team,

 I am building a website with React 18 using the sample React projects for the Windows Communication Services components (available on StoryBoard). I would like to have multiple meetings running at the same time, but I don't see how to do that. I would have expected to pass a meetingID or something similar. I am using the useAzureCommunicationCallAdapter hook.

 

Is there an example I can see to create a CallComposite that can "be bound" to a specific meeting URL?

 

Thanks,

Grahem

1 Reply

  • Kidd_Ip's avatar
    Kidd_Ip
    MVP
    Nov 09, 2025

    To support multiple sessions, you must instantiate separate adapters and composites, each tied to a unique meeting identifier:

    Implementation Pattern in React:


    1.    Create a call locator for each meeting
    o    For ACS group calls:

    const locator = { groupId: "<GUID-for-meeting>" };


    o    For Teams meetings:

    const locator = { meetingLink: "<Teams-meeting-URL>" };


    2.    Instantiate separate adapters

    const adapter1 = useAzureCommunicationCallAdapter({
  userId,
  displayName,
  credential,
  locator: locator1
});

const adapter2 = useAzureCommunicationCallAdapter({
  userId,
  displayName,
  credential,
  locator: locator2
});


    3.    Render multiple composites

    {adapter1 && <CallComposite adapter={adapter1} />}
{adapter2 && <CallComposite adapter={adapter2} />}


    4.    Manage layout
    •    Place each composite in its own container (e.g., tabs, split screen, or modals).
    •    Ensure you handle cleanup (adapter.dispose()) when a meeting ends.

Resources