IITB Summer Internship 2016

Project Report
NG I2I
Real Time Communication
with WebRTC

Principal Investigator
Prof. D.B. Phatak

Project In-Charge
Mr. Rahul Deshmukh

Project Mentors Project Team Members

Mr. Harish Satpute Mr. Omkar Damle
Mr. Rishabh Verma
Mr. Yash Trivedi
 Meeting and Chat

ABSTRACT

Developed a Meeting and chate Application. The main technology used by

applications is JavaScript (WebRTC). WebRTC is an open-source that provides
browsers and mobile applications with Real-Time Communications (RTC)
capabilities via simple APIs. the application supports Multi Peer video
conferencing, Public chat, Private chat, Presentation sharing, Canvas drawing,
and screen recording

We have used functions javascript and HTML In order to provide services for
video and audio communication and other services on the application, For canvas,
the draw() function continuously executes the lines of code contained inside its
block until the program

List of Figures
Name of Figure Page No

Setting up the project - Figure (01) 13

The project folder - Figure (02) 14

Server setting- Figure (03) 14

The HTML file- Figure (04) 15

The CSS file- Figure (05) 16

The JavaScript file - Figure (06) 16

Use case diagram - Figure (07) 17

Page 1
 Meeting and Chat

Contents

Introduction 4 .1
5 Purpose

5 Scope
5 Definitions, Abbreviations

6 Features and Modules .2

6 Features

7 Video Conferencing

7 Participant List and features

7 Room Chat
8 Technologies Used .3
8 JavaScript

9 WebRTC

10 AJAX
11 Material Design
Node.js 11

12 Html
12 Css

Production 13 .4
13 introduction

13 Working environment
13 Implementation
Choice of programming language 13
Development of the application 13

Setting up the Project 14

Creating The Backend 15
Page 2
 Meeting and Chat

The frontend of your application 16.17

5.Design 18
Use case diagram 18
Levels of Control Division and Distribution 19
6. Result and Conclusion 20

7. Future Work 20

8. References 21

Page 3
 Meeting and Chat

Chapter 1

Introduction

Meeting and chat is a suite of web-based and sharing modules comprising of video
conferencing, whiteboard sharing, presentation sharing, and screen recording. Our application
works on all browsers like Google Chrome, Mozilla Firefox, and across all devices like desktop
computers, laptops, tablets, and mobile phones. It doesn’t require the installation of any plugins
or extensions. It allows users to create or join existing meeting rooms. The users can view the
video stream from all the other users and toggle between receiving both audio and video or
only audio in case of poor bandwidth conditions. Users can chat with all the other users of the
meeting room using a public room chat and can chat privately with any other participant using
a one-to-one private chat. It also allows the users to present a presentation to all the other users
in real-time. In addition to this, users can also be recording the meet.

Page 4
 Purpose
In today’s world, everybody wants to remain connected in every way possible. Our prime
aim was to make real-time communication possible in video audio mode and every other
way in which we may increase communication. This was implemented using javascript and
HTML, CSS, and WebRTC. Once the Audio-Video Communication is established, our
application asks for more features and we expand its reach to upload files and documents,
registration with email.
These all features are being performed in real-time using various web technologies.

Scope
Application has a very broad scope spanning the fields of business, distance learning,
.telecommuting/home offices, legal environments
It provides businesses with the ability to meet and to work with others over a distance. Teachers
and students are able to see each other, and discuss topics together in a situation similar to a
traditional classroom setting. It helps users to save resources by meeting with clients and/or
colleagues via videoconference. The use of videoconferencing technology is becoming more
prevalent in today’s courtrooms. A patient in a rural location can easily meet with a specialist from
.anywhere in the world

Definitions and Abbreviations

WebRTC: Web Real-Time Communication o

HTML: HyperText Markup Language o

AJAX: Asynchronous JavaScript and XML o

CSS: Cascading Style Sheet o
JS: JavaScript o
Chapter 2

Features and Modules

Features

1) Dynamic Rooms: The rooms are created dynamically giving users the freedom to name
the rooms according to their choice.
2) Time Elapsed: The users are shown a clock that indicates the time elapsed since the
beginning of the meeting.
3) Public Chat: It is a common per-room chat where the user can type a message which
will be sent to all the members of the room.
4) Private Chat: It is a chat between any two users of the room which is exclusive to them.
5) Videos Mode: Displays the video stream from the cameras of all the other meeting
participants.
6) Presenter Video: While in the canvas drawing mode and the presentation mode, the
video of the current controller will be visible to all the users. after using screen sharing
7) Screen sharing: is the practice of sharing the content of your computer screen with other
meeting participants
8) Screen recording: is a way of sharing a captured screen or video, recording in a window
or full-screen mode
9) Fullscreen: is any object or window that occupies the whole computer screen
10) Rais your hand
11) Whiteboard: on which you can write and draw using special pens
12) Sharing the meeting: with copies of the URL or invit participants
13) About: simply explanation for the application
14) Select Audio Input - Output && Video source
 15) Possibility to Change Themes

Video Conferencing

Our main Audio/Video Conferencing is shown when the user chooses room name and
enters his name and can see the video of other and chat with them privately in this
module
you can see the name of the participants and the state of the video and voise for Each
one

Participant List and features

The list of all the connected participants is shown on the Public Chat feature you find all
participants

This list is responsive as well as interactive. If the number of participants increases, the
user can scroll over the list.

Room Chat

This is a feature that allows all the participants in the room to chat together. If a user enters the
meeting late, the previous messages can still be seen by him.

and it allows chatting with one participant private and sees his name and the time of each
message also you can save messages and clean all messages after you finished chatting you
can close the chat room with close the chat, there is a feature to changing the theme.
Chapter 3

Technologies Used

In this chapter all the technologies which are extensively used in

development are listed and described in brief.

JavaScrip

JavaScript is a high-level, dynamic, untyped, and interpreted programming language. It

is employed by a majority of websites and it is supported by all modern Web browsers
without plugins. JavaScript supports object-oriented, imperative, and functional
programming styles. It has an API for working with text, arrays, dates and regular
expressions.

Reasons for using JavaScript –

Speed - Being client-side, JavaScript is very fast because any code functions can
be run immediately instead of having to contact the server and wait for an answer.

Server Load - Being client-side reduces the demand on the website server.

Increased Interactivity − Interfaces that react when the user hovers over them with
a mouse or activates them via the keyboard can be created.
WebRTC

WebRTC is an open framework for the web that provides browsers and mobile
applications with Real-Time Communications (RTC) capabilities without the need of
either internal or external plugins. It includes the fundamental building blocks for high-
quality communications on the web, such as network, audio and video components
used in voice and video chat applications.

WebRTC enables all kinds of real time communication such as audio, video and text
between users by utilizing the browsers. It is a free, high-quality, complete solution
available that enables communication in the browser.

It includes and abstracts key NAT and firewall traversal technology, using STUN, ICE,
TURN, RTP-over-TCP and support for proxies.

Reasons for using WebRTC –

Ease of use - Real-time communication is supported without the need for additional
applications or plug-ins. Downloading, installing and updating plugins can be complex,
error prone and annoying.

Security - WebRTC enforces the usage of encryption for the media. Thereby, WebRTC
provides a higher security level than most currently available commercial telephony
systems.
AJAX

AJAX (Asynchronous JavaScript and XML) is a set of web development techniques

using many web technologies on the client-side to create asynchronous Web
applications. Previously, each time the browser reloaded a page because of a partial
change, all of the content had to be re-sent, even though only some of the
information had changed. This

placed additional load on the server and made bandwidth the limiting factor on
performance.

With AJAX, web applications can send data to and retrieve from a server
asynchronously without interfering with the display and behavior of the existing page.

Reasons for using AJAX –

 Better interactivity - AJAX allows easier and quicker interaction between user
and website as pages are not reloaded for content to be displayed.
 Compact - With AJAX, several multi-purpose applications and features can be
handled using a single web page, avoiding the need for clutter with several web
pages.
 Material Design

W3.CSS is a Cascading Style Sheet (CSS) developed by w3schools.com. It helps in creating

faster, beautiful, and responsive websites. It is inspired by Google Material Design.
Some of its salient features are as follows:

• In-built responsive designing

• Standard CSS
• Inspired by Google Material Design
• Free to use

Node.js
Node.js is an open-source, cross-platform runtime environment for developing
server-side and networking applications. Node.js applications are written in
JavaScript and can be run within the Node.js runtime on OS X, Microsoft
Windows, and Linux.

Node.js also provides a rich library of various JavaScript modules which simplifies
the development of web applications using Node.js to a great extent.

Some of the important features of Node.js

 Fast − Being built on JavaScript Engine, the Node.js library is very fast in code
execution.
 No Buffering − Node.js applications never buffer any data
 Asynchronous − All APIs of Node.js, non-blocking. It essentially means a Node. the
js-based server never waits for an API to return data.
 HTML

HyperText Markup Language is the computer language that facilitates website

creation. The language, which has code words and syntax just like any other language, is
relatively easy to comprehend and, as time goes on, increasingly powerful in what it
allows someone to create.

HyperText is the method by which Internet users navigate the web. By clicking on
special text called hyperlinks, users are brought to new pages. The use of hyper means it
is not linear, so users can go anywhere on the Internet simply by clicking on the available
links. Markup is what HTML tags do to the text inside of them; they mark it as a specific
type of text. For example, markup text could come in the form of boldface or italicized
type to draw specific attention to a word or phrase.

CSS

Cascading Style Sheets, CSS are a language used to manage the presentation of a web page.
CSS is a recommendation of the World Wide Web Consortium (W3C), like HTML or XML.
Styles allow you to define rules applied to one or more HTML documents. These rules relate
to the positioning of elements, alignment, fonts, colors, margins and spacing, borders,
background images, etc.
The purpose of CSS is to separate the structure of an HTML document and its presentation.
Indeed, with HTML, we can define both the structure (the content and the hierarchy between
the different parts of a document) and the presentation. But this poses some problems. With
the HTML / CSS pair, you can create web pages where the structure of the document is in the
HTML file while the presentation is in a CSS file.
With CSS we can for example define a set of stylistic rules common to all the pages of a
website. This makes it easier to change the layout of an entire site. CSS also allows you to
define different rules for each display medium (a classic browser, a television, a mobile
medium, a braille reader ...). CSS also improves the accessibility of web documents.
Chapter 4
Production

Introduction

The choice of development tools greatly affects the cost of programming time, as well as the
flexibility of the product to be produced.
This phase consists of transforming the conceptual model established previously into
software components
Working environment
The working environment is made up of two parts called the hardware environment and the
software environment.
 hardware environment:
1. Operating system: Windows 10 Professional.
2. CPU: core i7 6em
3. Memory: 1000 GB
 software environment:
Visual Studio Code ,éditeur 

Implementation

1. Choice of programming language:

JavaScript programming language. Indeed, Java promises to be one of the major
developments in programming. an efficient, high-performance, standard, and
easy-to-learn language (and, moreover, free) are available.
HTML markup language that defines the structure of your content
CSS It is a style sheet language, that is, it allows you to apply styles to different
selected elements in an HTM document

2. Development of the application:

In this part, we will present the different phases of the realization of our project by
mentioning the screens prints of our application.
1. Setting up the Project

Step 1.1. Download Node.Js

You can download Node.Js for your platform by clicking on this link. Downloading
Node.Js will automatically install NPM (Node Package Manager) on your PC.

Step 1.2. Create a node project

Create a New Folder. This folder will be the root directory for our application.
Open a terminal in this folder and run the command npm init.
This will create a file package.json in the root directory of the project.
This file will contain all the necessary information regarding our project like project
dependencies.
Step 1.3. Installing dependencies

In the terminal, run the following command. It will install the dependencies
npm, install (...........) --save
The flag --save will save the name and versions of these dependencies in
package.json for future reference.
After the above command has finished execution, you will see a folder
node_modules created in the root directory of the project. This folder contains the
dependencies that we have just installed.

Figure (01)
2. Creating The BackEnd

Step 2.1. Create a file server.js

server.js is the starting point for our server by default. So create a file server.js at the
root level of our project.
Step 2.2. Create folders

Create folders at the root level of our project

app — contains the static files like HTML and ( js, CSS, image, audio )folders all
this for the frontend

Our application will contain four-page. Inside the app folder, create a file js for each
file HTML that will contain the HTML code for the frontend.

The project structure will now look like the following : Figure (02)

Step 2.3. HTTP Server

Now, we must initialize, HTTP server for our backend. Figure (03)

Figure (02) Figure (03)

3. The frontend of our application

Step 3.1. Create the HTML file Figure (04)

Let’s create the HTML file for our front end.

We will define the CSS and JavaScript for the front-end in app/css/styles.css and
main.js respectively. Hence, we must import those files. In the backend, we
explicitly set public it as the default directory for serving static files. Hence, we
will import the files from css/styles.css & js/main.js in HTML.

Figure (04)
 Step 3.2. Add the CSS code Figure (05)

Figure (05)
Step 3.3. Add the JS file Figure (06)
Now, let’s add JavaScript to our frontend. We had already the folder (js). It is in this
file, we will implement the various methods for using WebRTC

Figure (06)
Chapter 5

Design

Use Case

Figure (07)
Levels of Control Division and Distribution

This application has one Level of Control Division and Distribution, a first participant
who creates the room in the same level with other participants who gets the URL from
the first one

Controls Given:
1. Can Text Chat Privately with any User.
2. Can send messages to all users using Public Chat dialog.
3. Get Video and Audio of all other users in the Meeting.
4. Can Draw on Canvas
5. Can share its own screen to be streamed to all users present in the
Meeting.
6. Can recording screen and save the meet
7. All participant can rais the hand
8. Can drawing on whiteboard
9. Can hide video and mute voice for all participant
10. Can changing your name
11. Can choose UI theme
12. Can changing audio input and output and video source
 Result and Conclusion
Under Real-Time Communication Done successfully implemented a suite of web-based real-
time communication and sharing modules. The users are able to create or join a room. They
are able to receive audio and video streams from all other users. Users can draw on the
whiteboard, share their screen They are also able to communicate with each other using
private or public chat. Our application has been tested successfully on laptops, tablets, and
mobile phones.
Thus done successfully implemented and completed the project

Future Work
The project needs a lot of improvement

 added registration with an email

 add sharing presentation
 add upload file
 add presentation of video
 add control on the participants for each one
 pptx presentations cant be uploaded
 References

1. CSS styling - http://www.w3schools.com/w3css/

2. https://www.html5rocks.com/en/ webrct
3. https://tsh.io/services/web-development/node/
4. https://openclassrooms.com/-apprenez-a-programmer-avec-javascript
5. https://nodejs.org/en/about/
6. https://javascript.info/
7. Analysis of hard real-time communications (article)
8. ACM SIGCOMM Computer Communication Review 112 Volume 44, Number 3,
July 2014
9. https://webrtc.org/