メニュー

Expand
Rate this page:

Thanks for rating this page!

We are always striving to improve our documentation quality, and your feedback is valuable to us. How could this documentation serve you better?

Twilio Client JavaScript Quickstart

This quickstart is for using Twilio on the client side in the browser, or front-end. If you are looking to use Twilio with JavaScript on the server side, please head over to our Node.js documentation.

Ready to add voice communications to your front-end web applications? When you complete this Quickstart, you’ll have a fully running application that can make and receive phone calls from the comfort of your own web browser.

There are a few steps we’re going to need to complete to get you up and running.

Install the Twilio CLI

The Twilio Command Line Interface, CLI, allows you to interact with the Twilio API from your terminal. It allows you to manage and configure all of your Twilio tools, which is what we are going to be using it for in our case.

One of the easiest ways to install the CLI on Mac OS X is to use Homebrew. If you don't already have it installed, visit the Homebrew site for installation instructions and then return here.

Once Homebrew is installed, simply run the following command to install the CLI:

brew tap twilio/brew && brew install twilio

Updating

If you already installed the CLI with brew and want to upgrade to the latest version, run:

brew upgrade twilio

Warning for Node.js developers

If you have installed Node.js version 10.12 or higher on your Mac, you can avoid potential Node.js version conflicts by installing the CLI using npm:

npm install twilio-cli -g

Before we can install, we need to make sure you have Node.js installed (version 10.12 or above). To see if you have node installed, try running this command:

node -v

If your system reports v10.12.0 or above, you can skip the next step.

Installing Node.js on Windows

Using the Windows Installer (.msi) is the recommended way to install Node.js on Windows. You can download the installer from the Node.js download page.

Installing Twilio CLI

The CLI is installed with npm (Node Package Manager), which comes with Node.js. To install the CLI run the following command:

npm install twilio-cli -g

Note the -g option is what installs the command globally so you can run it from anywhere in your system.

Updating

If you already installed the CLI with npm and want to upgrade to the latest version, run:

npm install twilio-cli@latest -g

Before we can install, we need to make sure you have Node.js installed (version 10.12 or above). Even if you already installed Node yourself, the CLI works best when you install it using nvm. Here's how to get nvm installed on most Linux systems:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

Please visit the nvm installation instructions for additional options and troubleshooting steps. Once you have nvm installed, run the following to install and use the most recent LTS release of Node.js:

nvm install --lts
nvm use <insert version reported from above>

Installing other Twilio CLI prerequisites for Linux

Depending on your distribution, you will need to run one of the following commands:

  • Debian/Ubuntu: sudo apt-get install libsecret-1-dev
  • Red Hat-based: sudo yum install libsecret-devel
  • Arch Linux: sudo pacman -S libsecret

Installing Twilio CLI

The CLI is installed with npm (Node Package Manager), which comes with Node.js. To install the CLI run the following command:

npm install twilio-cli -g

Note the -g option is what installs the command globally so you can run it from anywhere in your system.

Updating

If you already installed the CLI with npm and want to upgrade to the latest version, run:

npm install twilio-cli@latest -g

Install the Serverless Plugin

The Twilio CLI supports plugins, which give you additional control. We’re going to install the serverless plugin which allows you to seamlessly deploy functions from your local machine.

twilio plugins:install @twilio-labs/plugin-serverless

Create your Application using a Function Template

The serverless plugin allows you to initialize an application from a template. The template we are going to use has everything we need, a front-end application, a Twilio Function to generate AccessTokens, a Twilio Function to handle incoming calls and route them to your browser, an admin section to wire up your account, and much more!

We’ll take a look in more detail after we get things up and running. But for now, let’s create our app!

twilio serverless:init example-client-app --template="voice-client-javascript"

This will create a new folder called example-client-app that will contain all of our code.

cd example-client-app

Deploy your Application

The serverless plugin allows you to deploy code from your local machine to the Twilio Serverless platform. Once deployed you’ll be able to access your hosted application.

twilio serverless:deploy

This command will create a Service for you that will house your hosted development environment. The command will output all the Twilio Functions and Assets that have been deployed to your dev environment.

Note that the URLs are unique to your instance.

You should run this command when you want to make changes to your hosted live development environment.

Initialize your Environment

When you deployed your application, you were presented with a list of URLs. Make note of the prefix, this is custom to your deployment.

  1. Open the admin page in your browser. It is the URL that ends with /admin/index.html
  2. The password is default (You can change this, we'll do that later)
  3. Click the button on the admin page to initialize your environment

The initialization process will create and wire up all the necessary tools to make browser based calling work. You definitely could’ve done this yourself, but this is a Quickstart, and we want you to get started quickly 😉

This page will now host a checklist that will validate that your environment is working properly. It also provides handy links to get to the items that were automatically initialized for you.

You should note that there is a failing check, and that’s because we haven’t yet changed the default password. We’ll do that here shortly, but first let’s explore your new application.

Explore your application

Your example application is now up and running at /index.html. Open it up in your browser.

You’ll see that an Access Token is requested, and you should see a notification when it receives one. It will state your "Twilio.Device is ready!"

Go ahead and use the interfeace to give yourself a call. You should be asked to grant access to your microphone and speakers.

Note that the example application is using the user name of the_user_id. The Twilio Function we are using to generate the Access Token is not using any sort of authentication check. This is something that you will need to implement with your user management system.

Modify your Application

We should definitely change that admin password. On your local machine edit the file named .env.

There is an entry for ADMIN_PASSWORD, change that to something other than default.

ADMIN_PASSWORD=12345

Obviously, though, don’t use that password (that’s the same one as my luggage.)

Now make sure your file is saved and then deploy.

twilio serverless:deploy

And after it is deployed revisit your /admin/index.html page, use your new password, and you will see that your checks are now all green. You did it!

Anytime you make a change to your example application, remember to save and re-deploy.

さらに詳しく

Now that you’ve seen things working, we’d like to invite you to explore how it’s working.

First head over to your local folder and take a look at the two client side files assets/index.html and assets/quickstart.js. Note that there is a script tag including a CDN hosted file twilio.js. This is the Twilio Client JavaScript SDK and you can see it in use in the heavily documented assets/quickstart.js.

In the quickstart.js file, you’ll notice that the Device is initialized with a token. It’s pointing to a serverless Function that can be found at /functions/voice-token.js. This file mints an Access Token for you based on a REST API Key and Secret that was generated during initialization. You’ll see that it also contains a VoiceGrant that enables incoming and outgoing calls through a specific TwiML Application.

If you head back over to your admin page, /admin/index.html, you’ll see a link to a TwiML Application that was created for you. A TwiML Application allows you to specify what happens when a call is placed and when one is received. TwiML is the Twilio Markup Language that instructs Twilio what to do with your call in that moment.

We provide this TwiML via a Function that can be found in your functions/client-voice-twiml-app.js. We wired up your TwiML application to run this function on Incoming and Outgoing Voice calls. This function can dial either a client in your same application or a number. When making the outbound call it will use your CALLER_ID.

Rate this page:

ヘルプが必要ですか?

誰しもが一度は考える「コーディングって難しい」。そんな時は、お問い合わせフォームから質問してください。 または、Stack Overflow でTwilioタグのついた情報から欲しいものを探してみましょう。