hi @jimchou-dev , We are using facing issue with display name using Team user.

[tayloramitverma]

          hi @jimchou-dev , We are using facing issue with display name using Team user.

We are following same react dependencies and your demo code as shared on above.

Some code sample:

` import { createAzureCommunicationCallAdapter, } from "@azure/communication-react";

createAzureCommunicationCallAdapter({ userId: { communicationUserId: acsID }, //displayName: accounts[0].name, credential: new AzureCommunicationTokenCredential({ refreshProactively: true, token: acsToken, tokenRefresher: async () => { const refreshedToken = await getCommunicationTokenForTeamsUser(); return refreshedToken.acsToken; }, }), endpoint: endpoint, locator: { meetingLink: meetingLink }, }) `

Above code is not taking displayName and throw error if we add displayName property:

Without passing display name, we are not getting name in remote participants list using SDK.

In above you can see both participants are joined using our web version and here display name is missing.

Can you please review and share your views. Thanks

Originally posted by @tayloramitverma in https://github.com/Azure/communication-ui-library/issues/3175#issuecomment-1611080271

[PorterNan]

Hi, thanks for posting the issue, the teams token log in is currently beta-only feature ,which you can find here https://azure.github.io/communication-ui-library/?path=/docs/communicationasteamsuser--page

We provide another another factory function useTeamsCallAdapter and createTeamsCallAdapter for you to pass in teams token, please take a try and let us know if you have any problems

One more additional tip here: For teams user, our SDKs don't support getting teams displayName directly - so you might need to pull teams user displayName by your own code and provide them as a callback function in adapter option:

https://github.com/Azure/communication-ui-library/blob/main/packages/communication-react/review/beta/communication-react.api.md#:~:text=onFetchProfile%3F%3A%20OnFetchProfileCallback%3B

[mgwojciech]

Hello, I'm using 1.5.1-beta.1 as suggested in docs. I can join the call as a Teams user only if I'm the only one there. If anyone else joins browser freezes. I'm running it from localhost, nothing in console. I copy pasted code from sample. Does anyone face similar issue?.

One more question. Will the be support for useTeamsCallWithChatAdapter?

Thanks

[PorterNan]

Would you provide a complete code piece for your component, including your setup of displayName callback function? It might be some infinite re-render problem according to your description.

For useTeamsCallWithChatAdapter, currently chat sdk does not support log in as teams user, so at least we will have to wait for support from the chat sdk side

[mgwojciech]

Hi, You are right - looks like there was some loop in place. I removed useCallback wrapper around getDisplayName and it started working.

[dmceachernmsft]

Seems this issue was resolved, closing. Please reopen if you need anything else! 😊

[tayloramitverma]

@dmceachernmsft & @PorterNan We are using callback function to render or resolve display name issue but it will freeze browser. I have tested it with both hook method createAzureCommunicationCallAdapter & createTeamsCallWithChatAdapter.

My code is here:

`/**---------------------------------------------------------------------------------------------

• Copyright (c) Microsoft Corporation. All rights reserved.
• Licensed under the MIT License. See LICENSE.md in the project root for license information. ---------------------------------------------------------------------------------------------/

import React, { useState, useEffect } from "react"; import { AzureCommunicationTokenCredential } from "@azure/communication-common"; import { CallClientProvider, CallAgentProvider, CallProvider, CallComposite, createAzureCommunicationCallAdapter, } from "@azure/communication-react"; import { CallScreen } from "./CallScreen"; import { endpoint } from "../authConfig"; import { Spinner } from "@fluentui/react/lib/Spinner"; import "./../styles/callScreen.css"; import { useSwitchableFluentTheme } from "./../theming/SwitchableFluentThemeProvider";

let updatedAdapter = true;

export const TestCallTeamsUserContent = ({ teamTokens, meetingLink, endCall, }) => { const [call, setCall] = useState(""); const [callAdapter, setCallAdapter] = useState(null); const [callState, setCallState] = useState(false); const [statefulCallClient, setStatefulCallClient] = useState(); const [callAgent, setCallAgent] = useState(); const { currentTheme, currentRtl } = useSwitchableFluentTheme();

const inCallUser = !![ "Connecting", "Connected", "Disconnecting", "InLobby", ].includes(callState);

useEffect(() => { if ( teamTokens && teamTokens?.acsToken !== "" && teamTokens?.communicationUserId !== "" && callAdapter === null && updatedAdapter && meetingLink !== "" ) { updatedAdapter = false;

  createAzureCommunicationCallAdapter({
    userId: { communicationUserId: teamTokens?.communicationUserId },
    //displayName: accounts[0].name,
    credential: new AzureCommunicationTokenCredential({
      refreshProactively: true,
      token: teamTokens?.acsToken,
      tokenRefresher: async () => {
        const refreshedToken = await getCommunicationTokenForTeamsUser();
        return refreshedToken.acsToken;
      },
    }),
    endpoint: endpoint,
    locator: { meetingLink: meetingLink },
  })
    .then((adapter) => {
      setCallAdapter(adapter);
      setStatefulCallClient(adapter.callClient);
      setCallAgent(adapter.callAgent);

      adapter.callAgent.on("callsUpdated", (e) => {
        e.added.forEach((c) => {
          setCall(c);
        });
      });
    })
    .catch((error) => console.log(error));
}

}, [teamTokens, callAdapter, meetingLink]);

useEffect(() => { if (call) { call.on("stateChanged", () => { setCallState(call.state); }); } }, [call]);

useEffect(() => { const destroyCall = async () => { try { callAdapter && callAdapter?.dispose(); setCallAdapter(null); setStatefulCallClient(""); setCall(""); setCallAgent(""); updatedAdapter = true; endCall(); window.parent.postMessage("CallIsTerminated", ""); } catch (error) { console.log(error); endCall(); window.parent.postMessage("CallIsTerminated", ""); } };

if (callState === "Disconnected") {
  destroyCall();
}

}, [callState]);

if (callAdapter) { return ( <div className="call-container" style={{ width: "100vw", height: "100vh" }}

{!inCallUser ? ( <CallComposite adapter={callAdapter} fluentTheme={currentTheme.theme} /> ) : ( statefulCallClient && (

) )}

[AjayBathini-MSFT]

@PorterNan Can you add your inputs to the above comments by @tayloramitverma

[mgamis-msft]

Hi @tayloramitverma, could you try to update your code to use options.onFetchProfile property of AzureCommunicationCallAdapterArgs similar to below:

  const adapterOptions = useMemo(
    () => ({
      onFetchProfile: async (userId: string, defaultProfile?: Profile): Promise<Profile | undefined> => {
         if (userId === accounts[0].id) {
             return { displayName: accounts[0].name };
         }
         return defaultProfile;
      };
    }),
    []
  );

  createAzureCommunicationCallAdapter({
    userId: { communicationUserId: teamTokens?.communicationUserId },
    credential: new AzureCommunicationTokenCredential({
      refreshProactively: true,
      token: teamTokens?.acsToken,
      tokenRefresher: async () => {
        const refreshedToken = await getCommunicationTokenForTeamsUser();
        return refreshedToken.acsToken;
      },
    }),
    endpoint: endpoint,
    locator: { meetingLink: meetingLink }
    options: adapterOptions
  })

Please also ensure you use version 1.7.0-beta.1 or later of @azure/communication-react library so that the browser freeze won't occur.

[amitverma-work]

@mgamis-msft I did same

here is more updates: https://github.com/Azure/communication-ui-library/issues/3341