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 Miguel Grinberg
    Add a Realtime Viewer Count to your Twilio Live Stream Add a Realtime Viewer Count to your Twilio Live Stream

    An important aspect of running a Twilio Live streaming experience is to track your viewership. But how do you do that? There are many different ways to do it, and the best method to use will depend on your needs and your technology stack.

    Are you ready to learn how to count your livestream viewers? In this article I’ll show you a few possible implementations with varying levels of complexity and flexibility.

    Requirements

    This article does not have any requirements beyond having some familiarity with the Twilio Live product. If you haven’t worked with Twilio Live before, I recommend that you follow an introductory tutorial first. My colleague Mia Adjei wrote a Twilio Live tutorial using Express.js, and I have also written one using the Twilio serverless platform, both of which show you how to build a complete livestreaming project step by step.

    To apply what you learn …

    Read More
  • By Lizzie Siegle
    Detect Objects in a Serverless Twilio Video App with TensorFlow.js header-tf-obj-det

    Object detection is a computer vision technique for locating instances of objects in media such as images or videos. This machine learning (ML) method can be applied to many areas of computer vision, like image retrieval, security, surveillance, automated vehicle systems and machine inspection. Read on to learn how to detect objects in a Twilio Programmable Video application using TensorFlow.js.

    object detection gif

    Setup

    To build a Twilio Programmable Video application, we will need:

    Download this GitHub repo and then create a file named .env in the top-level directory with the following contents, replacing the XXXXX placeholders with the values that apply …

    Read More
  • By Miguel Grinberg
    Deploy your Vue.js Application with the Twilio Serverless Toolkit Deploy your Vue.js Application with the Twilio Serverless Toolkit

    When you are ready to deploy your Vue.js application you are faced with the problem of selecting a hosting platform. For this there are lots of options, but many require you to set up and manage your own server or container.

    In this short tutorial I want to introduce you to the Twilio Runtime, a serverless hosting platform that when paired with the Twilio Serverless Toolkit makes deploying your front end application as easy as typing yarn deploy on your terminal.

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • By Ashley Boucher
    How to Handle File Uploads from Node.js to Express fileuploads.png

    Recently I was developing a CLI in Node.js that would help make the process of writing articles in Markdown easier for my team. The flow required that a local .md file be parsed, formatted, converted to .docx, and then uploaded to Google Drive as a Google Doc file, all by running one command from the terminal.

    I approached this project in a few different ways, hoping initially that I could use serverless functions to handle the backend. I hit a lot of dead ends on this route, and eventually decided to build an Express server that I would ultimately host on Heroku.

    To upload the .docx file contents from my CLI to a secure backend endpoint, where it would then be uploaded to the user’s authenticated Google Drive, I needed a way to POST multipart/form-data directly from Node.js (without a browser). This requires several third party libraries, and it …

    Read More
  • By Miguel Grinberg
    Deploy your React Application with the Twilio Serverless Toolkit Deploy your React Application with the Twilio Serverless Toolkit

    When you are ready to deploy your React application you are faced with the problem of selecting a hosting platform. Here you have a variety of options, many of them requiring you to set up servers or containers.

    In this short tutorial I want to introduce you to the Twilio Runtime, a serverless hosting platform that when paired with the Twilio Serverless Toolkit makes deploying your React application as easy as typing yarn deploy on your terminal.

    Requirements

    To work on this tutorial you will need the following items:

    Read More
  • By Mia Adjei
    Build a Livestreaming Application with Twilio Live and Express Build a Livestreaming Application with Twilio Live and Express

    Twilio Live is finally here! If you have ever wanted to build your own livestreaming application, now is your chance.

    In this tutorial, you will learn how to build a livestreaming application and share your live video feed with your friends, followers, and maybe even the world. For this project, you'll be using Node.js and Express to build the server side of the application, and vanilla JavaScript on the client side.

    Let's get started!

    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 machine.
    • ngrok

    What you will build

    In this tutorial, you will be creating an application that allows a person to livestream video and audio from their device to people who have the link to the stream. The Express server you'll build will handle both the streamer …

    Read More
  • By Al Kiramoto
    Quickly Enable Your Employees to Work from Home Using Twilio Programmable Voice Enable WFH Quickly Hero

    If your PBX solution does not natively allow for remote working and you need to act fast, this solution is for you. This tutorial shows you how to create a solution with Twilio Programmable Voice and a SIP softphone software or an SIP IP Phone that enables employees to work from their homes.

    Configure the Programmable Voice SIP Endpoint

    You can forward incoming calls to Twilio numbers registered to SIP endpoints, and use a free softphone as an endpoint while working from home, as shown below:

    Flow for how employees can work from home using Twilio

    To get started with the project you will need the following:

    • A Twilio account. Sign up for a free trial account and get a $10 credit.
    • A call-enabled Twilio Phone Number.
    • SIP endpoint (IP Phones (e.g. Obihai) or Softphones (e.g. Zoiper or X-Lite)).

    Create the application

    Go to twilio.com and sign up for a free account or log in to your existing account. …

    Read More
  • By Mia Adjei
    Share a File over a WebRTC Data Channel with Twilio Video Share a File over a WebRTC Data Channel with Twilio Video

    When you're taking part in a video conversation, sometimes you have files you want to share with the other people on the call so that everyone can take a look. This is a great way to collaborate with your friends or colleagues when you're not in the same room or looking at the same screen.

    In this tutorial, you'll build a video application with JavaScript and learn how to use the Twilio Video DataTrack API to share a file over WebRTC with the other participants on the call.

    Follow along below step by step, or if you're interested in skipping ahead to take a look at the code, visit the project repository on GitHub here.

    Let's get started!

    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 machine. …
    Read More
  • 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
  • Newer
    Older
    Sign up and start building
    Not ready yet? Talk to an expert.