Forum Discussion
Grahem_Cuthbetson
Jul 28, 2023Copper Contributor
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 ru...
Kidd_Ip
Nov 09, 2025MVP
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.