/acsauth

Deploy in less than 10 min an Azure Communication Services sample to be shared & tested with your colleagues & friends

Primary LanguageJavaScriptMIT LicenseMIT

Azure Communication Services Quick Starter

Azure Communication Services (ACS) is a set of rich communication APIs, video APIs, and SMS APIs for deploying your applications across any device, on any platform. If you’re looking on enabling chat, audio/video conferencing, phone calls or SMS inside an existing app, you should have a look to this service. Please read our ACS documentation to know more.

This repo is used as a starter for a very basic HTML web application using no front-end frameworks. It shows how to map an identity provided by a Static Web App (Github, Microsoft, Twitter or Google) to an ACS identity. You can then deploy this sample is a couple of minutes following the instructions below and share the URL to the web app to do calls to another user using ACS or to join a Microsoft Teams meeting like described in this video:

Watch the video

This repo also contains a more advanced Metaverse demo allowing to call someone in Teams from a VR environment running in the browser like demonstrated in this short video:

Watch the video

How to deploy the sample in minutes

You've got 2 options:

Step 1 - copy this repo in your Github repositories

First, you need to be logged in on Github and then press on the green "use this template" button:

Use This Template Button

Then fill the required properties, be sure to make it public and press "Create repository from template" button:

Creating the repo from the template

Step 2 - provision all required resources using the 'Deploy To Azure' button

This will copy this repo into your Github account. Simply click on the "Deploy To Azure" button below (ctrl+click to open it in a separate tab to avoid loosing instructions):

Deploy To Azure

In the various regions you'll choose, this will create a dedicated resource group (named rg-yourname) and will automatically deploy inside it:

Step 3 - Grab the Static Web App deployment token from the Azure Portal

Once completed, you'll have a similar screen indicating your deployment is complete:

Template deployment completed screen

We're almost done! We now need to associate your Github repo with the freshly provisioned Azure Static Web App. For that, open the new resource group just created by clicking on it. It should be named "rg-yourname" like in the above screenshot. You'll then see the 3 resources created inside this resource group:

3 resources created: a Communication Service, a Cosmos DB & a Static Web App

Click on the Static Web App named "sttapp-yourname" then click on the "Manage deployment token" button and copy to the clipboard the secret token.

Azure SWA deployment token screen

Step 4 - Copy the Static Web App deployment token as a secret in your Github repo

Now to be able to run your GitHub Actions workflow to deploy the ACS sample demonstrated in the videos, you need to store the Static Web App deployment token in a secret value named AZURE_STATIC_WEB_APPS_API_TOKEN. For that, go into the Settings of your Github repo and then navigate to the Secrets->Actions section to create a New repository secret key.

Github secret key for SWA deployment

Step 5 - Run the Github Actions deployment workflow

You finally need to run the workflow configured in this repo to deploy the code of the SWA to your Azure subscription. There are various ways to do that as the workflow is listening for either push to the main branch or Pull Request.

The easier way: simply do a fake commit to the readme.md file and this will trigger the deployment:

Github Actions workflow completed screen

Once the workflow succeeded, navigate to the SWA URL that can be found in your Azure Portal:

Navigating to the URL of the Static Web App from the Azure Portal

And you should now be able to run the same demo as shown in this YouTube video.

Still lost? Please check this step-by-step tutorial video.

To know more about those samples, please read this blog article: [AVAILABLE SOON]

Concepts used in this sample

Azure Communication Services

Azure Static Web App

Metaverse demo

Once deployed, the VR / metaverse demo will be available under /vr.html

Screenshot of the Metaverse sample calling someone else in ACS

It works the same as the previous demo. You can either call someone using ACS or call someone inside a Microsoft Teams meeting. You can move inside the 3D scene using the arrows key (like a FPS game) or a gamepad controller. If launched in VR, you can use the VR controllers to teleport yourself like a classical VR game.

Note: it uses a trick to replace on the fly the video feed of the selected webcam by a stream of the WebGL canvas as this scenario is currently not supported out of the box by the ACS SDK. You then need a webcam available on the device that will render the 3D scene.

To be able to replay as-is the demo showcased in this YouTube video, you need a WebXR compatible headset & browser. I’ve used my Valve Index inside Microsoft Edge in the demo.

This demo uses the Babylon.js WebGL engine supporting WebXR out of the box.

Going Further

Running it on your dev machine

If you clone the repo on your developer machine, here are the steps to make it works:

  • npm install -> this will install Webpack, some Azure Communication Services modules & the Azure Static Web App simulator & CLI
  • Rename local.settings.sample.json to local.settings.json and fill the 2 properties with the Azure Communication Services & CosmosDB connection strings you'll find in the Azure Portal
  • npm start -> this will start the Static Web App on http://localhost:4280
  • npm run build -> if you'd like to modify the code of videocalls.js, videocallsvr.js & testacs.js and bundle them with Webpack

Credits

I'd like to thank Justin Yoo for his precious help on building the deployment scripts & logic of this repo. If you're interested in building similar deployments from your repo, Justin has written an awesome technical article about the job he's done: Azure Apps Autopilot.