Group Calling Sample
This is a sample application to show how the ACS Calling Web SDK can be used to build a group calling experience. The client-side application is a React based user interface which uses Redux for handling complex state while leveraging Microsoft Fluent UI. Powering this front-end is a C# web application powered by ASP.NET Core to connect this application with Azure Communication Services.
Additional documentation for this sample can be found on Microsoft Docs.
Prerequisites
- Create an Azure account with an active subscription. For details, see Create an account for free
- Node.js (12.18.4 and above)
- Visual Studio (2019 and above)
- .NET Core 3.1 (Make sure to install version that corresponds with your visual studio instance, 32 vs 64 bit)
- 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/ClientApp: frontend client
- ./Calling/ClientApp/src
- ./Calling/ClientApp/src/Components : React components to help build the client app calling experience
- ./Calling/ClientApp/src/Containers : Connects the redux functionality to the React components
- ./Calling/ClientApp/src/Core : Containers a redux wrapper around the ACS Web Calling SDK
- ./ClientApp/src/index.js : Entry point for the client app
- ./Calling/ClientApp/src
- ./Calling/Controllers : Server app core logic for client app to get a token to use with the ACS Web Calling SDK
- ./Calling/Program.cs : Entry point for the server app program logic
- ./Calling/Startup.cs : Entry point for the server app startup logic
Before running the sample for the first time
- 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
- Get the
Connection String
from the Azure portal. For more information on connection strings, see Create an Azure Communication Resources - Once you get the
Connection String
, add the connection string to the Calling/appsetting.json file found under the Calling folder. Input your connection string in the variable:ResourceConnectionString
.
Locally deploying the sample app
- Go to Calling folder and open
Calling.csproj
solution in Visual Studio - Run
Calling
project. The browser will open at localhost:5001
Troubleshooting
-
Solution doesn't build, it throws errors during NPM installation/build
Clean/rebuild the C# solution
Publish to Azure
- Right click the
Calling
project and select Publish. - Create a new publish profile and select your app name, Azure subscription, resource group and etc.
- Before publish, add your connection string with
Edit App Service Settings
, and fill inResourceConnectionString
as key and connection string (copy from appsettings.json) as value
Additional Reading
- Azure Communication Calling SDK - To learn more about the calling web sdk
- Redux - Client-side state management
- FluentUI - Microsoft powered UI library
- React - Library for building user interfaces
- ASP.NET Core - Framework for building web applications