How to Use Own JavaScript Bundle CallComposite.js to Join a Teams Meeting as Teams User

Udara Chandimal 0

I am trying to use callComposite.js (https://azure.github.io/communication-ui-library/?path=/docs/composites-build-your-own-javascript-bundle--docs) to join a teams meeting as a Teams user. I can successfully join the meeting as an external user but need to join the meeting from my own teams account.
I have followed the documentation and created the necessary token and I can successfully join the meeting as a Teams user in here https://azure.github.io/communication-ui-library/?path=/story/composites-callcomposite-join-existing-call-as-teams-user--join-existing-call-as-teams-user

I just need to know how to adjust following set of code line to join the meeting as a teams user

      const callAdapter = await callComposite.loadCallComposite(
        {
          locator: { meetingLink: this.meetingURL },
          userId: { microsoftTeamsUserId: this.teamsUserIdentifier.RawId },
          token: this.accessToken,
          options: {
          }
        },
        document.getElementById('call-container'),
        {
        }
      );

Udara Chandimal 0 Reputation points

2024-11-27T05:45:25.68+00:00

I am getting this error for the above code,
Error loading call composite: Error: Microsoft Teams user identifier is not supported by AzureCommunicationCallAdapter. Instead use TeamsCallAdapter.
Laxman Reddy Revuri 875 Reputation points Microsoft Vendor

2024-11-28T08:59:31.6166667+00:00
Hi @Udara Chandimal
Thanks for the question and using MS Q&A platform.
I understand that you are trying to join a Teams meeting as a Teams user using callComposite.js, but are encountering an error.

Based on the error message you received, it appears that you need to use the TeamsCallAdapter instead of the AzureCommunicationCallAdapter to join the meeting as a Teams user.

const callAdapter = await callComposite.loadCallComposite( { adapter: new TeamsCallAdapter(), locator: { meetingLink: this.meetingURL }, userId: { communicationUserId: this.communicationUserIdentifier }, token: this.accessToken, options: { } }, document.getElementById('call-container'), { }

Please replace this.communicationUserIdentifier with the communication user identifier of the user you want to join the meeting as. You can find the communication user identifier of a user in the Azure portal or by using the Microsoft Graph API.
Ensure the use of microsoftTeamsUserId: It is essential to use the microsoftTeamsUserId when working with Teams users, rather than the communicationUserId.

Avoid Manually Instantiating TeamsCallAdapter: The loadCallComposite method will automatically create the appropriate adapter (i.e., TeamsCallAdapter when a Teams user is involved). There is no need to manually instantiate the adapter.

Verify the Token and User Information: Please ensure that the token you are using is generated for a Teams user and contains the necessary permissions (for example, Call.Join). Additionally, make sure that this.teamsUserIdentifier.RawId holds the correct Teams user identifier.
https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/identity/access-tokens?tabs=windows&pivots=platform-azportal

https://learn.microsoft.com/en-us/azure/communication-services/quickstarts/manage-teams-identity?pivots=programming-language-csharp

I hope this information is helpful.
Udara Chandimal 0 Reputation points

2024-11-28T09:55:39.5466667+00:00

Thank you for your reply @Laxman Reddy Revuri .
Can you provide the TeamsCallAdapter() function. Only function that defined in the callComposite is loadCallComposite(). By the way I am using static HTML Composite as described in here https://azure.github.io/communication-ui-library/?path=/docs/composites-build-your-own-javascript-bundle--docs

Laxman Reddy Revuri 875 Microsoft Vendor

Hi @Udara Chandimal
Import Necessary Components: Ensure that you have imported both TeamsCallAdapter and any other required components from the Azure Communication Services library.

Create and Use the Adapter: You will need to create an instance of TeamsCallAdapter and use it when loading the Call Composite.

Here is a sample code for your reference:

import { TeamsCallAdapter, CallComposite } from '@azure/communication-react';
 
// Function to initialize and load the Call Composite
async function initializeCallComposite() {
  // Ensure you have valid values for accessToken, meetingURL, and teamsUserIdentifier
  if (!this.accessToken || !this.meetingURL || !this.teamsUserIdentifier) {
    console.error("Missing necessary parameters: accessToken, meetingURL, or teamsUserIdentifier.");
    return;
  }
 
  try {
    // Create the TeamsCallAdapter
    const teamsCallAdapter = new TeamsCallAdapter(
      this.accessToken,  // Your ACS Access Token
      { meetingLink: this.meetingURL },  // Locator for the meeting
      { microsoftTeamsUserId: this.teamsUserIdentifier.RawId }  // Your Teams user ID
    );
 
    // Check if the CallComposite is loaded successfully
    const callComposite = await CallComposite.loadCallComposite(
      {
        adapter: teamsCallAdapter,  // Pass the TeamsCallAdapter here
        options: {
          // Additional options for customization can be added here, like UI customization
        }
      },
      document.getElementById('call-container'), // The container element for the composite
      {
        // Optional container options
      }
    );
 
    console.log("Call Composite loaded successfully", callComposite);
  } catch (error) {
    console.error("Error loading Call Composite:", error);
  }
}
 
// Call the function to initialize
initializeCallComposite();

Initialization of TeamsCallAdapter: Please ensure that you pass your access token and user ID accurately.

Loading the Call Composite: Use loadCallComposite() with the adapter instance included in its parameters.

HTML Container: Confirm that document.getElementById('call-container') refers to an existing HTML element where you wish to render the composite.

https://learn.microsoft.com/en-us/azure/communication-services/concepts/ui-library/ui-library-overview?pivots=platform-mobile

https://learn.microsoft.com/en-us/java/api/overview/azure/communication-common-readme?view=azure-java-stable

I hope this information is helpful.

Share via

How to Use Own JavaScript Bundle CallComposite.js to Join a Teams Meeting as Teams User

Your answer