Multiple Video/Voice Sessions

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.