Browser Calls with Spark

This repository is now archived and is no longer being maintained. Check out the JavaScript SDK Quickstarts to get started with browser-based calling.

About

Learn how to use Twilio's JavaScript SDK to make browser-to-phone and browser-to-browser calls with ease. The unsatisfied customers of the Birchwood Bicycle Polo Co. need your help!

Set up

Requirements

• Java Development Kit version 11 or later.
• ngrok
• A Twilio account - sign up

Twilio Account Settings

This application should give you a ready-made starting point for writing your own appointment reminder application. 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 one here.

Local development

After the above requirements have been met:

1. Clone this repository and cd into it

   git clone git@github.com:TwilioDevEd/browser-calls-spark.git
   cd browser-calls-spark

2. Set your environment variables

   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.

3. Run the migrations:

   ./gradlew flywayMigrate

4. 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.

5. Expose the application to the wider Internet. We recommend using ngrok to solve this problem.

   ngrok http 8080 -host-header="localhost:8080"

   Once you have started ngrok, update your update your TwiML app's voice URL setting to use your ngrok hostname, so it will look something like this:

   http://<your-ngrok-subdomain>.ngrok.io/call/connect
   

That's it!

Docker

If you have Docker already installed on your machine, you can use our docker-compose.yml to setup your project.

1. Make sure you have the project cloned.
2. Setup the environmental variables in the docker-compose.yml file, see the Twilio Account Settings.
3. Run docker-compose --env-file /dev/null up.
4. Follow the steps in Configure Twilio section on how to expose your port to Twilio using a tool like ngrok and configure the remaining parts of your application.

Create a TwiML App

This project is configured to use a TwiML App, which allows us to easily set the voice URLs for all Twilio phone numbers we purchase in this app.

Create a new TwiML app at https://www.twilio.com/user/account/apps/add and use its Sid as the TWIML_APPLICATION_SID environment variable wherever you run this app.

Once you have created your TwiML app, configure your Twilio phone number to use it (instructions here).

If you don't have a Twilio phone number yet, you can purchase a new number in your Twilio Account Dashboard.

Try it out

1. To create a support ticket go to the home page. On this page you could fill some fields and create a ticket or you can call to support.

   https://<your-ngrok-subdomain>.ngrok.io
   

   Note: Make sure you use the https version of your ngrok URL as some browsers won't allow access to the microphone unless you are using a secure SSL connection.

2. To respond to support tickets go to the dashboard page (you should open two windows or tabs). On this page you could call customers and answers phone calls.

   https://<your-ngrok-subdomain>.ngrok.io/dashboard
   

Tests

You can run the tests locally by typing:

./gradlew test

Resources

• The CodeExchange repository can be found here.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.