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 Mia Adjei
    Grant Video Access Tokens with Your Express + TypeScript Video API Grant Video Access Tokens with Your Express + TypeScript Video API

    So you've built a video API with Twilio Programmable Video, Node.js, TypeScript, and Express. You've added CORS support so that your future video app will be able to access resources on your server. What's next?

    In order for users to actually be able to connect to video rooms in your app, they will need to be authenticated using an access token. In this tutorial, you'll update your Express + TypeScript video API to add a new route that grants access tokens to the users who will be using your video app. 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 below).

    The rest of this tutorial builds on …

    Read More
  • By Mia Adjei
    Add CORS Support to Your Express + TypeScript API Add CORS Support to Your Express + TypeScript API

    Imagine you've just built a great API using Node.js, Express, and TypeScript. You've also built a client-side web app and are ready to fire it up in your browser, get it talking to your server, and hopefully share it with the world.

    You open up a browser window and navigate to where your app is running, then you pop open the console in your developer tools. Your app makes its first API call to your server...but then, instead of the data you're expecting to see populate your app, you see an error like the one below in your console:

    Access to fetch at 'http://localhost:5000/rooms' from origin 'http://localhost:3000' 
    has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
    on the requested resource. If an opaque response serves your needs, set the 
    request's mode to 'no-cors' to fetch the resource with CORS disabled.
    

    Yikes! This error is due to Cross-Origin Resource …

    Read More
  • By Sean Coleman
    Launch your own video app with text-based chat in minutes with the updated Twilio Video Open Source ReactJS application Launch your own video app with text-based chat in minutes with the updated Twilio Video Open Source ReactJS application

    Last year, Twilio launched quick deploy video applications for developers to get up and running with Programmable Video in five minutes or less. Today, we are excited to announce the latest enhancement to the open source ReactJS application: out-of-the-box chat support for textual and file-based messaging.

    Whether you are using the app as a launching off point or a canonical reference during development, by adding this feature to the open source ReactJS application we hope to accelerate your development as you look to build chat within your video experience.

    This post will first explore why chat is a valuable channel for the end-user video experience, introduce the new feature, and discuss what we used to build it (spoiler alert: we leveraged Twilio’s very own Conversations API).

    Why add chat into your video experience?

    Chat within the video experience provides a useful channel for users to send clarifying messages, backlog …

    Read More
  • By Ashley Boucher
    How to Check your Twilio Account Balance in JavaScript accountbalance.png

    Twilio APIs make it possible to add communication features to your application, but to consume these APIs you have to keep track of your spending and ensure your account balance stays above zero.

    Your balance is available in the main page when you log in to your Twilio Console, but having to actively monitor your account is tedious and inconvenient.

    In this tutorial you are going to learn how to write a script that retrieves your account balance using JavaScript. You can also schedule this script to run on a regular cadence, and even set up SMS based notifications if you drop below a certain balance.

    Prerequisites

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

    Create a Node.js project

    From your …

    Read More
  • By Sam Agnew
    4 outils pour faire du Web Scraping en Node.js 4-outils-web-scraping-node-js

    Les données dont vous avez besoin sont parfois disponibles en ligne, mais ne sont pas disponibles via une API REST dédiée.

    Heureusement pour les développeurs JavaScript, il existe une variété d'outils disponibles dans Node.js pour le scraping et l'analyse des données directement à partir de sites web à exploiter dans vos projets et applications.

    Parcourons quatre de ces bibliothèques pour voir comment elles fonctionnent et comment elles se comparent les unes aux autres !

    Mais d’abord, assurez-vous que vous avez des versions à jour de Node.js (au moins 12.0.0) et de npm installées sur votre machine. Exécutez la commande suivante dans le répertoire où vous souhaitez placer votre code:

    npm init --yes
    

    Pour certaines de ces applications, nous utiliserons la bibliothèque Got pour faire des requêtes HTTP. Installez-la dans le même répertoire, avec cette commande:

    npm install got@11.0.2
    

    Essayons maintenant de trouver tous les liens vers des fichiers MIDI …

    Read More
  • By Phil Nash
    Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio Como implementar o compartilhamento de tela no seu app de Vídeo da Twilio

    Em posts recentes vimos como gravar a tela de um usuário usando o Chrome e o Firefox. Agora está na hora de combinarmos esta funcionalidade com uma aplicação de videoconferência, agregando o compartilhamento de tela com nosso chat de vídeo.

    O que estamos construindo

    Neste post, vamos começar pelo quickstart de aplicação de vídeo da Twilio e adicionar o compartilhamento de tela nele. Quando terminarmos, a aplicação vai te permitir fazer chamadas entre navegadores e compartilhar a tela entre eles.

    Exemplo do projeto final em execução

    Do que você vai precisar

    Para construir esta aplicação, você vai precisar de algumas coisas:

    Read More
  • By Mia Adjei
    Build a Video API with Twilio Programmable Video, Node.js, TypeScript, and Express Build a Video API with Twilio Programmable Video, Node.js, TypeScript, and Express

    Have you ever wanted to include video in your app but weren’t sure how to get started? Well, Twilio Programmable Video provides a friendly API you can use to make this happen.

    This tutorial will show you how to build an API to create and manage video rooms programmatically using Twilio Programmable Video, Node.js, TypeScript, and Express.

    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 installed on your machine.
    • HTTPie or cURL.

    Set up your environment

    Open your terminal, find the place you want to set up your project, and create a new directory called express-video-api where your project will live:

    mkdir express-video-api
    cd express-video-api
    

    Next, set up a new Node.js project with a default package.json file by running the following command:

    npm init --yes
    

    Install dependencies

    Express is the backend framework for …

    Read More
  • By Diane Phan
    How to Build a Basic Custom Button Component in React TypeScript header - How to Build a Custom Button Component in React TypeScript

    Learning how to code, especially with React, a JavaScript UI library, can be unnecessarily difficult. However, if you enjoy interactive web pages, then you might be able to view learning React as a fun way to design your own interactive site.

    With React, you can create elements quickly by writing the guidelines for one customizable component and reusing it throughout the project, only altering some of its details. This is also a great exercise for understanding why you should follow best programming practices to write code in an organized and efficient way.

    In this article, you'll be exploring how to write a custom button component for a basic TypeScript React project. You will be able to reuse the button throughout the site and practice reusing components efficiently.

    Tutorial Requirements

    • Node version 14.16.0 or above at the time that this article is written.
    • npm, yarn, or another package …
    Read More
  • By Valeriane Venance
    4 façons de faire des requêtes HTTP en Node.js 4-facons-requetes-http-node-js-banniere.png

    L'envoi de requêtes HTTP est une fonctionnalité de base des langues modernes et l'une des premières choses que de nombreux devs apprennent. En ce qui concerne Node.js, il existe un grand nombre de solutions à cette problématique, qu’elles soient intégrées de base dans le langage ou créées par la communauté. Examinons quelques-unes des plus populaires.

    Nous utiliserons L'API JSON de la NASA Image Astronomique du Jour, parce que l'espace, c’est juste trop cool.

    Avant de commencer, assurez-vous que vous avez des versions à jour de Node.js et npm installées sur votre machine.

    HTTP – la Bibliothèque Standard

    Le module HTTP par défaut de la bibliothèque standard est le premier de notre palmarès.

    L’avantage d’utiliser ce module est de ne pas avoir à installer de dépendances externes. L'inconvénient est qu'il n'est pas très convivial par rapport à d'autres solutions.

    Le code suivant enverra une demande GET à l'API de la …

    Read More
  • By Lizzie Siegle
    Detect Hair Color with AutoML, MMS, and JavaScript newhairheader.png

    A few weeks ago, I hosted Anna Lytical on my weekly Twilio TV Twitch show to talk making tech more inclusive and accessible, their path to Google and drag, this cool Google Cloud and Twilio hack we made, and more! Anna Lytical is the sickeningly entertaining and educating coding drag queen dedicated to engaging a more diverse audience with code and technology, especially the LGBTQ+ community. During working hours, they are an engineer at Google working on the developer experience for Google Cloud Platform.

    The app we built for the stream was a hair color detector using Google AutoML, Cloud Functions, Twilio MMS, and JavaScript. Read on to learn how to build it yourself and see it in-action by texting a selfie or image with hair to +18182757423!

    emily-hair

    What you need to get started

    To follow along with this post, you will need

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