How to Install Summer Camp — A WebRTC Phone Written in TypeScript

WebRTC can be used to replace a traditional phone system. In addition it allows you to integrate telephony into your existing web applications more easily. In this tutorial I will guide you through how to install and use Summer Camp, an open source telephone written in Typescript.

Instead of using the WebRTC on the browser directly we use Twilio SDKs to connect the inbound and outbound phone calls. WebRTC is built into all modern browsers and enables real-time communication between peers, for a phone we need a connection to the telephone network. Twilio is a communication platform giving us both, the WebRTC browser SDK and the ability to connect this audio connection to a phone number.

Clone the Repository and Install Dependencies

First let’s clone the repository.

git clone https://github.com/public-park/summer-camp.git

Deploy on Heroku

In this tutorial we will use Heroku as a cloud hosting for your application. In case you do not have an account yet please sign up and create a free account. After you registered, setup the Heroku CLI , a command line tool to deploy and manage your applications.

You can deploy the application in a region that is close to your location, for a full list of available regions please go to Heroku Regions, and use the region code to create the application.

heroku create <your-app-name> --region eu

Heroku manages app deployments with Git, the create command will detect that your directory already has an initialised repository and it will link the heroku remote branch to your repository. You can check if the remote branch was set by running.

git remote -v

We can now deploy the application with the Heroku CLI

git push heroku master

This command will install all dependencies on Heroku and compile TypeScript.

Configure the Application

Open the Heroku Dashboard and go to the application we created. We will now install the database add-on and set the environment variables the application needs.

The phone uses MongDB to store the call history and manage users. Open add-on section and install a MongoDB add-on of your choice. Please note, installing the add-on will add the MONGODB_URI to your environment variables, if you point the project to a database you already own, add the environment variable only.

Open the application settings tab and add the following config variables.

• SESSION_SECRET, the secret to encrypt the JWT session to a large unguessable string
• REACT_APP_AUTHENTICATION_MODE, set this value to local-password-with-registration
• PUBLIC_BASE_URL, the public url, by default, an application is available at its Heroku domain, which has the form <name-of-your-app>.herokuapp.com

We are done with the basic setup, you can now open the application in your browser and you are greeted with the login view.

Login and Register Page

Register and Setup the Phone

Open the register tab with your browser, set a username and a password and register. The phone will show an error message that no valid configuration was found, click the setup icon on the top right to configure your account.

Create a Twilio Account

You need a Twilio account to run this project. If you have not signed up yet, go to the Twilio Sign Up page. To receive phone calls later, you need to buy a number on Twilio.

Create a key on API Key for Twilio. This project does not need a master key, please create a regular key only.

Add the API key and secret to your configuration, in addition copy the accountSid from the Twilio dashboard. After you have saved the configuration you can choose a configuration.

Test your First Phone Call

The setup is now complete, after we saved the setup we are redirected to the main phone view, this time the dial pad is displayed. We can now test our first phone call. If you have configured the phone for inbound calls on the setup you can call your phone number and it is connected to your browser.

Phone Dial Pad

Finalise the Configuration

In a last step you should consider disabling the registration, right now everyone can use your hosted application and register an account. Let’s go back to the Heroku environment variables setting for your application.

Change REACT_APP_AUTHENTICATION_MODE, set this value to local-password and restart you application.

If you now go back to the login screen the registration tab is removed and the REST API endpoint to register a new user is disabled.

What’s Next?

The project is open source, you can now change call routing or the UI of your phone. To deploy your changes commit your changes to the master branch sync it with the remote branch

git push heroku master                                                                                       

If you have any feedback, or you would like to contribute to the project, please contact me on Github.