How to access the Call object when using Adapters

[JamesBurnside]

You may need to access to the @azure/communication-call Call object for features not yet implemented by the @azure/communication-react CallAdapters.

This can be done by altering the method used to create Adapters.

Normally to create an adapter you would use one of the following:

const adapter = useAzureCommunicationCallAdapter(args);
const adapter = createAzureCommunicationCallAdapter(args);
const adapter = useAzureCommunicationCallWithChatAdapter(args);
const adapter = createAzureCommunicationCallWithChatAdapter(args);

However, the adapter itself does not expose a reference to the underlying Call Object.

Instead you can use the create*FromClients() functions:

const adapter = createAzureCommunicationCallAdapterFromClients(args);
const adapter = createAzureCommunicationCallWithChatAdapterFromClients(args);

These require first creating the Clients that power the adapter. Here is an example on creating a CallWithChatAdapter:

async function createAdapter(args: {
    userId: CommunicationUserIdentifier;
    displayName: string;
    credential: CommunicationTokenCredential;
    endpoint: string;
    locator: CallAndChatLocator;
  }) {
    const { userId, displayName, credential, endpoint, locator } = args;
    const callClient = createStatefulCallClient({ userId });
    const callAgent = await callClient.createCallAgent(credential, { displayName: displayName });
    const chatClient = createStatefulChatClient({ userId, credential, endpoint, displayName });
    const chatThreadClient = chatClient.getChatThreadClient(locator.chatThreadId);
    const adapter = await createAzureCommunicationCallWithChatAdapterFromClients({
      callClient,
      callAgent,
      callLocator: locator.callLocator,
      chatClient,
      chatThreadClient
    });
    return { adapter };
}

The adapter can then be passed into a Composite as before:

<CallWithChatComposite adapter={adapter} />

However, by creating the adapter after creating the underlying client, you now have raw access to callClient, callAgent, chatClient, and chatThreadClient.

The callAgent.calls provides access to the ongoing calls:

const call = callAgent.calls[0];

Afterwards, this call object can be used to access features not yet exposed by the adapter, e.g.:

const mediaStatsCollector = call.feature(Features.MediaStats).createCollector();
mediaStatsCollector.on('sampleReported', (mediaStatsSample) => {
  console.log('Media Stats sample reported:', mediaStatsSample);
});
mediaStatsCollector.on('summaryReported', (mediaStatsSummary) => {
  console.log('Media Stats summary reported:', mediaStatsSummary);
});