This template is part of Twilio CodeExchange. If you encounter any issues with this code, please open an issue at github.com/twilio-labs/code-exchange/issues.
This application should give you a ready-made starting point for writing your own voice apps with the Twilio Voice JavaScript SDK (formerly known as Twilio Client).
Once you set up the application, you will be able to make and receive calls from your browser. You will also be able to switch between audio input/output devices, and see dynamic volume levels on the call.
Implementations in other languages:
.NET | Python | Node | PHP | Ruby |
---|---|---|---|---|
Done | Done | Done | Done | Done |
- Java Development Kit version 11 or later.
- ngrok
- A Twilio account - sign up
Before we begin, we need to collect all the config values we need to run the application.
Config Value | Description |
---|---|
TWILIO_ACCOUNT_SID |
Your primary Twilio account identifier - find this in the console here. |
TWILIO_TWIML_APP_SID |
The TwiML application with a voice URL configured to access your server running this app - create one in the console here. Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running. |
TWILIO_CALLER_ID |
A Twilio phone number in E.164 format - you can get one here |
API_KEY / API_SECRET |
Your REST API Key information needed to create an Access Token - create an API key here. The API_KEY value should be the key's SID . |
After the above requirements have been met:
-
Clone this repository and
cd
into itgit clone https://github.com/TwilioDevEd/voice-javascript-sdk-quickstart-java.git cd voice-javascript-sdk-quickstart-java
-
Download the Twilio Voice JavaScript SDK code from GitHub.
In a production environment, we recommend using
npm
to install the SDK. However, for the purposes of this quickstart, we are not introducing Node or build tools, and are instead getting the SDK code directly from GitHub.See the instructions here for downloading the SDK code from GitHub. You will download a zip or tarball for a specific release version of the Voice JavaScript SDK (ex:
2.0.0
), extract the files, and retrieve thetwilio.min.js
file from thedist/
folder. Move thattwilio.min.js
file into this project'ssrc/main/resources/public/
directory. -
Create a configuration file for your application by copying the
.env.example
file to a new file called.env
. Then, edit the.env
file to include your account and application details.cp .env.example .env
See Twilio Account Settings to locate the necessary environment variables.
If you are using a UNIX operating system, load the environment variables before the application starts.
source .env
If you are using a different operating system, make sure that all the variables from the
.env
file are loaded into your environment.If you are using Windows (Powershell):
cp .env.example.ps1 .env.ps1
Edit
.env.ps1
with the four configuration parameters we gathered from above. "Dot-source" the file in PowerShell like so:. .\.env.ps1
This assumes you will run the application in the same PowerShell session. If not, edit the
.env.ps1
and uncomment the[Environment]::SetEnvironmentVariable
calls. After re-running the script, the environment variables will be peramently set for your user account. -
Build the project
make install
NOTE: Running the build task will also run the tests
-
Run the application
make serve
NOTE: If you are using a dedicated Java IDE like Eclipse or IntelliJ, you can start the application within the IDE and it will start in development mode, which means any changes on a source file will be automatically reloaded. If you do not run the application in development mode, run
mvn package
when you make changes to pick up those changes in the server. -
Navigate to http://localhost:8080
-
Expose your application to the wider internet using ngrok. You can click here for more details. This step is important and your application won't work if you only run the server on localhost.
ngrok http 8080
-
When ngrok starts up, it will assign a unique URL to your tunnel. It might be something like
https://asdf456.ngrok.io
. Take note of this. -
Configure your TwiML app's Voice "REQUEST URL" to be your ngrok URL plus
/voice
. For example:Note: You must set your webhook urls to the
https
ngrok tunnel created.
You should now be ready to rock! Make some phone calls or receiving incoming calls in the application. Note that the Twilio Voice JS SDK requires WebRTC enabled browsers, so Edge and Internet Explorer will not work for testing. We'd recommend Google Chrome or Mozilla Firefox instead.
When you navigate to localhost:8080
, you should see the web application containing a "Start up the Device" button. Click this button to initialize a Twilio.Device
.
When the Twilio.Device
is initialized, you will be assigned a random client name, which will appear in the top left corner of the homepage.
This client name is used as the identity field when generating an access token for the client, and is also used to route incoming calls to the correct client device.
Under "Make a Call", enter a phone number in E.164 format and press the "Call" button.
Open two browser windows to localhost:8080
and click "Start up the Device" button in both windows. You should see a different client name in each window.
Enter one client's name in the other client's "Make a Call" input field, and press the "Call" button.
You will first need to configure your Twilio Voice phone number (the phone number you used as the TWILIO_CALLER_ID
configuration value) to route incoming calls to your TwiML app. This tells Twilio how to handle an incoming call directed to your Twilio Voice number.
- Log in to the Twilio Console
- Navigate to your Active Number list
- Click on the number you are using as your
TWILIO_CALLER_ID
. - Scroll down to find the "Voice & Fax" section and look for "CONFIGURE WITH".
- Select "TwiML App".
- Under "TwiML App", choose the TwiML App you created earlier for this quickstart.
- Click the "Save" button at the bottom of the browser window.
You can now call your Twilio Voice phone number from your phone.
Note: Since this is a quickstart with limited functionality, incoming calls will only be routed to your most recently created Twilio.Device
.
If you see "Unknown Audio Output Device 1" in the "Ringtone" or "Speaker" devices lists, click the button below the boxes (Seeing "Unknown" Devices?) to have your browser identify your input and output devices.
That's it!
If you have Docker already installed on your machine, you can use our docker-compose.yml
to setup your project.
- Make sure you have the project cloned and that Docker is running on your machine.
- Retrieve the
twilio.min.js
file and move it to thestatic
directory as outlined in Step 3 of the Local Development steps. - Setup the environment variables in the
docker-compose.yml
file. See Twilio Account Settings for information about retrieving these values. - Run
docker-compose --env-file /dev/null up
. - Follow the steps in Local Development on how to expose your port to Twilio using ngrok and configure the remaining parts of your application.
You can run the tests locally by typing:
mvn clean test
Note that you should source your environment variables (source .env
) before running the tests.
Additionally to trying out this application locally, you can deploy it to a variety of host services. Here is a small selection of them.
Please be aware that some of these might charge you for the usage or might make the source code for this application visible to the public. When in doubt research the respective hosting service first.
Service | |
---|---|
Heroku |
Some notes:
- For Heroku, please check this to properly configure the project for deployment.
- You can also follow this guide to deploy the application to several other cloud services including Google Cloud, Oracle Cloud, etc.
- The CodeExchange repository can be found here.
This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.
No warranty expressed or implied. Software is as is.