In this article, you’ll learn to use TypeScript and  Twilio Programmable Video to build a video chatting application with a dominant speaker display. You’ll use an existing base project making use of the Twilio  Programmable Video JavaScript SDK (for front-end video) and the  Twilio Node Helper Library (for back-end authentication) and retrofit it to support dominant speaker detection.

This article is a continuation of my last one,  Add Muting and Unmuting Capability to your Twilio Programmable Video App with TypeScript, and it will build off the “ adding-mute-unmute” branch of this  GitHub Repository. To see the final code, visit the “adding-dominant-speaker-detection” branch.

Twilio Programmable Video is a suite of tools for building real-time video apps that scale as you grow, from free 1:1 chats with WebRTC to larger group rooms with many participants. You can  sign up for a free Twilio account to get started using Programmable Video.

TypeScript is an extension of pure JavaScript - a “superset” if you will - and adds static typing to the language. It enforces type safety, makes code easier to reason about, and permits the implementation of classic patterns in a more “traditional” manner. As a language extension, all JavaScript is valid TypeScript, and TypeScript is compiled down to JavaScript.

Parcel is a blazing-fast web configuration bundler that supports hot-module replacement and which bundles and transforms your assets. You’ll use it in this article to work with TypeScript on the client without having to worry about transpilation or bundling and configuration.

Requirements

• Node.js - Consider using a tool like  nvm to manage Node.js versions.
• A Twilio Account for Programmable Video. If you are new to Twilio, you can  create a free account. If you sign up using this link, we’ll both get $10 in free Twilio credit when you upgrade your account.

Project Configuration

Download the project files and install dependencies

Begin by cloning the “adding-mute-unmute” branch of the accompanying GitHub Repository with the command below:

git clone -b adding-mute-unmute --single-branch https://github.com/JamieCorkhill/Twilio-Video-Series

#typescript