Level up your Twilio API skills in TwilioQuest, an educational game for Mac, Windows, and Linux. Download Now
Build the future of communications.
Start building for free

Video posts

  • By Vivian Bai
    Accelerate Your Development with the New Video Room Monitor, Now in Beta Accelerate Your Development with the New Video Room Monitor, Now in Beta

    Whether you are just starting to build with Twilio Programmable Video or are looking to optimize your application in production, access to the inner workings of your video application is essential to iterate fast and verify code changes to lead to the outcome you are looking for. You could dive into the Room object through the browser console, but the values are not updated in real-time, and it often takes many clicks to find the value you want. Furthermore, some of the metrics you need for optimizing your application aren’t easily consumable. For example, although you can get the total bytes sent for a given track after some number of clicks, what you probably want is the bitrate. And you probably want to see how it changes in real-time. As you go through the various stages of development, this process becomes cumbersome and the time it takes to access the …

    Read More
  • By Sean Coleman
    Help Your Users Help Themselves with the New Video Diagnostics App, Now in Beta Help Your Users Help Themselves with the New Video Diagnostics App, Now in Beta

    The reality when building and operating real-time video applications is that sometimes the device, software, and network conditions of your end users, variables seemingly outside your control, can negatively impact their perception of the quality of your video service. Thus, to help your customers have high-quality video experiences, it is important to take the necessary steps to ensure users are set up to have a successful first video call experience during onboarding or to be able to quickly diagnose end users' issues when they arise.

    To help you with this, we are excited to announce the release of the Video Diagnostics Web App, an open source ReactJS application demonstrating how to test a participant’s ability to have a high-quality video call with the Twilio platform - now available in Public Beta for WebRTC Go, P2P, and Group room developers. It can be used as part of onboarding or as …

    Read More
  • By Mia Adjei
    Build a Free 1:1 Video Chat Application with Twilio WebRTC Go and Ruby Build a Free 1:1 Video Chat Application with Twilio WebRTC Go and Ruby

    Have you ever wished you could build a video chat application to talk to a friend, family member, or colleague one-on-one? With Twilio WebRTC Go, you can build your own video application where two participants can video chat for free.

    In this tutorial, you will learn how to build a 1:1 video chat application with Ruby and JavaScript, and set it up to run on ngrok so you can chat with a friend. The application will consist of two parts: a vanilla JavaScript client-side application that will allow you to connect to a video room, and a Ruby/Sinatra server that will grant Access Tokens for the participants in the video chat.

    If you would like to skip ahead and take a look at the code, check out the project repository on GitHub here.

    Let's get started!

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive …
    Read More
  • By Donal Toomey
    Improve the Efficiency of Your Multi-Party Video Experiences Improve the Efficiency of Your Multi-Party Video Experiences

    A good multi-party video experience is critical for education, social, and workplace collaboration use cases, so that everyone can be part of the conversation. While the value is clear, building a performant multi-party video application for a browser or mobile device is hard. You need to create a video UI that is intuitive for your users that also delivers a great experience regardless of the device and type of network they are using.

    In 2019, we introduced the Network Bandwidth Profile API to help developers allocate bandwidth to specific participants based on the use case. Today, we are delighted to introduce the new and improved Network Bandwidth Profile API to empower developers to create multi-party applications that are more efficient with both bandwidth and CPU. This efficiency prevents users' computer fans from going haywire, improves video quality, and reduces the support burden on developers. In addition, this update provides fine-grained …

    Read More
  • By Mia Adjei
    Launch Emoji Reaction Confetti in Your Twilio Video Chat with JavaScript Launch Emoji Reaction Confetti in Your Twilio Video Chat with JavaScript

    Have you ever used social media apps where you can react to someone's video by launching emoji reaction confetti? Sometimes you don't necessarily have a comment you want to share, but you do want to respond with a smile, a thumbs up, or a heart to show how you feel about what your friend is saying.

    In this tutorial, you'll build a video application where participants can react to each other by launching emoji confetti. Participants will be able to see the emoji reactions that other people on the call are sharing, as well as share their own emoji reaction. This application will use the Twilio Video DataTrack API to share which emoji a participant has selected.

    Let's get started!

    Video chat between two yellow rubber ducks. Emoji confetti fly across part of the UI.

    Prerequisites

    • A free Twilio account. (If you register here, you'll receive $10 in Twilio credit when you upgrade to a paid account!)
    • Node.js v14+ and npm installed on your …
    Read More
  • By Mia Adjei
    Invite Collaborators to a Twilio Video Chat Using the Google Calendar API and JavaScript Invite Collaborators to a Twilio Video Chat Using the Google Calendar API and JavaScript

    Have you ever attended an online video meeting that you were able to join via a link inside a calendar invitation? With the increase in people working and socializing from home, these kinds of calendar invitations have gotten a lot more popular in the last year.

    In this tutorial, you will learn how to build an application that allows you to create Google Calendar events programmatically, with a link to a deployed Twilio Video app in their description. This will allow users to click the link and join the video call easily. You will get a chance to learn about the Google Calendar API, as well as build a JavaScript application with React and Express.

    First, you'll get set up creating a new Google Cloud project. Then, you'll create a React + Express application to interact with the Google Calendar API. Finally, you'll deploy your Twilio Video application and …

    Read More
  • By Héctor Zelaya
    FaceAPI、React Hooks、TypeScriptを使用し、Twilioビデオアプリケーションにフィルターを追加する方法 faceapi-reacthooks-ts-twilio-video-filter

    このBlogはHéctor Zelayaこちらで公開した記事を日本語化したものです。

    ソーシャルメディアアプリに映る自分の顔にフィルターをかけようとしたことはありますか?おかしな帽子や格好いいメガネ、ネコの耳などをセルフィーやビデオチャットに追加して遊んだ経験があるのではないでしょうか。

    こうしたフィルターを使用したことがある方は、このテクノロジーはどう機能しているのだろうと考えたことがあるかもしれません。このようなアプリでは、顔検出ソフトウェアを活用し、写真やビデオ入力で顔を検出し、顔の特定パーツの上に画像を配置しています。

    このチュートリアルでは、顔検出機能を使用し、ビデオ会議アプリケーションにフィルターを追加する方法を説明します。このビデオ会議アプリは、TypeScriptで書かれ、Twilio Programmable VideoReactReact HooksFaceAPIを使用しています。

    一般的に、顔認識技術は、画像やビデオ内の顔の有無を判断(検出)し、顔の詳細な情報を評価(解析)し、本人確認(認証/検証)を試みる目的で使用されます。

    このチュートリアルでは検出機能のみ使用しますが、顔認識技術を使用する際には、倫理面やプライバシーに関する懸念について十分配慮することが重要です。

    顔認識ソフトウェアを使用するアプリをリリースする場合は、ユーザーに承諾するかを尋ねる機能を必ず組み込み、顔認識ソフトウェアの使用を許可するかどうかをユーザーに決めてもらうようにします。

    顔認識その他のAIの倫理的使用についての詳細は、以下のリン …

    Read More
  • By Alberto Gonzalez Trastoy
    Twilio Videoアプリのトラブルシューティング troubleshooting twilio video app jp

    このBlogはAlberto Gonzalez Trastoyこちらで公開した記事を日本語化したものです。

    ミリ秒単位の処理が重要ないま、リアルタイムコミュニケーションの主力プロトコルは低レイテンシーのWebRTCです。ビデオやライブコンテンツの配信、遠隔操作車両やさまざまなオブジェクトの制御など、無数のユーザーにWebRTCは利用されています。World Wide Web Consortium(W3C)とInternet Engineering Task Force(IETF)は、今年ようやくWebRTCの正式な標準規格入りを発表しました。しかし、WebRTCはまだ進化の途上にあります。

    WebRTCは継続的に改善されています。ブラウザとデバイスの統合(コンバージェンス)などに関する問題が解決され、さまざまなブラウザやデバイスのどちらからでも、同様のタスクを実行したり、同じ種類のコンテンツを利用してやり取りしたりすることが可能になる見込みです。開発者がTwilio Programmable Videoを好んで使用するのは、WebRTCの利用が簡単だからです。それでも、ブラウザとオペレーティングシステム間の違いが依然として問題になることがあります。

    その他さまざまな理由から、本番環境でWebRTCアプリケーションを構築する際はテストとトラブルシューティングを繰り返すことになります。この記事ではトラブルシューティングを中心に取り上げます。どのビデオアプリケーションのトラブルシューティングにも役立つ方法やツールを紹介するほか、Twilio Video AP …

    Read More
  • By Mia Adjei
    How to Set a Default Room Name in the Twilio Video React App How to Set a Default Room Name in the Twilio Video React App

    If you have worked with the open-source Twilio Video React App, you have likely seen the start screen displayed below:

    Twilio Video React App initial screen, with inputs for a user's name and a video room's name.

    By default, this screen shows you two inputs: one for your name and one for the name of the video room you would like to join.

    If you are building with this open-source video app, maybe you have wondered how you can prepopulate a video room name so that video room participants don't have to type it in.

    In this tutorial, you will learn some quick ways you can change the default name of the video room in this application, as well as examine some of how this application uses React Hooks.

    Prerequisites

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

    Setup

    To get started, clone …

    Read More
  • By Luís Leão
    Crear una aplicación de chat de video con ASP.NET Core 2.2, Angular y Twilio Crear una aplicación de chat de video con ASP.NET Core 2.2, Angular y Twilio

    La interacción con el usuario en tiempo real es una excelente manera de mejorar las capacidades de comunicación y colaboración de una aplicación web. El chat de video es una opción obvia para las ventas, la atención al cliente y los sitios educativos, pero ¿cómo se puede implementar con rapidez? El video programable Twilio le permite agregar de manera eficiente un chat de video sólido a sus aplicaciones, ya sea que esté utilizando un marco de trabajo de Modelo-Vista-Controlador de JavaScript, como Angular, o las plantillas del servidor.

    En esta publicación, se mostrará cómo crear una aplicación de chat de video mediante el SDK JavaScript de Twilio en su aplicación de una sola página Angular (SPA) y el SDK de Twilio para C# y .NET en su código de servidor de ASP.NET Core. Creará las interacciones necesarias para crear y unirse a salas de chat de video, y para publicar …

    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.