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

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

1 Comments

  1. BestKandace

    I have noticed you don’t monetize ryzhak.com,
    don’t waste your traffic, you can earn extra cash every month with new monetization method.

    This is the best adsense alternative for any type of website (they approve all sites), for more info simply search in gooogle: murgrabia’s tools

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="">