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.
- 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.
-
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 and clone the repo.
git clone https://github.com/Azure/communication-ui-library.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 samples/Server/appsetting.json file. Input your connection string in the variable:ResourceConnectionString
.
-
Install dependencies
npm install
-
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.
- 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