Browser-to-Browser calling with SIP.js and Routr

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).

fonoster / routr

⚡ The future of programmable SIP servers.

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



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:



# 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:



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:



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:



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:



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:



rctl agents create --insecure

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

Your output will look similar to this:



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:



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



--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 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:

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:

Blog