nexmo-community / call-from-browser

Make phone calls from a web browser with Nexmo In-App Voice and Vue.JS

Make a Phone Call from a Web Browser with Nexmo In-App Voice and Vue.JS

An application that allows you to make phone calls from your web browser using Nexmo In-App Voice and Vue.JS.

You can read how the Make a Phone Call from a Web Browser with Nexmo In-App Voice and Vue.JS app was built on the Nexmo blog.

Prequisites

• A Nexmo account
• Something like Ngrok for local tunneling

Setup

Replace example.com with a URL to a publicly accessible URL that tunnels through to your local server.

nexmo app:create call-from-browser https://example.com/answer https://example.com/event --keyfile=server/private.key
nexmo user:create name=demo
touch server/.env

Add configuration to .env:

NEXMO_PRIVATE_KEY=private.key
NEXMO_APP_ID=YOUR_APP_ID
NEXMO_FROM_NUMBER=A_NEXMO_NUMBER
NEXMO_APP_USER_NAME=demo

Install Dependencies

yarn install
cd server
yarn install
cd ..

Running the App Locally

Compile and hot-reload Vue.JS App in development:

yarn run serve

Run the application server:

node server/index.js

Setup a local tunnel to the Node server:

ngrok http 3000

Update the Nexmo Application with the Ngrok (or other) URL e.g.:

nexmo app:update NEXMO_APP_ID "call-from-browser" https://SUBDOMAIN.ngrok.io/answer https://SUBDOMAIN.ngrok.io/event

Navigate to the Vue.JS application at http://localhost:8080, enter a valid phone number and click the button to make a call.

Deploying to Heroku

Using CLI

Ensure you have run through the Setup steps above. You'll additionally need the Heroku CLI installed.

Clone the repo:

git clone [e-mail]:nexmo-community/call-from-browser.git
cd call-from-browser

Create a Heroku application replacing HEROKU_APP_NAME with the name you'd like to give the app:

heroku apps:create HEROKU_APP_NAME

And take a note of the Heroku URL your web app has e.g. https://HEROKU_APP_NAME.herokuapp.com/ Then update your Nexmo application with the Heroku URL:

nexmo app:update NEXMO_APP_ID "call-from-browser" https://HEROKU_APP_NAME.herokuapp.com/answer https://HEROKU_APP_NAME.herokuapp.com/event

Set the Heroku environment variables up to match your local environment variables in .env but provide the full string of the private.key contents for the NEXMO_PRIVATE_KEY value:

heroku config:set NEXMO_PRIVATE_KEY="$(cat server/private.key)"
heroku config:set NEXMO_APP_ID=YOUR_APP_ID # see .env or .nexmo-app for value
heroku config:set NEXMO_APP_USER_NAME=demo
heroku config:set NEXMO_FROM_NUMBER=YOUR_NEXMO_NUMBER # set if you have a Nexmo Virtual Number

Push the code to Heroku:

git push heroku master

Using the Deploy to Heroku button

WIP: See https://github.com/nexmo-community/call-from-browser/tree/deploy-to-heroku-button

Additional Development Notes

Compiles and minifies for production

yarn run build

Lints and fixes files

yarn run lint