Browser-to-Browser calling with SIP.js and Routr
Tags: voip, sip, javascript, webrtc
Published: 2024-02-22 13:08:27

In this tutorial, I will show you how to use SIP.js and Routr to develop seamless calling experiences without losing your hair. By the end of this tutorial, you will be able to apply the same principles to building 1-1 video calls, chat applications, click-to-call buttons, and more.

Remember that this is one way to accomplish this task, and it is especially relevant if you plan to make future calls to the PSTN (Private Switch Telephone Network).

{% github fonoster/routr no-readme %}

## Requirements

Before you start this tutorial, you will need the following:

* Docker Engine installed on your computer or the cloud
* NodeJS 18+ (Use nvm if possible)
* Routr command-line tool (Install with `npm install -g @routr/ctl`)

## Running Routr server with Docker Compose

This tutorial will use Routr to establish a call between two phones running on separate browsers.

The simplest way to run Routr is using Docker Compose. 

To run Routr with Docker Compose, first, create a folder named voipnet and in it, a file named compose.yaml with the following content:

Filename: _voipnet/compose.yml_

```yaml
version: "3"

services:
  routr:
    image: fonoster/routr-one:latest
    environment:
      EXTERNAL_ADDRS: ${DOCKER_HOST_ADDRESS}
    ports:
      - 51908:51908
      - 5062:5062
    volumes:
      # Ensures the data survives container restarts
      - shared:/var/lib/postgresql/data

volumes:
  shared:
```

Notice how we included the environment variable EXTERNAL_ADDRS  in the previous file, whose value must be set to an IP that all parties can reach to avoid wrong signaling.

Also noteworthy is that the ports 51908 and 5062 were opened for administration and signaling.

Next, save the file and run the following command:

```bash
# NOTE: Be sure to update the IP address
DOCKER_HOST_ADDRESS=192.168.1.7 docker compose up
```

The previous command will pull Routr from Docker Hub and run the container. You could also add the `-d` option to run the service in the background.

## Configuring the VoIP network

You will use Routr's command-line tool to issue commands to the server and build the VoIP network.

To build the VoIP network, first create a new Domain with:

```bash
rctl domains create --insecure
```

Notice the `--insecure` flag, which is required since we don't have a TLS certificate.

The output of your command will look similar to the output below:

```bash
Press ^C at any time to quit.
 ›   Warning: Egress rules unavailable due to 0 configured numbers.
? Friendly Name Local Domain
? SIP URI sip.local
? IP Access Control List None
? Ready? Yes
Creating Domain Local Domain... 3b20410a-3c80-4f66-b7b3-58f65ff65352
```

Next, create two sets of credentials—one for John and one for Jane.

To create a set of credentials, issue the following command:

```bash
rctl credentials create --insecure
```

You must do this twice, one for John and one for Jane. Please set John's username to 1001 and Jane's to 1002.

Your output will be similar to this:

```bash
This utility will help you create a new set of Credentials.
Press ^C at any time to quit.
? Friendly Name John Doe - Credentials
? Username 1001
? Password [hidden]
? Ready? Yes
Creating Credentials John Doe - Credentials... 5fbc7367-a59d-4555-9fc4-a15ff29c24c8
```

Finally, create Agents to represent John and Jane using the following command:

```bash
rctl agents create --insecure
```

Follow the prompt and ensure that the username matches that of the credentials.

Your output will look similar to this:

```bash
This utility will help you create a new Agent.
Press ^C at any time to quit.
? Friendly Name John Doe
? Select a Domain sip.local
? Username 1001
? Credentials Name John Doe - Credentials
? Max Contacts 1
? Privacy None
? Enabled? Yes
? Ready? Yes
Creating Agent John Doe... 662a379d-66f1-4e6e-9df5-5126f1dcb930
```

Be sure to repeat the process for Jane.

You might use the `get` subcommand for any previously created resources to verify your settings. For example, to get a list of Agents, you might run this:

```bash
rctl agents get --insecure
```

## Running the SimplePhone with Docker Compose

SimplePhone is a phone built using SIP.js that runs as a Docker container. Please see the documentation at https://sipjs.com/ to develop your implementation.

To run the phone, you must first update the compose.yaml file with the following code:

Filename: _voipnet/compose.yaml_

```yaml
--snip--

  simplephone:
    image: psanders/simplephone:latest
    environment:
      NODE_ENV: production
    ports:
      - 8080:8080

volumes:
  shared:
```

Then, re-run the `docker compose up` command. You can go to [http://localhost:8080](http://localhost:8080) to see the phone when all the services are up.

## Making a call between the two phones

Remember the Agents you created at the start of this tutorial? You will now use the same values to configure two phone instances. 

On a tab on your browser, open an instance of the SimplePhone and enter the information for John; click "Save and connect" followed by "Register."

The SimplePhone will look similar to this:

![A screenshot of the SimplePhone filled with John Doe's credentials](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dgs1h5asw41n7hpxj5e.png)

If you have issues connecting or registering, please inspect the browser's console for errors.

Then, open a new tab or browser and repeat the process for Jane.

Finally, click on the "Call" button to reach John or Jane.

## What's next?

Please comment if you find this tutorial helpful and check out the following relevant tutorials:

- [Calling a door phone from a web browser](https://dev.to/fonoster/calling-a-door-phone-from-a-web-browser-1bko)
- [Building scalable IVRs for businesses with Routr and Asterisk](https://dev.to/fonoster/building-scalable-ivrs-for-businesses-with-routr-and-asterisk-cjd)
- [Simplify SIP.js security with short-lived tokens](https://dev.to/psanders/simplify-sipjs-security-with-short-lived-tokens-mb8)