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
  • By Phil Nash
    Build a Video Chat with React Hooks Build a Video Chat with React Hooks

    We've seen a video chat built in React on this blog before but since then, in version 16.8, React released Hooks. Hooks let you use state or other React features inside functional components instead of writing a class component.

    In this post we are going to build a video chat application using Twilio Video and React with only functional components, using the useState, useCallback, useEffect and useRef hooks.

    What you'll need

    To build this video chat application you will need the following:

    Once you've got all that, we can prepare our development environment.

    Getting started

    So we can get straight to the React application, we can start with the React and Express starter app I created. Download or clone the starter app's "twilio" branch, change into the new directory and …

    Read More
  • By Phil Nash
    Text to speech in the browser with the Web Speech API speech-synth-header.png

    The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition. With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.

    From a vocal alerts in an application to bringing an Autopilot powered chatbot to life on your website, the Web Speech API has a lot of potential for web interfaces. Follow on to find out how to get your web application speaking back to you.

    What you'll need

    If you want to build this application as we learn about the SpeechSynthesis API then you'll need a couple of things:

    Once you're ready, create a directory to work in and download this HTML file and this CSS file to it. Make …

    Read More
  • By Phil Nash
    An introduction to the MediaRecorder API Copy of Photo blog Header 1-2.png

    On the web we can capture media streams from the user's camera, microphone and even desktop. We can use those media streams for real time video chat over WebRTC and with the MediaRecorder API we can also record and save audio or video from our users directly in a web browser.

    To explore the MediaRecorder API let's build a simple audio recorder app with just HTML, CSS and JavaScript.

    Getting started

    To build this application all we need is a text editor and a browser that supports the MediaRecorded API. At the time of writing, supported browsers include Firefox, Chrome and Opera. There is also work ongoing to bring this API to Edge and Safari.

    To get started, create a folder to work in and save this HTML file and this CSS file to give us something to start with. Make sure they are in the same folder …

    Read More
  • By Phil Nash
    Serverless Ruby on AWS Lambda with the Jets framework oMX1dI2w2BskhPm3NagdjbXVb0t9ONMEUOR_7ms5C51r_dW_1mNwj0Y7CYGhu6rlqef7HZr_rh659ECtBuVzqJyqEP5UuHfp6y9JGjCs53qLxeSq0hcbwxyZQZxV4L1dHiaMuBY

    When AWS launched Lambda in 2014 there was no love for Ruby. Platforms like Python, Node.js, and Java started the serverless revolution for hosting and running functions in the cloud. At the end of 2018, support for Ruby was finally launched.

    You can build with Ruby on Lambda using raw functions and Serverless Application Model (SAM) templates as described in the getting started guide for Ruby on Lambda, but Ruby is all about developer happiness and when the config file is longer than your program the process could be described as painful. Enter the Jets framework a framework that "leverages the power of Ruby to make serverless joyful for everyone."

    From Rails to Jets

    Jets combines the experience of building a Rails application with the ability to deploy to AWS Lambda and related services, including API Gateway, S3, and DynamoDB. In this post we're going to …

    Read More
  • By Phil Nash
    Send Images and Files via WhatsApp Using Ruby 8kEzE4pzPwWTXwfR8Cf702Bf_WzY45UvAPBbdqohDl1qudH815kSjIhWqqV4hirBR8iPDRw6EzhsyIH7z4QaJuNvWLyjYmFxrkhBzC8vlaZNsN89BoJx7AToabvAl-M_br4nZBo

    With the Twilio API for WhatsApp we can send messages to WhatsApp numbers. Those messages can be plain text or include files like images, audio and even PDFs up to 5MB. Let's see how to do so using Ruby.

    Things you'll need

    If you want to code along with this post, you'll need a few things:

    Got all that? Let's get coding then!

    Create a new directory for your project and use Bundler to initialise a new Gemfile:

    mkdir whatsapp-messages
    cd whatsapp-messages
    bundle init
    

    Open up the new Gemfile and add the twilio-ruby gem:

    # frozen_string_literal: true
    
    source "https://rubygems.org"
    
    gem "twilio-ruby"
    

    Install the gem by running bundle install on the command line.

    Sending your first WhatsApp message

    Create a …

    Read More
  • By Phil Nash
    Start a new Twilio Functions project the easy way LHaKWYkVSoOXgksrfgmtl6OcTPycoob1NKdVEoaYOhJx-O-ZNKf6ApcZHbrwROeVXmGjqlTwVuSv5qBAxD2IBiOnpnlOa0OOAWj_qr3I42--TB_yfaTnWFoTTfXDvW9jWRBCJx8

    If you're building a Twilio project you will inevitably need to run some code in response to an incoming webhook request. One of the easiest ways to do this is with Twilio Functions, our serverless platform for running Node.js. Recently my colleague Dominik released the twilio-run package that makes it easier to develop, test and debug Twilio Functions locally.

    I wanted to make it even easier to get started with a Twilio Functions project, so I built a project generator called create-twilio-function.

    Let's take a look at how you can easily start and develop a Twilio Functions project using create-twilio-function and twilio-run.

    Getting started

    There are a few ways you can use create-twilio-function. The easiest is if you have npm version 6 or higher. You can check this out on the command line with:

    $ npm --version
    6.9.0
    

    If you don't have an up to …

    Read More
  • By Phil Nash
    Go celebrity spotting with the Twilio API for WhatsApp, AWS Rekognition and Ruby Go celebrity spotty with the Twilio API for WhatsApp, AWS Rekognition and Ruby

    Did you know you can send and receive media using the Twilio API for WhatsApp? When I found out I wanted to make something fun with it, so why not combine it with AWS Rekognition to work out if I look like any celebrities?

    By the end of this post, you'll know how to build an app that lets you send an image to a WhatsApp number, download the image, analyse the image with the AWS Rekognition API and respond to say whether there are any celebrities in the picture.

    What you'll need

    To build this application you'll need a few things:

    Got all that? Let's get started then.

    Application basics

    When Twilio receives a WhatsApp message it will send an HTTP request, a webhook …

    Read More
  • By Phil Nash
    How to download image files in Ruby MSjyG8qNtcrbONBpWKztYRJqSpr4R2M6K83KXW4dj05n5p1Q2Ez4kQyLxiX69xnjo2gBNd-KleVK_tnzFhPbqCK70HVdlI-BR9H8Dk8KRL8RcwlpsYT5uysgm5ado7pxcASFHP4

    Have you ever needed to download and save an image in your Ruby application? Read on to find out how.

    Plain old Ruby

    The most popular way to download a file without any dependencies is to use the standard library open-uri.

    Kernel#open is a method that you can use to open files, streams, or processes to read to or write from. For example, you can open a file and read its contents with the following code:

    open("./test.txt") do |file|
      puts file.read
    end
    

    open-uri extends Kernel#open so that it can open URIs as if they were files. We can use this to download an image and then save it as a file.

    To do so, we first require open-uri then use the open method to access an image URL. We can then open up a file and write the contents of the image …

    Read More
  • By Phil Nash
    Build a chat app with Twilio and KendoReact Erily36WoEFAAxG6ABO0xY05CilCUyNxBWf1-AiAabiMrPgXYTtyYIm-0d5X5i7p8PXW_Iq1CkmMmlKhi0YKJb0QsmCsGkAF4zQ_QN8oXyYpXujfcso7cO2c9rtRVIej51glTiE

    Twilio Programmable Chat provides an SDK and robust back-end for real time chat applications, but it's missing a front-end. If you need a chat UI, as well as a whole bunch of other useful components, then KendoReact might be what you're looking for.

    Kendo UI provides well designed and tested components that you can use within your React, Angular, Vue and jQuery applications. In this post we will build a Twilio Chat application with React and the KendoReact conversational UI components.

    What you'll need

    If you want to build along with this tutorial, then you'll need a few things:

    Read More
  • By Phil Nash
    Forward fax to email with SendGrid and Node.js gyC1XkaURW4Yt1lWiJTDEtRu2X6-6zDRupZvN337EJbOwMZpu_aL74AYMZvh_xLRxr4qBAYqAP50X1vkbBgjxmWN4eH02Rs91e0E-3Gp5wZXmEu4kuDpoWJG3a7cxUYwPL-KQUE

    It's 2019 and you need to receive a fax. What do you do? You could buy a fax machine, hook it up to a phone line and hand out your number. But it's 2019 not 1979, we're living in the future, so let's grab Node.js, pick a couple of APIs and turn that fax into an email instead.

    We're living in the future, but not the future where we're surrounded by fax machines!

    You're going to need a Twilio account, a SendGrid account and this noise to remind you what you're missing out on as you build your very own fax-to-email converter.

    Receiving a fax

    Rather than bulky machinery we're going to use a Twilio number to receive our incoming faxes. You're going to need a Twilio number that supports fax to build this app, so log in to your Twilio account. You can buy a new number or you may already have one, just look for this icon to show that …

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