🚧 Be advised we are currently working on polishing the samples in this repo. 🚧
This is a sample application to show how we can use the @azure/communication-ui
package to build a calling experience.
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 (16.19.0 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
. -
Once you get the
Endpoint
, add the endpoint string to the samples/Server/appsetting.json file. Input your connection string in the variable:EndpointUrl
. -
Get the
identity
from the Azure portal. Click onIdentities & User Access Tokens
in Azure portal. Generate a user withChat
scope. -
Once you get the
identity
string, add the identity string to the samples/Server/appsetting.json file. Input your identity string in the variable:AdminUserId
. This is the server user to add new users to the chat thread.
-
Install dependencies
npm i -g @microsoft/rush rush install
-
Start the calling app
cd samples\Calling rushx 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
- Create-React-App - Boilerplate React code to help with a majority of React style single page applications.