Using adapters with UI components

[alkwa-msft]

Using adapters with UI components

Customers want to use the UI Library but they may find they want to work directly with components over the composites. We suggest using the adapter instead of working directly with the SDK as we have provided additional functionality. (e.g being able to start a call with your camera on). By the end of this guide you should be able to create your own prototype code
using UI components and the adapter from the UI Library.

In this Show+Tell we are going to share:

1. Setting up the UI Library "adapter" in a useEffect block. *Demonstrative not meant for production loads
2. Setup UI Library providers for UI components to automatically connect to your ACS Calling SDK state
3. Use the adapter to join a call

Setting up the UI Library "adapter" in a useEffect block. *Demonstrative not meant for production loads

we are using useState hooks for callClient, callAgent, adapter, and call.
e.g const [callClient, setCallClient] = useState<StatefulCallClient | undefined>(undefined);

  useEffect(() =>{
    (async() => {
      let statefulCallClient = createStatefulCallClient({userId: {communicationUserId: '0-343a0d00a507'}});
      const token = 'eyJ....0LMBbENXg';
      const tokenCredential = new AzureCommunicationTokenCredential(token);
      const callAgent = await statefulCallClient.createCallAgent(tokenCredential, { displayName: 'JohnSmith'})
      const adapter = await createAzureCommunicationCallAdapterFromClient(statefulCallClient, callAgent, {groupId: '82a47940-1234-11ee-8dbd-a99742a55c54'} )
      setCallClient(statefulCallClient);
      setCallAgent(callAgent);
      setAdapter(adapter);
      initializeIcons();
      setCall(adapter.joinCall({cameraOn: true, microphoneOn: false}));
    })();
  }, [])

Setup UI Library providers for UI components to automatically connect to your ACS Calling SDK state

We need to 4 providers (3 for calling and 1 for fluent)

• CallClientProvider is a provider which allows the descendent components a reference to the callClient. *When we refer to the callClient in the UI library we are really referring to the statefulCallClient. To learn more please check out this link
• CallAgentProvider is a provider which allows the descendant components a reference to the callAgent. This callAgent reference needs to be created from the statefulCallClient reference.
• CallAgentProvider is a provider which allows the descendant components a reference to the call object.
• FluentThemeProvider is a provider used by FluentUI based components which we use under the hood. If you do not use this provider all of the components will not have any default styling we provide through the UI Library.

<CallClientProvider callClient={callClient}>
  <CallAgentProvider callAgent={callAgent}>
    <CallProvider call={call}>
      <FluentThemeProvider>
        { /** You should put the ACS UI components under the FluentThemeProvider */
      </FluentThemeProvider>
    </CallProvider>
  </CallAgentProvider>
</CallClientProvider>

Use the adapter to join a call

We leverage the joinCall options from the UI Library to start with your camera on if you have a camera connected to your computer and it is available and ready to be used. You can learn more about the Calling adapter here

adapter.joinCall({cameraOn: true, microphoneOn: false})

We expose all major functionality through the adapter. In this show+tell we are using it to join the group call. Other interesting ideas you can use the adapter with:

• Create your own buttons to control microphone, camera, screenshare, blur background
• Register to calling events to interact with your own application's behavior (e.g do something when we leave a call such as removing the UI)
• You can create your own call screen UI and connect it to the functionality exposed through the adapter

The whole app.tsx together to try out

We have also added a whole code block to paste into an app.tsx of a create-react-app. You just need to enter in your own userId, token, and groupId to try out this snippet

import  React, { useEffect, useState } from  'react';
import  hero  from  './hero.svg';
import  './App.css';

import { CallAdapter, CallAgentProvider, CallClientProvider, CallProvider, FluentThemeProvider, StatefulCallClient, createAzureCommunicationCallAdapterFromClient, createStatefulCallClient, VideoGallery, usePropsFor } from  '@azure/communication-react';
import { Call, CallAgent } from  '@azure/communication-calling';
import { AzureCommunicationTokenCredential } from  '@azure/communication-common';
import { initializeIcons} from  '@fluentui/react';

const  TestComponent  = () => {
const  props  =  usePropsFor(VideoGallery);
return  <div  style={{width:1000, height:1000}}><VideoGallery  {...props}  /></div>
}

function  App() {

const [callClient, setCallClient] =  useState<StatefulCallClient  |  undefined>(undefined);
const [callAgent, setCallAgent] =  useState<CallAgent  |  undefined>(undefined);
const [adapter, setAdapter] =  useState<CallAdapter  |  undefined>(undefined);
const [call, setCall] =  useState<Call  |  undefined>(undefined);

useEffect(() =>{
	(async() => {
		let  statefulCallClient  =  createStatefulCallClient({userId: {communicationUserId:  '0-343a0d00a507'}});
		const  token  =  'eyJ....0LMBbENXg';
		const  tokenCredential  =  new  AzureCommunicationTokenCredential(token);
		const  callAgent  =  await  statefulCallClient.createCallAgent(tokenCredential, { displayName:  'JohnSmith'})
		const  adapter  =  await  createAzureCommunicationCallAdapterFromClient(statefulCallClient, callAgent, {groupId:  '82a47940-1234-11ee-8dbd-a99742a55c54'} )
		setCallClient(statefulCallClient);
		setCallAgent(callAgent);
		setAdapter(adapter);
		initializeIcons();
		setCall(adapter.joinCall({cameraOn:  true, microphoneOn:  false}));
	})();
}, [])

return (
	<div>
		{ !callClient && <div>Setting up adapter</div>  }
		{  callClient && callAgent && call && <CallClientProvider  callClient={callClient}>
			<CallAgentProvider  callAgent={callAgent}>
				<CallProvider  call={call}>
					<FluentThemeProvider>
						<TestComponent  />
					</FluentThemeProvider>
				</CallProvider>
			</CallAgentProvider>
		</CallClientProvider>  }

	</div>
	);
}

export  default  App;