Now that we have implemented our own signaling server, it is time to build an application to utilize its power.We are going to build a client application that allows two users on separate machines to connect and communicate in real time using WebRTC. By the end we will have a well-designed working example of what most WebRTC applications function like.

We will cover the following topics:

  • Getting a connection to our server from a client
  • Identifying users on each end of the connection
  • Initiating a call between two remote users
  • Hanging up a finished call

The client application

The goal of the client application is to enable two users to connect and communicate with each other from different locations. This is often seen as the hello world of WebRTC applications, and many examples of this type of application can be seen around the Web and at WebRTC-based conferences and events. Chances are you have used something much similar before to what we will build in this chapter.

Our application will have two pages in it: one for selecting a username and the other for calling another user. Keep in mind that the page itself will be extremely simplistic in nature. We will mostly be focusing on how to build the actual WebRTC functionality. We will now look at the initial wireframe mock-ups to be used as a guideline before building the application.

You can say that it is not a complex application by any means. The two pages will be the div tags that we will switch out using JavaScript. Also, most input is done through simple event handlers. If you have done some basic HTML5 and JavaScript programming, the code in this chapter should look familiar.

What we are going to focus on is integrating our application with our signaling server. One way to test this is by opening two browser tabs so that both point to the same page and have them call each other.