Group Calling Sample

Browse code

Overview

This is a sample application to show how we can use the @azure/communication-react package to build a calling experience. Learn more about the Azure Communication Services UI Library. The client-side application is a React based user interface. Alongside this front-end is a NodeJS web application powered by ExpressJS that performs functionality like minting new user tokens for each call participant.

Additional documentation for this sample can be found on Microsoft Docs.

Before contributing to this sample, please read our contribution guidelines.

❤️ Feedback

We appreciate your feedback and energy helping us improve our services. If you've tried the service, please give us feedback through this survey.

Prerequisites

• Visual Studio Code (Stable Build)
• Node.js (12.18.4 and above)
• Create an Azure account with an active subscription. For details, see Create an account for free.
• Create an Azure Communication Services resource. For details, see Create an Azure Communication Resource. You'll need to record your resource connection string for this quickstart.

Code structure

• ./Calling/src/app: Where the client code lives
• ./Calling/src/app/App.tsx: Entry point into the calling sample
• ./Calling/src/app/views/HomeScreen.tsx:
• ./Calling/src/app/views/CallScreen.tsx:
• ./Calling/src/app/views/EndCall.tsx:
• ./Calling/src/app/views/UnsupportedBrowserPage.tsx:
• ./Server: server code
• ./Server/appsettings.json: Where to put your azure communication services connection string

Before running the sample for the first time

1. Open an instance of PowerShell, Windows Terminal, Command Prompt or equivalent and navigate to the directory that you'd like to clone the sample to.

   git clone https://github.com/Azure-Samples/communication-services-web-calling-hero.git
   

2. Get the Connection String from the Azure portal. For more information on connection strings, see Create an Azure Communication Resources

3. Once you get the Connection String, add the connection string to the samples/Server/appsetting.json file. Input your connection string in the variable: ResourceConnectionString.

• There are two other properties in the appsettings.json file (EndpointUrl, AdminUserId). For the Calling Hero Sample these two properties are unnecessary. We use this file with our chat hero sample and that is where those strings are used.

Local run

1. Install dependencies

   npm run setup
   

2. Start the calling app

   npm run start
   

   This will open a client server on port 3000 that serves the website files, and an api server on port 8080 that performs functionality like minting tokens for call participants.

Troubleshooting

1. The app shows an "Unsupported browser" screen but I am on a supported browser.

   If your app is being served over a hostname other then localhost, you must serve traffic over https and not http.

Publish to Azure

1. npm run setup
2. npm run build
3. npm run package
4. Use the Azure extension and deploy the Calling/dist directory to your app service

Additional Reading

• Azure Communication Services - UI Library - To learn more about what the @azure/communication-react package offers.
• Azure Communication Calling SDK - To learn more about the calling web sdk
• FluentUI - Microsoft powered UI library
• React - Library for building user interfaces

Data Collection

The software may collect information about you and your use of the software and send it to Microsoft. Microsoft may use this information to provide services and improve our products and services. This samples collect information about users and their use of the software that cannot be opted out of. Do not use this sample if you wish to avoid telemetry. You can learn more about data collection and use in the help documentation and Microsoft’s privacy statement. For more information on the data collected by the Azure SDK, please visit the Telemetry Policy page.