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

JavaScript posts

  • By Ashley Boucher
    Verify a User via SMS with Express and Twilio Verify verify sms express.png

    Many applications verify and authorize their users by sending a numeric code, called a One-Time Passcode (OTP), to the user’s phone number via either a voice call or a text message.

    In this article you’ll learn how to perform user verification via SMS through Twilio Verify. You’ll build a pared down frontend using JavaScript and HTML and you’ll build a Node.js backend with Express.

    Prerequisites

    To get started with this tutorial, you’ll need the following:

    • Node.js installed on your machine, along with a package manager like npm or yarn
    • A free Twilio account (sign up with this link and get $10 in free credit when you upgrade your account)
    • A phone where you can receive text messages

    Scaffold your backend

    In your terminal or command prompt window, navigate to your main projects or development folder. From there, run the following commands to create a new project folder, …

    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 Ashley Boucher
    Verify a User via Phone with Twilio Functions and Twilio Verify verifyvoice.png

    Many applications verify and authorize their users by sending a numeric code, called a One-Time Passcode (OTP), to the user’s phone number via either a voice call or a text message.

    In this article you’ll learn how to perform user verification via a phone call through Twilio Verify. You’ll build a pared down frontend using JavaScript and HTML and you’ll build a Node.js backend, all hosted with Twilio Functions, which will be scaffolded using the Twilio Serverless Toolkit, a plugin for the Twilio CLI.

    Prerequisites

    To get started with this tutorial, you’ll need the following:

    Read More
  • By Ashley Boucher
    How to Verify a User via SMS with JavaScript and Twilio Verify twilioverifysms.png

    Many applications verify and authorize their users by sending a numeric code, called a One-Time Passcode (OTP), to the user’s phone number via either a voice call or a text message.

    In this article you’ll learn how to perform SMS user verification through Twilio Verify. You’ll build a pared down frontend using JavaScript and HTML and you’ll build a Node.js backend, all hosted with Twilio Functions, which will be scaffolded using the Twilio Serverless Toolkit, a plugin for the Twilio CLI.

    Prerequisites

    To get started with this tutorial, you’ll need the following:

    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 Joyce Lin
    Notifications Calendrier Serverless par SMS avec Postman et Twilio Notifications Calendrier Serverless par SMS avec Postman et Twilio

    J'adore manger des fruits frais, mais je ne sais jamais ce qui est de saison tant que je ne vais pas chez mon épicier. Imaginez donc mon bonheur quand j'ai découvert les Journées nationales des fruits ! C'est vrai, ce n'est sans doute qu'un coup marketing dans mon pays, mais cela me permet aussi de me tenir au courant de ce qui est de saison.

    Ce tutoriel vous explique comment configurer des notifications de calendrier personnalisées. Même si vous ne vous intéressez pas aux fruits, apprenez à déclencher une notification à une date donnée à l'aide d'un moniteur Postman, afin de ne jamais manquer un événement spécial. Dans ce tutoriel, nous effectuerons les opérations suivantes :

    • Configurer une collection Postman
    • Ajouter un exemple de réponse pour le stockage de données
    • Simuler l'API sur les serveurs Postman
    • Configurer une notification SMS avec Twilio
    • Exécuter la collection localement dans Postman
    • Planifier l'exécution …
    Read More
  • By Ashley Boucher
    How to Build a TwilioQuest Extension and Add Your Own Content to the Game tq-extension.png

    TwilioQuest enthusiasts, game developers, educators...rejoice! You can now build your own TwilioQuest (TQ) extensions. You can design new levels, write your own code challenges, and contribute to the TwilioQuest ecosystem.

    In this article, you’ll learn the mechanics of developing a TwilioQuest extension. You’ll build a VR Training mission, whose goal is to teach the player how to send an SMS message with Twilio. As part of building the training mission, you’ll:

    • Plan out learning objectives for the mission
    • Design a level map used Tiled
    • Validate players’ responses to each objective using JavaScript and Node.js

    Prerequisites

    To start, make sure you have the following prerequisites:

    • Node.js installed on your machine, along with a package manager like npm or yarn
    • A free Twilio account (sign up with this link and get $10 in free credit when you upgrade your account)
    • A GitHub account

    Set up your development environment

    Before …

    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 Christina Leung
    Understanding Local Caching in React Header - Understanding Local Caching in React

    React and Redux are commonly used together to build applications and manage application state. However, one drawback to using Redux is that upon page refresh, the entire Redux state containing the application data is reset. Re-initializing the Redux state often means having to make repeated API calls to re-fetch data, or losing user data completely.

    In this article, we will go through a small example demonstrating how Redux state can be cached locally, then rehydrated using cache data when the page is refreshed.

    Prerequisites

    For this tutorial, you will need a working Google Chrome browser with the extension Redux DevTools installed. This extension can be found in the Chrome Web Store.

    Cache Implementation

    This tutorial will demonstrate how to implement local caching in a pizza order form. Imagine you are ordering pizza for dinner, but get sidetracked halfway and decide to check your email instead. When you’re done checking …

    Read More
  • By Shashwat Johari
    Streaming Studio Flow Executions with Event Streams Twilio Studio + Event Streams

    In this post, you will learn how to stream Twilio Studio Flow Executions with Twilio Event Streams. With Studio events being fully supported on Event Streams, you can now leverage webhooks to trigger external workflows or log steps in real-time as your Flow executes in Studio.

    Before Studio support for Event Streams you had two ways to achieve this:

    1. Adding HTTP Request widgets throughout your Flows to push events out to your external applications - This added complexity to the Flows and was largely a manual process.
    2. Polling the API’s Executions and Steps endpoints to retrieve complete logs for reporting - This required running batch jobs on a schedule to page through all the records and was a cumbersome process.

    So why is this useful?

    • It gives you additional options for triggering programmatic actions beyond a single webhook endpoint
    • It removes synchronous dependencies between your services and Twilio API …
    Read More
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.