Skip to content

A sample application which shows you how to make and receive phone calls with a browser and Twilio Client

License

Notifications You must be signed in to change notification settings

andrefortin/browser-calls-node

 
 

Repository files navigation

Twilio

NOTE: This tutorial uses the outdated 1.X version of the Twilio Voice Javascript SDK (formerly called Twilio Client). Click here for information on how to migrate to the 2.X version.

Browser Calls

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.

About

Twilio Client allows your users to make and receive phone calls in their browsers. This tutorial will show you the front-end and backend code necessary to make browser-to-phone and browser-to-browser calls with Twilio Client and Nodejs.

See step-by-step tutorial.

Implementations in other languages:

.NET Java Python PHP Ruby
Done Done Done Done Done

Set up

Requirements

Twilio Account Settings

This application should give you a ready-made starting point for writing your own 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.
TWILIO_NUMBER A Twilio phone number in E.164 format - you can get one here
TWILIO_APP_SID The TwiML application with a voice URL configured to access your server running this app - create one in the console here and use its Sid. Also, you will need to configure the Voice "REQUEST URL" on the TwiML app once you've got your server up and running.
TWILIO_API_KEY / TWILIO_API_SECRET Your REST API Key information needed to create an Access Token - create one here.

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 and use its Sid as the TWILIO_APP_SID environment variable wherever you run this app.

See the end of the "Local development" section for details on the exact URL to use in your TwiML app.

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

Local development

  1. First, clone this repository and cd into its directory.

    git clone https://github.com/TwilioDevEd/browser-calls-node.git
    cd browser-calls-node
  2. Install dependencies.

    npm install
  3. Copy the sample configuration file and edit it to match your configuration.

    cp .env.example .env

    See Twilio Account Settings to locate the necessary environment variables.

  4. Start MongoDB.

    This app requires MongoDB to be running. See how to start the MongoDB service on Windows, MacOS, or Linux (choose your Linux distribution and then see "Run MongoDB Community Edition" in the installation instructions).

  5. Run the application.

    npm start

    Alternatively you might also consider using nodemon for this. It works just like the node command, but automatically restarts your application when you change any source code files.

    npm install -g nodemon
    nodemon ./bin/www
  6. Expose your application to the wider internet using ngrok. This step is important because the application won't work as expected if you run it through localhost. Here, you could read more about why we recommend you to use ngrok.

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

    http://88b37ada.ngrok.io/call/connect
    

    See Create a TwiML App.

  8. Everything is setup, now you can open two tabs in the browser to test the application.

    • 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:

      http://localhost:3000

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

      http://localhost:3000/dashboard

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 .env file as outlined in the Local Development steps.
  3. Run docker-compose up.
  4. Follow the steps in Local Development on how to expose your port to Twilio using a tool like ngrok and configure the remaining parts of your application.

Tests

You can run the tests locally by typing

npm test

Resources

  • The CodeExchange repository can be found here.

Contributing

This template is open source and welcomes contributions. All contributions are subject to our Code of Conduct.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.

About

A sample application which shows you how to make and receive phone calls with a browser and Twilio Client

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 71.9%
  • Pug 22.9%
  • Shell 2.5%
  • CSS 2.2%
  • Dockerfile 0.5%