Comprehensive guide to WebRTC. Part 4/5.

In this part we are going to create a client application which connects two users using signalling server we created in the previous part.

Visual structure:

There will be 2 pages in our app: one for login and another for calling a user.

To start, let’s create a basic HTML page index.html:

Create the client.js file:

Let’s implement a simple login auth. We will simply send a username to the server which will tell if the username has been taken or not. Add the following code:

In the startConnection function we will:
1. Obtain a video stream from the camera
2. Check if the user’s device supports WebRTC
3. Create the RTCPeerConnection object

Add the following code:

Now if you run the server and open a client app you will see your local stream in the top right corner of the screen.

Now we are ready to implement a calling function. The scheme is:
1. UserA send the offer to UserB
2. Once UserB receives the offer he sends the answer back
3. They both start trading ICE candidates

Add the following code:

Now if you open the client app in two tabs in your browser, login 2 users and try to call to another user you may see local and remote streams on the web page. If something goes wrong you may navigate(in Chrome) to View->Developer->Developer Tools, open the Network tab and inspect the traffic for errors.

The last feature is hanging up an in-progress call. Add the following code:

This is out entire client application, client.js file:

Of course there’s a lot to do to make this app better, like checking user input at each part or handling not having enough bandwidth to stream a video call or handling not being able to traverse firewalls or something else. This is just a basic WebRTC application.

That’s all for today :)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">