Skip to contentSkip to navigationSkip to topbar
Rate this page:
On this page

Voice JavaScript SDK: Getting Started


(information)

Info

You're viewing the documentation for the 2.X version of the Voice JavaScript SDK. View the Migration Guide to learn how to migrate from 1.X to 2.X or view the 1.x-specific documentation.

Ready to add voice communications to your front-end web applications? When you complete one of these Quickstarts, you'll have a fully running application that can make and receive phone calls from a web browser.

Before you start building, you should familiarize yourself with how the JavaScript SDK works.

While the JavaScript SDK allows you to make calls from your browser, you still need some sort of back-end web server to provide your application with Access Tokens and to provide Twilio with TwiML instructions. The Quickstart repositories listed below include web servers in a variety of frameworks/languages.

Choose your preferred backend framework below:

(warning)

Warning

A Quickstart should serve as a starting point for creating your Twilio-powered application. A Quickstart application is not intended to provide a production-ready application, nor is it intended to cover every business use case.

To learn more about the Voice JavaScript SDK, please refer to the documentation:


Serverless Quickstart

serverless-quickstart page anchor

If you would like to see the Voice JavaScript SDK in action using Twilio's serverless environment, follow the instructions below.

1. Install the Twilio CLI tool

1-install-the-twilio-cli-tool page anchor

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.

macOSWindowsLinux

The suggested way to install twilio-cli on macOS is to use Homebrew(link takes you to an external page). If you don't already have it installed, visit the Homebrew site(link takes you to an external page) for installation instructions and then return here.

Once you have installed Homebrew, run the following command to install twilio-cli:


_10
brew tap twilio/brew && brew install twilio

(information)

Info

For other installation methods, see the Twilio CLI Quickstart.

2. Install the Twilio CLI serverless plugin

2-install-the-twilio-cli-serverless-plugin page anchor

The Twilio CLI supports plugins, which give you additional control and functionality.

We're going to install the serverless plugin which allows you to seamlessly deploy functions from your local machine to Twilio Functions and Assets, Twilio's serverless environment.

Execute the following command in your terminal:


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

(warning)

Warning

Make sure you have the latest versions of the Twilio CLI and the Serverless Plugin installed.

3. Create your application using a Function Template

3-create-your-application-using-a-function-template page anchor

The serverless plugin allows you to initialize an application from a template. The template we are going to use has everything we need, which includes the following:

  • a front-end application
  • a Twilio Function to generate Access Tokens
  • a Twilio Function to handle incoming calls and route them to your browser
  • an admin section to wire up your account

We'll take a look in more detail after we get things up and running.

Create your app by executing the following command in your terminal:


_10
twilio serverless:init quickstart-voice-javascript-sdk --template="voice-javascript-sdk"

This will create a new directory called quickstart-voice-javascript-sdk that will contain all of your code.

Change directories into that new directory with the following command:


_10
cd quickstart-voice-javascript-sdk

4. Deploy your application

4-deploy-your-application page anchor

The serverless plugin allows you to deploy code from your local machine to Twilio Functions and Assets. Once the application is deployed, you'll be able to access your hosted application.

To deploy your application, run the following command in your terminal:


_10
twilio serverless:deploy

This command will create a Service, which is a container for your Functions, Assets, and Environments within Twilio Serverless.

The command will output a list of the Twilio Functions and Assets that have been deployed to your development environment.

(information)

Info

Run twilio serverless:deploy any time you want to deploy changes to your application.

5. Initialize your Environment

5-initialize-your-environment page anchor

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.

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.

6. Explore your application

6-explore-your-application page anchor

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 interface to give yourself a call. You should be asked to grant access to your microphone and speakers.

(warning)

Warning

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(link takes you to an external page) is not using any sort of authentication check. This is something that you will need to implement with your user management system.

7. Modify your application

7-modify-your-application page anchor

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.


_10
ADMIN_PASSWORD=SOME-NEW-PASSWORD-HERE

Save your changes.

Deploy the changes using the following command in your terminal:


_10
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 the index.html file includes the following script tag:


_10
<script src="https://cdn.jsdelivr.net/npm/@twilio/voice-sdk@2.0.1/dist/twilio.min.js"></script>

This is the Voice JavaScript SDK library.

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. This is the Twilio Voice JavaScript SDK and you can see it in use in the heavily documented assets/quickstart.js.

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: