simonmorley/browser-calls

Browser Calls

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.

See step-by-step tutorial.

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

First you need to install

• Node.js which should also install npm.
• MongoDB

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

   git clone git@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

   You can find your TWILIO_ACCOUNT_SID and TWILIO_AUTH_TOKEN in your Twilio Account Settings. You will also need a TWILIO_PHONE_NUMBER, which you may find here.

   Run source .env.local to export the environment variables

4. Run the application.

   node ./bin/www

   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

5. Run the application.

   $ npm start

6. To actually forward incoming calls, your development server will need to be publicly accessible. We recommend using ngrok to solve this problem.

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

Try it out

1. To create a support ticket go to:

   http://localhost:3000

2. To respond to support tickets (should open two windows or tabs).

   http://localhost:3000/dashboard

Run the tests

You can run the tests locally by typing

npm test

Meta

• No warranty expressed or implied. Software is as is. Diggity.
• MIT License
• Lovingly crafted by Twilio Developer Education.