Code Monkey home page Code Monkey logo

browser-calls-node's Introduction

Twilio

Browser Calls (Node)

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

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.

License

MIT

Disclaimer

No warranty expressed or implied. Software is as is.

browser-calls-node's People

Contributors

bld010 avatar dependabot-preview[bot] avatar eddiezane avatar gverni avatar jarodreyes avatar joliveros avatar jonedavis avatar maylonpedroso avatar nebtrx avatar rojastob avatar sarahcstringer avatar smendes avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

browser-calls-node's Issues

Deprecated NewUrlParser and UnifiedTopology

Hello,
Where do i pass those options to fix those warning please?

C:\browser-calls-node>node ./bin/www
(node:3136) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
(node:3136) DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.

Browser to Browser Voice Call from Support to Customer's browser

Hi Team,
In this app, Browser to Browser Voice Call from Support to Customers Browser is not shown which could be really useful to demonstrate the Twilio SDKs and B2B Voice Calls to SAVE your customers from HUGE telecom bill

Any particular reason? Could you please add this feature so that Support can reach out to customers on the Browser

Not working in iphone safari browser

I have successsfully setup the demo on my live server that is using http protocol.
Now I am testing it on all the platforms to check whether it meets my requirements or not. I am facing problem
on ios mobile browsers.

My requirement is to make conference call demo on both browsers to phone and phone to browser and and it must work on all platforms including cordova apps.

Could you please suggest me some examples or solution of my problem.

Thanks

Code Exchange quality checklist

The purpose of this checklist is to assess the state of this repository, and bring it to an acceptable level for long-term support by completing the tasks listed below.

This checklist is used internally but can be used as a guidance for others

Please check every part of this checklist for us to process your request. You can do this by marking them with [x] instead of [ ].

Documentation

  • LICENSE file exists in repository

  • Code of Conduct exists in repository

  • CONTRIBUTING exists in repository

  • No broken links in README.md

  • Build status exists at top of README.md

  • Set up steps are complete and accurate

  • CodeExchange repository is linked in README.md

GitHub

  • Dependabot set up

  • Dependabot automerge set up

  • Uses GitHub Actions (required for Twilio sample) or other CI

Code

  • Packages/dependencies are up to date

  • Code compiles against latest packages/dependencies

  • Matches CodeExchange Guidelines to the best of ability

Tests

  • Functionality tests have been created

  • All tests pass

App

  • Confirmed sample behaves as expected (after dependencies have been updated)

  • This file has been copied into a wiki entry for the respective repository or added as a GitHub issue

General

  • App is released under a permissive license like MIT or Apache-2

  • I've read and followed the contribution guidelines

  • I've read and implemented my template according to the respective coding guidelines for my project

  • I agree and adhere to the Code of Conduct

  • The template has been authored by me / or my organization and will be kept up-to-date. If the template will not longer be maintained, I'll notify this project.

Call end => "An application error has occured"

Hi, I change the variable that need to be change but when i try to make a call it end with the error message just after the trial phrase. I have an error 404 in logs and ngrok but I don't know where is the error. How can i fix that ? Thanks

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.