Video chat is a great way to keep in touch with the people you care about or collaborate with others remotely. Perhaps you've always wanted to build your own video chat application but were unsure where to start. Well, you have come to the right place!

In this tutorial, you will learn how to build your own video chat application using Twilio Programmable Video, Ruby, and JavaScript. The server-side part of the project will be built using Ruby and the Sinatra microframework, while the client side is going to be built with vanilla JavaScript, HTML, and CSS. Sinatra is a lightweight, flexible framework for building Ruby applications. It is also a great place to get started if you are new to Ruby development.

Prerequisites

• A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
• Ruby version 3.0.0+ …

Do you use Twilio Programmable Video for your video meetings? One of the many optional features is to enable recording of your video rooms. When recording is enabled, each participant's audio and video are recorded in separate tracks. You can then use the Compositions API to combine these tracks into a single playable video that will be compatible with most common media players.

In this tutorial, you will learn how to build a quick application for creating, viewing, and downloading your video compositions using the Compositions API, Python, and the Flask web framework. Let's get started!

Prerequisites

• Python 3.6 or newer. If your operating system does not provide a Python interpreter, you can go to python.org to download an installer.
• A Twilio account. If you are new to Twilio click here to create a free account now and receive $10 credit when you upgrade to a paid account. You can …

Bom, você criou uma API de vídeo com o Programmable Video da Twilio, o Node.js, o TypeScript e o Express. Você adicionou suporte CORS para que seu futuro aplicativo de vídeo seja capaz de acessar recursos em seu servidor. O que vem a seguir?

Para que os usuários possam realmente se conectar às salas de vídeo em seu aplicativo, eles precisarão ser autenticados usando um token de acesso. Neste tutorial, você atualizará sua API de vídeo Express + TypeScript para adicionar uma nova rota que concede tokens de acesso aos usuários do seu app de vídeo. Vamos começar!

Pré-requisitos

Você precisará de:

• Uma conta gratuita na Twilio. (Cadastre-se aqui e faça o upgrade para uma conta paga, recebendo $ 10 em crédito da Twilio!)
• Node.js (versão 14.16.1 ou mais recente) e npm instalados na sua máquina.
• HTTPie ou cURL.
• O código do tutorial anterior (veja abaixo).

O restante deste …

Realtime user interaction is a great way to enhance the communication and collaboration capabilities of a web application. Video chat is an obvious choice for sales, customer support, and education sites, but is it practical to implement? If you’re developing with Angular on the frontend and ASP.NET Core for your server, Twilio Programmable Video enables you to efficiently add robust video chat to your application.

This post will show you how to create a running video chat application using the Twilio JavaScript SDK in your Angular 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 publish and subscribe to participant audio and video tracks.

To learn how to build the same app with previous language and framework versions, see these posts:

• Building a Video Chat App with ASP.NET …

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 …

Have you ever been in a video meeting that was being recorded? It's great to be able to catch up on a meeting you may have missed or to refer back to a great conversation you had via video chat. Recording a video call can also be a great way to make your content and conversations more accessible in general by providing participants with a way to play back the conversation at their own pace.

With Twilio Programmable Video, you can enable recording for your video rooms. When recording is enabled, each participant's audio and video are recorded in separate tracks. You can use the Compositions API to combine these tracks into a single playable video that will be compatible with most common media players.

In this tutorial, you will learn how to build a quick application for creating, viewing, and downloading your video compositions using the Compositions API, …

In the previous tutorial, you built out the server side of a video application that will also allow you to create breakout rooms. Now it’s time to build out the client side of your application using React and TypeScript.

By the end of this tutorial, you will be all set up to create and use breakout rooms in your video application.

Let's get started!

Prerequisites

You will need:

• A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
• Node.js (version 14.16.1 or higher) and npm installed on your machine.
• HTTPie or cURL.
• The code from the previous tutorial. (See the following step for details.)

Get the starter code

If you have just completed the previous tutorial, you already have the updated server-side code you need and can skip to the next section.

However, if you …

Have you ever attended a video meeting, conference, or class and had the opportunity to join a breakout room? Video breakout rooms are a great way to create space for smaller group discussion and collaboration alongside a larger-group video call.

In this tutorial and the one that follows it, you'll build a video chat application that allows you to create breakout rooms alongside your main video room.

By the end of this first tutorial you will have:

• A server that handles your API calls to the Twilio Video APIs and communicates with your local database.
• A database set up to store the associations between main rooms and breakout rooms.

Let's get started!

Prerequisites

You will need:

• A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
• Node.js (version 14.16.1 or higher) and npm installed on your machine.
• HTTPie …

When milliseconds matter, low-latency WebRTC is the go-to protocol for real-time communication. It is being used by billions to communicate via video, distribute live content, and even to control remote vehicles and other objects. However, it wasn’t until this year that the World Wide Web Consortium (W3C) and the Internet Engineering Task Force (IETF) announced that WebRTC is an official standard. WebRTC is still evolving.

Improvements to WebRTC continue, which will help solve problems like convergence among browsers and devices as they move towards performing similar tasks and being used to interact with some of the same kinds of content. Developers love Twilio Programmable Video because it simplifies WebRTC usage, but differences between browsers and operating systems can still be challenging.

For this reason (and many others), when you are building WebRTC applications in production, your best friends are testing and troubleshooting. This post will focus on troubleshooting. I will …

Have you ever tried adding a filter to your face on a popular social media app? Maybe you’ve had the fun experience of adding a silly hat, cool glasses, or cat ears to your selfie or video chat.

If you have tried one of these filters, perhaps you have also wondered how this technology works. These apps rely on face detection software to locate your face in the photo or video input and map images over specific parts of the face.

In this tutorial, you will learn how to add filters with face detection to a video conference application written in TypeScript using Twilio Programmable Video, React, React Hooks, and FaceAPI.