Real Time Chat With WebRTC

Inspiration

The most frequently used application for connecting and doing Live Video Chat is Skype. However, I always had some or the other problem with Skype. Sometimes it had to be updated, other times the other person's app had some issue and the rest of the times, well I didn't have Skype installed.

So, Skype didn't so work out for me. Now what?

Well, I heard there's this new thing out there called WebRTC that let's you do Video Chatting through the Browser directly. Wait....... Without any applications being installed, updated or simply logged into, I can Video Chat only if I have a Browser????

Yes. Yes, you heard it correctly. The icing on the cake, it's completely Open Source.

What is WebRTC ?

WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs.

Yes, Javascript APIs that let you connect Peer to Peer and exchange Video information. For more details see this Google video :-

Download and Install Node.js

About Node.js :

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.

To set up :

1. Download the latest version from :-

https://nodejs.org/en/download/

2. Install Node.js.

Why do we need Node.js :-

Node.js will help us to create a HTTPS Server, where our HTML Webpage will reside. For this Chat Application to work , we need to visit this HTML Webpage which will be hosted on the Node.js Server.

Get the Code

Clone it from GitHub :

1. Go to

https://github.com/ShubhamCpp/Real-Time-Chat-WebRT...

A. Windows

2. Download this Repository as zip. Then extract it to the Specified Folder.

B. Linux or Mac OSX

3. Install git :-

In Terminal type :

apt-get install git

OR

opkg install git

(Depending on your Linux Distribution)

4. Clone this Repository using :-

git clone https://github.com/ShubhamCpp/Real-Time-Chat-WebR...

Set Up a HTTPS Server

In order to get the Chat Application to work, we need to set up a HTTPS Server where the HTML Webpage resides.

Note that a HTTP Server will not work as a few functions from the WebRTC Javascript API, do not support HTTP any more. These includes GetUserMedia, a function that lets us capture the Video and Audio from the Webcam(any Camera device) and display it on the Webpage.

A. Windows :-

1. Open cmd as Administrator. Go the the directory where you downloaded and extracted the files.

2. Make sure node is added in the list of Environment Variables.

B. Linux :-

1. Open Terminal.

2. Go the the directory where you downloaded and extracted the files.

Before running the Server ( Windows or Linux ) we need to install a few things :-

3. This can be done by using npm, Node.js' installation manager. In cmd or Terminal, Type :

npm install node-static

4. Now, we will run the Server ( On Windows or Linux ), Type :

node server.js

This will create a HTTPS Server at the https://local host:3000.

If you get an errors, like module not found, then install them using `npm install `. For reference see Step 3.

Note :- WebRTC now works only on HTTPS. HTTP is no longer supported. HTTPS requires certain Permissions.
The Certificates are in the HTTPS_Permissions Folder. However, these are not completely verified. You will be able to host the Server. However, the Browser will give you a Warning saying that the Certificates are invalid. Proceed to the Webpage.

Warning

To view the Chat Application, one must go to :-

https://localhost:3000 or https://localhost:3000 where x.x.x.x is the local IPv4 Address.

To view your IP Address, :

A. Windows :

1. Go to cmd.

2. Type :

ipconfig

B. Linux

1. Go to Terminal

2. Type :

ifconfig

In my case, my IP Address is :-

172.16.211.4

So I should visit :-

https://172.16.211.4:3000/

However, when I go to the URL, I get a Warning :-

` Your connection is not secure `
"The owner of 172.16.211.4 has configured their website improperly. To protect your information from being stolen, Firefox has not connected to this website. "

This is happening because HTTPS requires a set of Certificates or Permissions to be associated with it. The Certificates are in the HTTPS_Permissions Folder in our case, however, they are not completely Verified.

However, this is nothing to be afraid of as we are just testing it locally.

So, click on " Add Exception " (Firefox) or " Proceed " ( Chrome ).

Note :- IF you plan to use this Chat Application for business use, please buy a HTTPS domain.