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 2,465 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 2,465 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.

Laxman Reddy Revuri 2,465 Reputation points Microsoft Vendor

2024-11-29T15:08:44.2033333+00:00

Hi @Udara Chandimal
Following up to see if you have chance to check my previous response and help us with requested information to check and assist you further on this.
Udara Chandimal 0 Reputation points

2024-11-30T12:17:09.2933333+00:00

@Laxman Reddy Revuri Thank you for your reply. I have raised the same problem in the azure communication ui library git hub repository discussion. They have mentioned that there is an issue in that JavaScript file when we use MicrosoftUserId. They going to fix it in near soon.

1 answer

Laxman Reddy Revuri 2,465 Reputation points Microsoft Vendor

2024-12-02T08:34:42.0333333+00:00

Hi @Udara Chandimal
I'm glad that you were able to resolve your issue and thank you for posting your solution so that others experiencing the same thing can easily reference this! Since the Microsoft Q&A community has a policy that "The question author cannot accept their own answer. They can only accept answers by others ", I'll repost your solution in case you'd like to accept the answer.

Ask: How to Use Own JavaScript Bundle CallComposite.js to Join a Teams Meeting as Teams User
Solution:I have raised the same problem in the azure communication ui library git hub repository discussion. They have mentioned that there is an issue in that JavaScript file when we use MicrosoftUserId. They going to fix it in near soon.

Please don’t forget to Accept Answer and Yes for "was this answer helpful" wherever the information provided helps you, this can be beneficial to other community members.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

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

1 answer

Your answer