Quickstart: Join your calling app to a Teams meeting

Important

Functionality described on this document is currently in private preview. Apply to become an early adopter by filling out the form for preview access to Azure Communication Services.

Get started with Azure Communication Services by connecting your calling solution to Microsoft Teams using the JavaScript client library.

Prerequisites

Enable Teams Interoperability

The Teams interoperability feature is currently in private preview. To enable this feature for your Communication Services resource, please email acsfeedback@microsoft.com with:

  1. The Subscription ID of the Azure subscription that contains your Communication Services resource.
  2. Your Teams tenant ID. The easiest way to obtain this is to obtain and share a link to the Team.

You must be a member of the owning organization of both entities to use this feature.

Add the Teams UI controls

Add a new text box and button within your HTML. The text box will be used to enter the Teams meeting context and the button will be used to join the specified meeting:

<!DOCTYPE html>
<html>
  <head>
    <title>Communication Client - Calling Sample</title>
  </head>
  <body>
    <h4>Azure Communication Services</h4>
    <h1>Calling Quickstart</h1>
    <input 
      id="callee-id-input"
      type="text"
      placeholder="Who would you like to call?"
      style="margin-bottom:1em; width: 200px;"
    />
    <input 
      id="teams-id-input"
      type="text"
      placeholder="Teams meeting context"
      style="margin-bottom:1em; width: 300px;"
    />
    <div>
      <button id="call-button" type="button" disabled="true">
        Start Call
      </button>
      &nbsp;
      <button id="hang-up-button" type="button" disabled="true">
        Hang Up
      </button>
         <button id="meeting-button" type="button" disabled="false">
        Join Teams Meeting
      </button>
    </div>
    <script src="./bundle.js"></script>
  </body>
</html>

Enable the Teams UI controls

We can now bind the Join Teams Meeting button to the code that joins the provided Teams meeting:

meetingButton.addEventListener("click", () => {
    
    // set display name in the meeting
    callAgent.updateDisplayName('YOUR_NAME');
    
    // join with meeting link
    call = callAgent.join({meetingLink: 'MEETING_LINK'}, {});

     // join with meeting coordinates
     call = callAgent.join({
        threadId: 'CHAT_THREAD_ID',
        organizerId: 'ORGANIZER_ID',
        tenantId: 'TENANT_ID',
        messageId: 'MESSAGE_ID'
    }, {})
    
    // toggle button states
    hangUpButton.disabled = false;
    callButton.disabled = true;
    meetingButton.disabled = true;
});

Get the meeting context

The Teams context can be retrieved using Graph APIs. This is detailed in Graph documentation.

You can also get the required meeting information from the Join Meeting URL in the meeting invite itself.

Run the code

Webpack users can use the webpack-dev-server to build and run your app. Run the following command to bundle your application host on a local webserver:

npx webpack-dev-server --entry ./client.js --output bundle.js --debug --devtool inline-source-map

Open your browser and navigate to http://localhost:8080/. You should see the following:

Screenshot of the completed JavaScript Application.

Insert the Teams context into the text box and press Join Teams Meeting to join the Teams meeting from within your Communication Services application.

Clean up resources

If you want to clean up and remove a Communication Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it. Learn more about cleaning up resources.

Next steps

For more information, see the following articles: