Building an Internet-Connected Phone with PeerJS

Recently I’ve been fiddling around with WebRTC. WebRTC is a group of API endpoints and protocols that make it possible to send data (in the form of audio, video or anything else really) from one peer/device to another without the need of a traditional server. The issue is, WebRTC is pretty complicated to use and develop with in and of itself, handling the signalling service and knowing when to call the right endpoint can get confusing. But I come bearing good news; PeerJS is a WebRTC framework that abstracts all of the ice and signalling logic so that you can focus on the functionality of your application. There are two parts to PeerJS, the client-side framework and the server, we’ll be using both but most of our work will be handling the client-side code.

Prerequisites

Before we get started, this is an intermediate level tutorial so you should already be comfortable with:

  • Vanilla JavaScript
  • Node
  • Express
  • HTML

I’ll be focussing solely on the JavaScript side of things, so you can copy the HTML & CSS files directly, we won’t be fiddling with them too much. Before we get started, you’ll want to make sure you’ve installed node and your favourite package manager, I’ll be using Yarn but you can use npm or any manager you’re comfortable with.

If you learn better by looking at code and following step by step code, I’ve also written this tutorial in code, which you can use instead.