How to skip screens using adapter

[carocao-msft]

Hi everyone, this is a show and tell about how to skip configuration screens and end call screens when using our composite.
By using the adapter functions, you can skip configuration screen and set mic/camera default state, skip end call screen and replace it with your own custom end call experience.

Skipping Configuration Screen:

1. Call adapter.joinCall() inside function afterAdapterCreate
2. Pass afterAdapterCreate in useAzureCommunicationCallWithChatAdapter or useAzureCommunicationCallAdapter depends on what composite you are using

Current API ( Deprecated ):

Skip config screen with mic and camera maintaining precall state

  const afterAdapterCreate = useCallback(async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
    adapter.joinCall();
    return new Promise((resolve, reject) => resolve(adapter));
  }, []);

  const adapter = useAzureCommunicationCallWithChatAdapter(
    {
      userId,
      displayName,
      credential,
      endpoint,
      locator
    },
    afterAdapterCreate
  );

Skip config screen with mic on and camera maintaining precall state
Pass a boolean value to adapter.joinCall

adapter.joinCall(true) 

New API:

Skip config screen with mic and camera maintaining precall state

(joinCall(), joinCall({}), joinCall({microphoneOn: 'keep'}), joinCall({cameraOn: 'keep'} will achieve the same effect)

const afterAdapterCreate = useCallback(async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
    adapter.joinCall({ microphoneOn: 'keep', cameraOn: 'keep' });
    return new Promise((resolve, reject) => resolve(adapter));
  }, []);

  const adapter = useAzureCommunicationCallWithChatAdapter(
    {
      userId,
      displayName,
      credential,
      endpoint,
      locator
    },
    afterAdapterCreate
  );

Skip config screen with mic on and camera on

const afterAdapterCreate = useCallback(async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
    adapter.joinCall({ microphoneOn: true, cameraOn: true });
    return new Promise((resolve, reject) => resolve(adapter));
  }, []);

  const adapter = useAzureCommunicationCallWithChatAdapter(
    {
      userId,
      displayName,
      credential,
      endpoint,
      locator
    },
    afterAdapterCreate
  );

Skip config screen with mic off and camera off

const afterAdapterCreate = useCallback(async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
    adapter.joinCall({ microphoneOn: false, cameraOn: false });
    return new Promise((resolve, reject) => resolve(adapter));
  }, []);

  const adapter = useAzureCommunicationCallWithChatAdapter(
    {
      userId,
      displayName,
      credential,
      endpoint,
      locator
    },
    afterAdapterCreate
  );

Note that when configuration screen is skipped, you will need to handle precall permission settings on your own.

Skipping End Call Screen:

1. Subscribe to call end event and set a callEnded state variable
2. When callEnded is true, return your own custom end call screen, in this case we return ended
3. Return the composite otherwise

  const [callEnded, setCallEnded] = useState(false);
  const afterAdapterCreate = useCallback(async (adapter: CallWithChatAdapter): Promise<CallWithChatAdapter> => {
    adapter.on('callEnded', () => {
      setCallEnded(true);
    });
    return new Promise((resolve, reject) => resolve(adapter));
  }, []);

  const adapter = useAzureCommunicationCallWithChatAdapter(
    {
      userId,
      displayName,
      credential,
      endpoint,
      locator
    },
    afterAdapterCreate
  );

  if (callEnded) {
    return <div>Call ended</div>;
  }

[jgarplind]

For anyone else relying on cameraOn: true and having issues with the camera not turning on by itself after the permissions request has been handle, please check this issue and suggested workarounds: #4638