Building a Video Chat Web App with ASP.NET Core Blazor and Twilio Video

Realtime user interaction is a great way to enhance the communication and collaboration capabilities of a web application. Video chatting with colleagues, friends, or family has become the new norm, and video chat is an obvious choice for sales, customer support, and education sites. For remote workforces, video chat improves the effectiveness of team collaboration.

But is video chat practical to implement?

If you’re developing with Blazor WebAssembly (WASM) on the front end and ASP.NET Core for your server, the answer is: Yes. Twilio Programmable Video and the Twilio helper libraries for JavaScript and .NET enable you to efficiently add robust video chat to your application.

Whether you’re building solutions for telemedicine, distance learning, or workforce engagement, Twilio has GDPR compliance and HIPAA eligibility. With Twilio Programmable Video you can build secure video applications that scale.

In this post you’ll learn how to create a fully operational video chat application using the Twilio JavaScript SDK in your Blazor single page application (SPA) and the Twilio SDK for C## and .NET in your ASP.NET Core server code. You’ll build the interactions required to create and join video chat rooms, and to publish and subscribe to participant audio and video tracks.

Prerequisites

You’ll need the following technologies and tools to build the project described in this post:

Software and services

.NET Core 3.1 SDK – version 3.1.300 or higher.
Node.js and npm – The Node.js installer also installs npm.
Visual Studio Code, Visual Studio 2019 – version 16.7.2 or higher, or another IDE compatible with the above.
Git – Needed if you’re going to clone the companion repository or use Git for source code control.
Font Awesome account – Copy your <script> tag to a safe place.
Twilio account – Sign up with this link to receive an additional $10 credit.

Hardware

To test and fully experience the completed app you’ll need the following hardware:

A connected video device, such as a laptop’s integrated webcam
A second video device, like the highly regarded Microsoft LifeCam Studio

Knowledge and experience

To get the most out of this post you should have:

Awareness of the Blazor feature of ASP.NET
Basic knowledge of Razor markup
A general understanding ofASP.NET Core, including dependency injection

There is a companion repository for this post available on GitHub. It contains the complete source code for this tutorial.

Getting started with Twilio Programmable Video

You’ll need a free Twilio trial account and a Twilio Programmable Video project to be able to build this project with the Twilio Video SDK. Getting set up will take just a few minutes.

Once you have a Twilio account, go to the Twilio Console and perform the following steps:

On the Dashboard home, locate your Account SID and Auth Token and copy them to a safe place.
Select the Programmable Video section of the Console.
Under Tools > API Keys, create a new API key with a friendly name of your choice and copy the Account SID and API Secret to a safe place.

The credentials you just acquired are user secrets, so it’s a good idea not to store them in the project source code. One way to keep them safe and make them accessible in your project configuration is to store them as environment variables on your development machine.

ASP.NET Core can access environment variables through the Microsoft.Extensions.Configuration package so they can be used as properties of an IConfiguration object in the Startup class. The following instructions show you how to do this on Windows.

Execute the following commands at a Windows or PowerShell command prompt, substituting your credentials for the placeholders. For other operating systems, use comparable commands to create the same environment variables.

setx TWILIO_ACCOUNT_SID [Account SID]
setx TWILIO_API_SECRET [API Secret]
setx TWILIO_API_KEY [SID]

If you prefer, or if your development environment requires it, you can place these values in the appsettings.development.json file as follows, but be careful not to expose this file in a source code repository or other easily accessible location.

{
  "Logging": {
    "LogLevel": {
      "Default": "Warning"
    }
  },
  "AllowedHosts": "*",
  "TwilioAccountSid":"AccountSID",
  "TwilioApiSecret":"API Secret",
  "TwilioApiKey":"SID"
}

You may want to add the appsettings.development.json file to your .gitignore for this solution to protect your credentials.

#code #tutorials and hacks #visual studio code