Anthony Chu

When we do a live presentation — whether online or in person — there are often folks in the audience who are not comfortable with the language we're speaking or they have difficulty hearing us. Microsoft created Presentation Translator to solve this problem in PowerPoint by sending real-time translated captions to audience members' devices.

In this article, we'll look at how (with not too many lines of code) we can build a similar app that runs in the browser. It will transcribe and translate speech using the browser's microphone and broadcast the results to other browsers in real-time. And because we are using serverless and fully managed services, it can scale to support thousands of audience members. Best of all, these services all have generous free tiers so we can get started without paying for anything!

Overview

The app consists of two projects:

• A Vue.js app that is our main interface. It uses the Microsoft Azure Cognitive Services Speech SDK to listen to the device's microphone and perform real-time speech-to-text and translations.
• An Azure Function app providing serverless HTTP APIs that the user interface will call to broadcast translated captions to connected devices using Azure SignalR Service.

Today, Microsoft announced the general availability of the Azure SignalR Service bindings for Azure Functions. The bindings allow Azure Functions to integrate seamlessly with SignalR Service to broadcast real-time messages at large scale over WebSockets.

We'll take a look at how to build a browser-based, collaborative drawing app using HTML and JavaScript. Multiple people can open the app in their own browser and draw on the canvas. Changes are synchronized in real-time using Azure Functions and SignalR Service.

Java language support in Azure Functions has also recently become generally available. We'll be writing our functions in Java, but the SignalR Service bindings also work with other languages supported by Azure Functions.

Overview

There are three major components of the app: the drawing canvas, the Azure Function app, and Azure SignalR Service.

Azure Cosmos DB has a nifty change feed feature that tracks create and update events on documents in a collection. Applications, including serverless apps built with Azure Functions, can read events from the change feed and listen to new events on the change feed in real-time.

Azure SignalR Service is a managed service that allows applications to broadcast real-time messages to many connected clients over WebSockets and other supported transports.

September 24, 2018 - Azure SignalR Service is now generally available!

March 6, 2019 - SignalR Service bindings for Azure Functions are now generally available!

In this article, we'll look at how we can use Azure Functions and SignalR Service to broadcast real-time document changes in Cosmos DB to clients over WebSockets.

Overview

Here's how all the pieces fit together.

1. A document is created or updated in Cosmos DB.
2. The change or update event is automatically logged in the Cosmos DB change feed.
3. Using the Cosmos DB trigger, an Azure Function is invoked when the event appears in the change feed.
4. Using the SignalR Service output binding, the function outputs a message to SignalR Service.
5. SignalR Service sends the message to all connected clients over WebSockets.

The SignalR client SDK is available in JavaScript and .NET Standard. There's also a Java client coming soon. We'll use a simple Vue.js app in a browser for this project. Using the .NET Standard SDK, we can also build desktop apps with .NET Framework and .NET Core or mobile apps with Xamarin to receive messages from SignalR Service.

In recent years, there's been a shift towards building applications with serverless architectures. Serverless backends are typically powered by fully managed and infinitely scalable services with consumption-based pricing, such as Azure Functions and Logic Apps.

Today, Azure Storage announced the public preview of its static website hosting feature that complements serverless backends by making it easy to also host frontend single page applications (SPAs) in a fully managed, highly scalable, consumption-based service. Blob Storage has always been able to serve static assets such as HTML, CSS, and JavaScript. The static websites feature adds more traditional web server capabilities that are required to host SPAs and statically generated websites, including support for defining default and error pages.

Blazor is an experimental framework from the ASP.NET team for building SPAs using .NET instead of JavaScript. It does this by running standard .NET DLLs in the browser on top of a Mono runtime that has been compiled to WebAssembly.

• Blog post announcing Azure Storage static websites
• Documentation on the static websites feature
• ASP.NET Blazor

In this post, we'll look at how to host a standalone Blazor application with no server-side code in a Azure Blob Storage static website.

Update May 14, 2018 - The app setting WEBSITE_USE_ZIP is now WEBSITE_RUN_FROM_ZIP. This article as been updated to reflect this.

Yesterday, Azure announced a new way to deploy our applications to Azure Functions and App Service called Run-From-Zip, currently in preview. It allows us to mount the contents of a zip file into wwwroot instead of copying files into that folder.

In this article we'll take a look at how to use Visual Studio Team Services (VSTS) to build and deploy an application to Azure Functions and Azure Web Apps.