| page_type | languages | products | ||||
|---|---|---|---|---|---|---|
sample |
|
|
This is a sample application to show how one can setup a calling architecture and setup SIP trunks using the Azure.Communication.PhoneNumbers SDK.
Also, it showcases how the Azure.Communication.CallingServer can be used to support inbound calling. Lastly, azure@communication-calling package is be used to build the a calling experience.
The client-side application is a Typescript React based user interface. Alongside this front-end is a C# ASP Core web server application that generates new user tokens, gets and sets sip trunk configurations and voice routes, redirects inbound calls to the client application, and retrieves purchased phone numbers for each Client participant. This separate server is necessary as you do not not want to make the connection string public, which gives everyone access to your Azure Communication Service resource.
- npm
- Node.js (v14)
- 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.
./Client/src: Where the client code lives./Client/src/app/App.tsx: Entry point into the Client sample./Server/: Where the C# ASP Core server code lives../Server/src/app.ts: Entry point into the Server sample./Server/appsettings.json: Where to put your azure communication services connection string./deploy: Bicep and ARM templates for automatic deployment of this app to an Azure AppService../deploy/azuredeploy.bicep: Bicep file for deployment of this app (creates a new Azure Communication Resource)../deploy/existing_resources/azuredeploy.bicep: Bicep file for deployment of this app (connects to an existing Azure Communication Resource)
- 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/t-sanderv/communication-services-web-calling-tutorialcd communication-services-web-calling-tutorial- Get a connection string by creating an Azure Communication Services resource from the Azure portal. Use the connection string as value for key
ConnectionStringinServer/appsettings.jsonfile.
- Set your connection string in
Server/appsettings.json - Open
Server/PSTNServerApp.csprojwith Visual Studio - Click
IIS Expressto start the server-side app. - Run
npm installfrom theClientdirectory - Run
npm run startfrom theClientdirectory - Open
http://localhost:5000in a browser. (Supported browsers are Chrome, Edge Chromium, and Safari)
- Documentation on how to use the ACS Calling SDK for Javascript can be found on https://docs.microsoft.com/en-gb/azure/communication-services/quickstarts/voice-video-calling/calling-client-samples?pivots=platform-web
- ACS Calling SDK for Javascript API reference documentation can be found on https://docs.microsoft.com/en-us/javascript/api/azure-communication-services/@azure/communication-calling/?view=azure-communication-services-js