Azure Communication Services Group Call Demo on Azure Static Web App
Tags: azure
Published: 2021-03-20 04:48:44

If you want to add video, chat, SMS and telephony-over-IP to your application, **Azure Communication Services** is the good option.

This post introduces a quick sample that is Group Call demo app on Azure Static Web App.


## What is Azure Communication Services ?

[Azure Communication Services](https://azure.microsoft.com/ja-jp/services/communication-services/) is cloud-based communications services with rich communication experiences used by Microsoft Teams


## What is Azure Static Web Apps ?

[Azure Static Web App](https://azure.microsoft.com/en-us/services/app-service/static/) is a web services where you can host your application with your frontend framework such as React.js, Vue.js and more.

Backend is powered by [Azure Functions](https://azure.microsoft.com/en-us/services/functions/) that is a serverless service on Azure. 

## Prerequisites

This post uses below repository. you can `git clone` or `fork`.

{% github kemurayama/acs-group-call-demo no-readme %}

On Frontend, it uses [React.js](https://reactjs.org/).

This Application also uses [Azure Functions Python](https://docs.microsoft.com/en-us/azure/azure-functions/functions-reference-python) for creating Azure Communication Services User ID and issuing VoIP token.

### Install Tools
- [Node.js v1.14](https://nodejs.org/en/)
- [Python 3.8](https://www.python.org/)
- [Azure Functions Core Tools](https://docs.microsoft.com/ja-jp/azure/azure-functions/functions-run-local?tabs=windows%2Ccsharp%2Cbash)
- [Visual Studio Code](https://code.visualstudio.com/)
- [yarn](https://classic.yarnpkg.com/en/docs/install/#windows-stable) (Optional)

### Create Azure Communication Services

- [Create Azure Communication Services](https://docs.microsoft.com/en-us/azure/communication-services/quickstarts/create-communication-resource?tabs=windows&pivots=platform-azp)

Set Connection String value at `local.settings.json` after creating New Project for Azure Functions.

```json
{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "python",
    "COMMUNICATION_SERVICES_CONNECTION_STRING": "",
  }
}
```

## Setup Local

1. Clone This Repository
2. Run `yarn install` (or `npm install`) at repository root
3. Go to `api` folder
4. Create New Azure Functions Project. (`Ctrl + Shift + P` then choose `Azure Functions: Create New Project...`)
5. Activate virtualenv if not activated (`source .venv/bin/activate` or `\.venv\Scripts\activate`)
6. Run `pip install -r requirements.txt`
7. Open `api` by VS Code

## Start Group Call at Local

1. Run `yarn start` or `npm start`
2. Run `func host start` at api

### Create user with ACS ID

![createuser](https://keyomuradev.azureedge.net/acs/acsname.png)

### Issue VoIP Token 

![token](https://keyomuradev.azureedge.net/acs/token.png)

### Choose your Devices and Join Group Call

![deviceandjoin](https://keyomuradev.azureedge.net/acs/selectdeviceandjoin.png)

### Enjoy your group call

You can join the same group call if you input the same group call ID.

When you want to try camera in group call, you have to turn on **BEFORE** you join.

![deviceandjoin](https://keyomuradev.azureedge.net/acs/group.png)

## Deploy to Azure Static Web App

### How to deploy

Clone or Fork this repository.

Go to Azure Portal and [create Azure Static Web Apps](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=vanilla-javascript).

Choose your cloned repo and set build details.

Build Presets: React
App location: /
Api location: api
Outout location: build

### Set Up Configuration

[Set Azure Communication Services connection string on Azure Static Web App](https://docs.microsoft.com/en-us/azure/static-web-apps/application-settings).

- key: `COMMUNICATION_SERVICES_CONNECTION_STRING`
- value: Connection String Value

### Troubleshooting

If you failed something on Azure Static Web App, you can add [Application Insights](https://docs.microsoft.com/en-us/azure/azure-monitor/app/app-insights-overview)

Set environment variables in the same way.

See [API support in Azure Static Web Apps Preview with Azure Functions](https://docs.microsoft.com/ja-jp/azure/static-web-apps/apis) and [Monitor Azure Functions](https://docs.microsoft.com/en-us/azure/azure-functions/functions-monitoring) for more details.

- key: `APPINSIGHTS_INSTRUMENTATIONKEY`
- value: app instrumentation key value

You can monitor your backend API.

![appinsights](https://keyomuradev.azureedge.net/acs/appinsights.png)

## Next Steps

This application uses below libraries but the latest version of communication-calling is [`1.0.0-beta.9`](https://www.npmjs.com/package/@azure/communication-calling). 

- "@azure/communication-calling": "^1.0.0-beta.6",
- "@azure/communication-common": "^1.0.0-beta.5",

~~I will update library someday.~~

**Updated the latest libraries**

{% github kemurayama/acs-group-call-demo no-readme %}