How can you access the call interface in the React UI components or composites so to control access and retrieval from the lobby for admit and reject

[xtianus79]

This is a bit confusing because there are multiple libraries going on here that seemingly overlap. the 2 JS libraries of concern are:

@azure/communication-calling @azure/communication-react

The concept of the lobby is only with teams but even there I don't see how one would use it.

In the documentation here it illustrates how to determine a participants callstate or remoteparticipantstate.

Start lobby operations To admit, reject or admit all users from the lobby, you can use the admit, rejectParticipant and admitAll asynchronous APIs:

You can admit specific user to the Teams meeting from lobby by calling the method admit on the object TeamsCall or Call. The method accepts identifiers MicrosoftTeamsUserIdentifier, CommunicationUserIdentifier, PhoneNumberIdentifier or UnknownIdentifier as input.

let remoteParticipants = call.remoteParticipants; // [remoteParticipant, remoteParticipant....]

function admit(participant: MicrosoftTeamsUserIdentifier | CommunicationUserIdentifier | PhoneNumberIdentifier | UnknownIdentifier): Promise<void>
await call.admit(identifier);

What doesn't make sense here is how do you access said call or call participant as there doesn't seem to be an SDK for it. Which the react SDK seems like a wrapper mirror of the javascript sdk.

In React, I don't see anything that would access the Call Interface as is in the vanilla JS sdk. The only thing that is of interest related to a call is createStatefulCallClient which can then create and "Call Agent" with createCallAgent.

The call agent from the core docs not the react docs can at best Join a call and or subscribe to a call state.

So, for some reason React sdk can create a "Call Agent" but the React library sdk has nothing to do with the common core JS sdk. This appears to be important for the UI components and composites but it is confusing as to how or what one could do with the common core JS sdk in coordination of with the React sdk.

I want to be able to do 2 things with the call interface.

1. Admit / reject participants not using teams.
2. I want to assign the state property of type RemoteParticipantState so that I can dynamically change the state from "Connecting -> Connected" (I am assuming that is what is going on because it goes from start/join call to in the call) to "InLobby." When I am connected I should be able to designate where they are or what location/position they are in. i.e. Lobby or waiting room or otherwise. Perhaps RemoteParticipantLocationState and interface would be useful.

   type RemoteParticipantState =
   | "Idle"
   | "Connecting"
   | "Ringing"
   | "Connected"
   | "Hold"
   | "InLobby"
   | "EarlyMedia"
   | "Disconnected"

   Specifically what should be adjustable is InLobby The others seem to be a calling abstracting but "InLobby" is a location abstraction so I don't understand why it's in the same grouping. Not sure what "EarlyMedia" is doing here either.

Also, which is also confusing, is that there is the exact same abstraction for CallState

type CallState =
  | "None"
  | "Connecting"
  | "Ringing"
  | "Connected"
  | "LocalHold"
  | "RemoteHold"
  | "InLobby"
  | "Disconnecting"
  | "Disconnected"
  | "EarlyMedia"

In summary, I want to be able to locate a person's location when they join i.e. waiting room or lobby or anywhere and then have them "Admitted" into the call with React UI components and or composites without being in Teams. Is this hybrid approach possible / reasonable?

Perhaps I can do this and I am not seeing how. And the other question that would be nice to know is how exactly should I treat the common SDK versus the React SDK. They seem perhaps the can coincide with each other but not sure based on the UI documentation.

[dmceachernmsft]

Hi there @xtianus79!

So we have a couple of different ways to use the UI library that allows access to a call. but to answer your key questions, all teams interop meetings by default throw external participants into the lobby state for the organizer or other teams users to accept into the call. Unfortunately at this time if the teams call is set up to not auto allow in external user types they will land in the lobby to be admitted but you can set up your meetings to allow in external users automatically.

If you are looking to just use the UI components in your project I will direct you to this page in our storybook documentation: https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-statefulcallclient--page this talks about how to setup and use our stateful client for calling and there is also a similar page for chat.

As well if you are looking to get started with our composites you can see the call state by accessing the state in the CallAdapter by using the getState() handler on the adapter. you can see the getting started with composites here: https://azure.github.io/communication-ui-library/?path=/docs/composites-call-basicexample--basic-example

Both methods you can see who participants are in the call and other Call states.

For your questions on what different call states mean:

• EarlyMedia is when the devices and different network handshakes for the participants start, this state moves by quite fast when a participant is joining so we don't provide UI to represent this.
• inLobby is something that we use to represent the waiting room that Azure Communications Users hit when they try to join a interop call. This is not something that we see when joining and Group Call provided by ACS.
• Connecting and Ringing these are call states the user goes through when joining a call. Ringing however will only show up when directly calling another user. I would direct you to look at the Calling SDK docs on making a call, or this storybook page on our side: https://azure.github.io/communication-ui-library/?path=/docs/quickstarts-1ton--page (also has a little demo tool to try it!)

[xtianus79]

hi @dmceachernmsft thanks for the reply. What we're trying to do is actually put the person into the lobby but they're not going into the lobby their going directly into the call. For reference, we're using the ACS video calling and not the teams setup for this. I think that's the reason why. What we want to do is actually designate the participant or is not the presenter to go to the lobby first. I can think of ways to effectively do this but it would be easiest if we could control the call location designation directly. As if to say, land here. And then wait for admittance from presenter.

Is there a way to do that?

[dmceachernmsft]

Hi @xtianus79 so right now the lobby is not something that is supported in Azure Communication Services group calls so technically no. but if you are to use our public preview feature for Custom Teams Endpoint and have the lobby turned on in the meeting everyone is joining we do have some API's on the call object for accepting and rejecting participants with the call. here is some information on CTE in the UI library with our composites.

https://azure.github.io/communication-ui-library/?path=/docs/communicationasteamsuser--page

This is supported with our stateful client which you would need to do to access these API's, essentially you would replace your Azure Communication Services tokens with teams user tokens from AAD. Here's a doc about getting your teams information:

https://learn.microsoft.com/en-us/azure/communication-services/concepts/teams-endpoint

If you want to use the CallComposite and have access to the Call object directly you will need to use our special call adapter create function: createTeamsCallAdapterFromClient

the API's on the call are:

call.admit(participant: CommunicationIdentifier)
call.admitAll()
call.rejectParticipant(participant: CommunicationIdentifier)

Let me know if this helps or if there is anything else you are wondering!

[xtianus79]

hi @dmceachernmsft Let me recap. If we use the teamscall token and teams endpoint we can then turn on the "lobby." A couple questions from this:

1. Can we use the UI components rather than the composites still for the teams capability or does it have to be the composite?
2. The perspective and tokens from an AAD user rather than ACS type of token. Or customers will be on B2C and we are managing their ACS tokens and ID. Our AD users are more of a guest user or contracted user (albeit the presenter). Not the full office365 AD user. Does that matter or will that token retrieval not work for that type of user? I guess in other words is the "Teams" call still able to happen with 2 ACS users and only the fact is they are coming into a teams call?

The reason why I ask is because this is how we are designing the interactions. b2c books call -> contractor is notified and then comes to call -> contractor lets b2c user in call. Will the user from B2C (ACS ID) be able to join with no issue and can we still control the UI through components rather than composites?

If the 2 questions above are a UI components and 2 ACS users going into a teams meeting. Then this could work!

Thanks for all your help in navigating this.

[dmceachernmsft]

To your first question: yes our work for Custom teams endpoint does work with the stateful client and components. In our API you can see in the StatefulCallClientArgs we allow you to construct the client with a teams user identifier making it a CTE session. Then you would create a component application with no composites like in some of our other tutorials (I recommend this one if you want more information about how to do that: https://github.com/Azure-Samples/communication-services-javascript-quickstarts/tree/main/ui-library-starting-with-calling-stateful)

The second one is possible if whatever service is booking the call sets up the meeting so that external users can join the call. However in this instance if both users are ACS users and not CTE then they are just allowed to join and the lobby will be turned off so both users will just be able to join.

For the AD token let me talk with the engineer who developed the feature. I will find out if there is any type of teams user that cannot use CTE.

[dmceachernmsft]

So the best solution at the moment to try would be to check out our docs here on our composite experience and CTE https://azure.github.io/communication-ui-library/?path=/docs/communicationasteamsuser--page

WIthout knowing too much about your teams accounts and their tenants the best thing to try would be the identity quickstart for retrieving tokens here: https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/manage-teams-identity?pivots=programming-language-javascript

you should be able to do CTE with your teams users if this quickstart works for your teams accounts.

Please let us know if you have more questions 😊

[xtianus79]

@dmceachernmsft Thanks I will implement and let you know how it goes.

[dmceachernmsft]

Going to close since long time since last update. Please feel free to reopen if you have further questions! 😊