Report Final
Report Final
by
Bachelor of Technology
in
May, 2022
TABLE OF CONTENTS
Declaration………………………………………………………………………….ii
Certificate…………………………………………………………………………...iii
Acknowledgement………………………………………………………………….iv
Abstract……………………………………………………………………………..v
List Of Figures……………………………………………………………………...vi
Chapter 1: Introduction
1.1 Background……………………………………………………………………..... 1
2.4 Applications……………………………………………………………………… 9
2.4.2 Education………………………………………………………….…….9
2.4.6 Governance…………………………………………………………….10
2.5 Education……………..………………………………………………………….12
3.1 Methodology……………………………………………….……………………. 14
3.4 ER Diagram……………………………………………………………………….16
Limitations…………………………………………………………………………….23
5.1 Coding…………………………………………..……………………………………24
5.1.1 INDEX.HTML……………………….………………………………..…..24
5.1.2 ROOM.HTML…………………………………………………………… 25
5.1.3 SERVER.JS………………………………………………………………. 28
5.1.4 LANDING.JS…………………………………………………………….. 32
Conclusion……………………………………………………………………………...40
Future Scope……………………………………………………………………………40
Appendix A ……………………………………………………………….…………41
Deployment Method……………………………………………………….…………41
Appendix B……………………………………………………………….……….…42
Algorithm……………………………………………………………………..……..42
References…………….………………………………………..………..…,………..43
DECLARATION
I hereby declare that this submission is my own work and that, to the best of my knowledge
and belief, it contains no material previously published or written by another person nor
material which to a substantial extent has been accepted for the award of any other degree or
diploma of the university or other institute of higher learning, except where due
acknowledgment has been made in the text.
Signature………………………………… Signature………………………………
Date…………………………………….. Date…………………………………….
Signature………………………………… Signature………………………………
Name…………………………………….. Name…………………………………..
Date…………………………………….. Date……………………………………
ii
CERTIFICATE
This is to certify that the Project Report entitled Online Study Room which is submitted by
Aman Gangwar (1845010006), Aneesh Ali (1845010009), Prachi Varshney (1845010041)
and Keshav Upadhyay (1904500109002) is a record of the candidates own work carried out
by them under my supervision. The matter embodied in this work is original and has not been
submitted for the award of any other work or degree.
iii
ACKNOWLEDGEMENT
It gives us a great sense of pleasure to present the report of the B. Tech Project undertaken
during B. Tech. Final Year. We owe special debt of gratitude to Assistant Professor Mr.Ankur
Kumar, Computer Science and Engineering, S.R.M.S.C.E.T & R, Bareilly for his constant
support and guidance throughout the course of our work. His sincerity, thoroughness and
perseverance have been a constant source of inspiration for us. It is only his cognizant efforts
that our endeavors have seen light of the day.
We also take the opportunity to acknowledge the contribution of Dr. L.S. Maurya, Principal,
S.R.M.S.C.E.T & R, Bareilly for his full support and assistance during the development of
the project.
We also do not like to miss the opportunity to acknowledge the contribution of all faculty
members of the department for their kind assistance and cooperation during the development
of our project. Last but not the least, we acknowledge our friends for their contribution in the
completion of the project.
Signature………………………………… Signature………………………………
Name…………………………………….. Name…………………………………..
Date…………………………………….. Date…………………………………….
Signature………………………………… Signature………………………………
Name…………………………………….. Name…………………………………..
Date…………………………………….. Date……………………………………
iv
ABSTRACT
v
List Of Figures
vi
CHAPTER 1
INTRODUCTION
As computer and electronics technology continues to grow over the ages, many new
innovations continue to flood the industry, creating machines and avenues through which
human activities can be enhanced.
The development of video messaging over media is an important aspect of this growth in
technology. Such information was then able to be packaged and transmitted remotely from
source to intended users. But this was rarely a real time scenario. The best we can get out of
this was a live coverage of an event, which was usually of high cost and difficult for
individuals to own.
The advent of the internet offered better opportunities for inventors to think of better ways of
making the communication of video information from source to target in real time and with
less cost. Many equipment have been developed to this effect. Further improvement has
given birth to what is now known as teleconference.
The word ‘Video conference’ means consultations, discussions. Through video conferencing
two or more locations situated at a distance are connected so that they can hear or both see
and hear each other. It allows the distant sites to interact with each other and with the
teaching end through phone, fax, and e-mail. The interactions occur in real time. This means
that the learners/participants and the resource persons are present at the same time in different
locations and are able to communicate with each other. In some situations, questions can be
faxed/emailed early for response by the resource persons conference is further described by
Matthew Lombard and Theresa Ditton as ’’an illusion that a mediated experience is not
mediated." Today, it often considers the effect that people experience when they interact with
a computer-mediated or computer-generated environment.The conceptualization of presence
borrows from multiple fields including communication, computer science, psychology,
science, engineering, philosophy, and the arts.
1.1 Background
The concept of presence accounts for a variety of computer applications and Web-based
entertainment today that are developed on the fundamentals of the phenomenon, in order to
give people the sense of, as Sheridan called it being there. Since teleconferencing is actually
1
a useful tool in organizations because it is solely used to bridge the geographical distance
between two or more companies, and from my research, we have discovered that it is only
big companies that can actually afford it, so I designed this project in order to curb that trend
that allows smaller companies purchase and also make use of it.
The major objective of this work is to develop a “Computer Based Video Conference”. It also
targets contributing to academic research work.
The need for a teleconference system is obvious for several reasons as shown below:
2
1.4 Scope of the Project
3
CHAPTER TWO
LITERATURE REVIEW
The word 'Video Conference’ means consultations, discussions. Through video conferencing
two or more locations situated at a distance are connected so that they can hear or both see
and hear each other. It allows the distant sites to interact with each other and with the
teaching end through phone, fax, and e-mail. The interactions occur in real time. This means
that the learners/participants and the resource persons are present at the same time in different
locations and are able to communicate with each other. In some situations, questions can be
faxed/emailed early for response by the resource persons.
a. Resource persons present at the same time at the teaching end or different teaching
ends.
b. Learner – resource persons/AV materials at the teaching end.
c. Learner – learner at the learner center.
d. Learner – facilitator/materials/activities at the learner center.
e. Learner – learner at/between other learner centers .
f. Resource person – resource person provides a better interface.
The communication in Video Conferencing is both vertical and horizontal, and the emphasis
is on interaction at all levels. Meaningful interaction in real time is the strength of
teleconferencing, and this sets it apart from other technologies used in education. The
one-way limitation of educational broadcasting is overcome through the technology
configuration.
4
a. Conceptualization
b. Concretization of experience
c. Reflective observation
d. Application
These and other transactional processes of this nature accelerate learning and Communication
skills. Learning is systemized as it takes place in a structured teaching-learning environment.
Teleconferencing could have different technical configurations and applications. It includes
use of telephone for audio conferencing, graphics in addition to audio for audio-graphic
conferencing, television and/or computer for video conferencing. The video conferencing
could be one-way video two-way audio or two-way video. The configuration can be simple
or complex. The presentation can be just talk/discussion or it can be highly structured using
sophisticated visual support. In today‘s terminology video conferencing and teleconferencing
are similar as they function on the same pattern.
The term teleconference was coined in a 1980 article by Marvin Minsky, who outlined his
vision for an adapted version of the older concept of teleoperation that focused on giving
remote participation a feeling of actually being present.
A science fiction entitled Waldo by Robert A. Heinlein proposed a primitive teleconference
master-slave manipulator system in 1942. In his pioneering paper, Minsky wrote: "My first
vision of a remote-controlled economy came from Robert A. Heinlein's prophetic 1948 novel,
Waldo." The year of the publication of Waldo in Minsky's comment in the paper was
incorrect.
The Brother Assassin, written by Fred Saberhagen in 1969, introduced the complete concept
for a teleconference master-slave humanoid system. In the novel, the concept is described as
follows: "And a moment later it seemed to all his senses that he had been transported from
the master down into the body of the slave-unit standing beneath it on the floor. As the
control of its movements passed over to him, the slave started gradually to lean to one side,
and he moved its foot to maintain balance as naturally as he moved his own. Tilting back his
head, he could look up through the slave's eyes to see the master-unit, with himself inside,
maintaining the same attitude on its complex suspension."
5
The first commercially successful teleconference company, Teleport (which was later
renamed TeleSuite), was founded in 1993 by David Allen and Harold Williams. Before
TeleSuite, they ran a resort business from which the original concept emerged, because they
often found businesspeople would have to cut their stays short to participate in important
meetings. Their idea was to develop a technology that would allow businesspeople to attend
their meetings without leaving the resorts so that they could lengthen their hotel stays.
Hilton Hotels had originally licensed to install them in their hotels throughout the United
States and other countries, but use was low. The idea lost momentum, with Hilton eventually
backing out. TeleSuite later began to focus less on the hospitality industry and more on
business- oriented teleconference systems. Shareholders eventually held enough stock to
replace the company's original leadership, which ultimately led to its collapse. David Allen
purchased all of the assets of TeleSuite and appointed Scott Allen as president of the new
company called Destiny Conferencing.
Destiny Conferencing licensed its patent portfolio to HP which became the first large
company to join the teleconference industry, soon followed by others such as Cisco and
Polycom. After forming a distribution agreement with Pleasanton-based Polycom, Destiny
Conferencing sold on January 5, 2007 to Polycom for $60 million. An important research
project in teleconference began in 1990. Headquartered at the University of Toronto, the
Ontario Teleconference Project was a three year, $4.8 million pre-competitive research
project whose mandate was to design and field trial advanced media space systems in a
variety of workplaces in order to gain insights into key sociological and engineering issues.
The OTP, which ended December, 1994, was part of the International Teleconference Project
which linked Ontario researchers to counterparts in four European nations. The Project's
major sponsor was the Province of Ontario through two of its Centers of Excellence the
Information Technology Research Center (ITRC) and the Telecommunications Research
Institute of Ontario (TRIO). The Project was an interdisciplinary effort involving social
sciences and engineering.
6
Video Phone calls (also: video calls and video chat), differ from video conferencing in that
they expect to serve individuals, not groups. However that distinction has become
increasingly blurred with technology improvements such as increased bandwidth and
sophisticated software clients that can allow for multiple parties on a call. In general
everyday usage the term video conferencing is now frequently used instead of video call for
point-to-point calls between two units. Both video phone calls and video conferencing are
also now commonly referred to as a video link.
Webcams are popular, relatively low cost devices which can provide live video and audio
streams via personal computers, and can be used with many software clients for both video
calls and video conferencing.
A video conference system is generally higher cost than a videophone and deploys greater
capabilities. A video conference (also known as a video teleconference) allows two or more
locations to communicate via live, simultaneous video and audio transmissions. This is often
accomplished by the use of a multipoint control unit (a centralized distribution and call
management system) or by a similar non-centralized multipoint capability embedded in each
video conferencing unit. Again, technology improvements have circumvented traditional
definitions by allowing multiple party video conferencing via web-based applications. A
separate webpage article is devoted to video conferencing.
A video conference system is a high-end video conferencing system and service usually
employed by enterprise-level corporate offices. Teleconference conference rooms use
state-of-the art room designs, video cameras, displays, sound-systems and processors,
coupled with high-to- very-high capacity bandwidth transmissions. Typical use of the various
technologies described above include calling or conferencing on a one-on-one, one-to-many
or many-to-many basis for personal, business, educational, deaf Video Relay Service and
tele-medical, diagnostic and rehabilitative use or services. New services utilizing video
calling and video conferencing, such as teachers and psychologists conducting online
sessions, personal video calls to inmates incarcerated in penitentiaries, and videoconferencing
to resolve airline engineering issues at maintenance facilities, are being created or evolving
on an on-going basis.
7
2.3.2 Virtual Presence (virtual reality)
Video conference refers to a user interacting with another live, real place, and is distinct from
virtual presence, where the user is given the impression of being in a simulated environment.
Teleconference and virtual presence rely on similar user-interface equipment, and they share
the common feature that the relevant portions of the user's experience at some point in the
process will be transmitted in an abstract (usually digital) representation. The main functional
difference is the entity on the other end: a real environment in the case of teleconference,
versus a computer in the case of immersive virtual reality.
The Cooperative web or Co-Web refers to a browser-based platform that promises to replicate
the power of face-to-face communications via web touch without sacrificing the quality of
human interactions, using the human sensory elements of vision, sound and manipulation.
2.4 Applications
Application examples could be cited within emergency management and security services,
hospitals, government and education industries.
Video conferencing can be used to establish a sense of shared presence or shared space
among geographically separated members of a group. Video conferencing is essentially a
means for communication and training. It can be used for information dissemination,
guidance in response to policy, consultations with experts, focused group discussions,
interviews, etc.
8
2.4.2 Education
1. Delivery of full courses, lessons, tutoring, project work and training can be provided
to the students through teleconferencing.
2. Delivery of certificate level courses for professional development.
3. These courses can be modular and multi-media in nature comprising print, contact
programs, and audio-video conferencing.
4. Partial support to courses through counseling, etc.
5. Introduction of short/new courses in skill development, vocational training,
professional development, and to address problems related to introduction of new
curriculum, and lack of teachers and facilities.
6. Tutoring in difficult areas of the curriculum.
7. Remedial learning and off-hours teaching can be provided.
8. Enrichment, updating, guidance to additional learning resources, extension of existing
courses.
9. Interaction by students with scientists, experts, decision and policy makers, etc. to
obtain multiple perspectives on an issue.
Teleconferencing is used to provide training and staff development for capacity building in
agriculture, health, nutrition, family welfare, etc. in remote rural areas. It reaches out to a
large number of groups such as community workers, farmers, functionaries, etc. for extension
activities, sharing of experiences, raising of issues, introducing government schemes,
projects, mobilizing for activities and conducting campaigns.
9
Video conferencing has been effectively used for empowerment of women and local
self-government bodies and training of grass root workers spread over large geographical
areas.
In the business and corporate sector, teleconferencing has been used for a variety of purposes
such as organizing conferences, interviews for recruitment, project supervision, problem
solving, consultations, information dissemination and training of the personnel. Education,
training, instruction, information and counseling are merged resulting in an overall
improvement in staff performance.
2.4.6 Governance
Using video conferencing facilities, planners, administrators and executives can directly and
simultaneously interact with people at all levels for speedy dissemination of policy, execution
and monitoring the implementation of projects, problem solving, and providing expert
consultations.
Significant improvements in video call quality of service for the deaf occurred in the United
States in 2003 when Sorenson Media Inc. (formerly Sorenson Vision Inc.), a video
compression software coding company, developed its VP-100 model stand-alone videophone
specifically for the deaf community. It was designed to output its video to the user's television
in order to lower the cost of acquisition, and to offer remote control and a powerful video
10
compression codec for unequaled video quality and ease of use with video relay services.
Favorable reviews quickly led to its popular usage at educational facilities for the deaf, and
from there to the greater deaf community.
Using such video equipment in the present day, the deaf, hard-of-hearing and
speech-impaired can communicate between themselves and with hearing individuals using
sign language. The United States and several other countries compensate companies to
provide "Video Relay Services” (VRS). Video communication equipment can be used to talk
to others via a sign language interpreter, who uses a conventional telephone at the same time
to communicate with the deaf person's party. Video equipment is also used to do on-site sign
language translation via Video Remote Interpreting (VRI). The relative low cost and
widespread availability of 3G mobile phone technology with video calling capabilities have
given deaf and speech- impaired users a greater ability to communicate with the same ease as
others. Some wireless operators have even started free sign language gateways. Sign
language interpretation services via VRS or by VRI are useful in the present-day where one
of the parties is deaf, hard-of-hearing or speech- impaired (mute). In such cases the
interpretation flow is normally within the same principal language, such as French Sign
Language (LSF) to spoken French, Spanish Sign Language (LSE) to spoken Spanish, British
Sign Language (BSL) to spoken English, and American Sign Language (ASL) also to spoken
English (since BSL and ASL are completely distinct to each other), and so on.
Multilingual sign language interpreters, who can also translate as well across principal
languages (such as to and from SSL, to and from spoken English), are also available, albeit
less frequently. Such activities involve considerable effort on the part of the translator, since
sign languages are distinct natural languages with their own construction, semantics and
syntax, different from the aural version of the same principal language. With video
11
interpreting, sign language interpreters work remotely with live video and audio feeds, so that
the interpreter can see the deaf or mute party, and converse with the hearing party, and vice
versa. Much like telephone interpreting, video interpreting can be used for situations in which
no on-site interpreters are available. However, video interpreting cannot be used for situations
in which all parties are speaking via telephone alone. VRS and VRI interpretation requires all
parties to have the necessary equipment. Some advanced equipment enables interpreters to
control the video camera remotely, in order to zoom in and out or to point the camera toward
the party that is signing.
2.5 Education
True Video conference is a multidisciplinary art and science that foundationally integrates
engineering, psychology, and the art of television broadcast. In 1998, Diller and Scofidio
created the "Refresh", an Internet-based art installation that juxtaposed a live web camera
with recorded videos staged by professional actors. Each image was fictional.The narrative
which made it difficult to distinguish which was the live web camera.
12
(Entgrenzte Grenzen II). It was coordinated by Kulturdata, in Graz, Austria, and was
connected around the world.
From 1997 to the present Ghislaine Boddington of shinkansen and has explored, in a multi
group process called The Weave using performing arts techniques, the extended use of
teleconference into festivals, arts centers and clubs and has directed numerous workshops
leading to exploration of teleconference by many artists worldwide. This work has been most
recently applied to extending skills in tele-intuition for young people in preparation for the
future world of work through the NESTA project "Robots and Avatars'' an innovative project
explores how young people will work and play with new representational forms of
themselves and others in virtual and physical life in the next 10–15 years.
Marvin Minsky was one of the pioneers of intelligence-based mechanical robotics and
teleconference. He designed and built some of the first mechanical hands with tactile sensors,
visual scanners, and their software and computer interfaces. He also influenced many robotic
projects outside of MIT, and designed and built the first LOGO "turtle."
13
CHAPTER THREE
SYSTEM ANALYSIS AND DESIGN
3.1 Methodology
This is usually a guideline system for solving a problem with specific components such as
phases, tasks, methods, techniques and tools i.e. we have used WebRTC for projects. It
involves the specification of procedures for collecting and analyzing data necessary to define
or solve the problem for which the research is embarked upon.
FIG 3.1.1
METHODOLOGY USED (WebRTC)
Here, connection provides a drop down menu where different clients including the host can
connect to each other. Unlike connection, disconnection provides a drop down menu where
the different clients including the host can disconnect from each other.
14
3.2 Data Collection
This project was achieved by gathering materials from different sources. One of the
invaluable sources of data was oral interviews, which we have conducted with stakeholders in
industries and prospective users of similar systems. Another source that gave us a wealth of
information was the internet, which provided some of the details used to analyze some key
issues. Several web sites were willing to let go of vital information on video conferences. The
state and federal libraries were also resourceful in these achievements.
Tele-presence has long existed as video conferencing. The core technology used in a video
conferencing system is digital compression of audio and video streams in real time. The
hardware or software that performs compression is called a codec (coder/decoder).
Compression rates of up to 1:500 can be achieved. The resulting digital stream of 1s and 0s is
subdivided into labeled packets, which are then transmitted through a digital network of some
kind (usually ISDN or IP). The use of audio modems in the transmission line allow for the
use of POTS, or the Plain Old Telephone System, in some low-speed applications, such as
video telephony, because they convert the digital pulses to/from analog waves in the audio
spectrum range.
The web server is the main entity responsible for handling the connection of each of the
clients who connect to the network for the first time. It is also responsible for authenticating
the client and maintaining an entry for each client and its information within itself. This web
server has a back-end database attached to it which keeps the static client information. The
web server consults this database whenever it needs any information about the client or needs
to verify any particular client’s credentials. The web server stores a dynamic 2-way mapping
which consists of information of all the online clients.
15
FIG 3.3.1
WEB SERVER AND DATABASE
3.4 ER Diagram
FIG 3.4.1
ER DIAGRAM
This ER (Entity Relationship) Diagram represents the model of Chat Application Entity. The
entity-relationship diagram of Chat Application shows all the visual instruments of database
tables and the relations between User, Group Chat, Chat, Smiles Chat etc. It used structured
data and to define the relationships between structured data groups of Chat Application
16
functionalities. The main entities of the Chat Application are Chat, User, Chat History, Group
Chat, Notification and Smiles Chat.
FIG 3.5.1
USER CONNECTING TO CLIENT
FIG 3.6.1
USE CASE DIAGRAM
18
3.7 FlowChart of program
This is the flowchart of the program, it shows the different stages involved in the operation of
the program. The organization of the program flowchart above describes the directional path
in which the teleconference application is executed.
FIG 3.7.1
FLOWCHART OF PROGRAM
19
Firstly, the server setup is started in which the server application is configured then the
teleconference application is also launched. The various clients now input their unique ip
address in the field provided and it is in turn validated by the server, the server will then pool
the image and voice required for communication. A user may decide to leave the conference
by automatically disconnecting itself from the server.
20
CHAPTER 4
CHALLENGES AND LIMITATIONS
Video conferencing has come a long way as a valuable business tool and will continue to
evolve significantly in the future. With the rapid development of technology, more and more
companies are choosing video conferencing as a favored tool for employees to conduct their
daily communications with colleagues, customers, and partners in a convenient and effective
way. Like all technologies, video conferencing has its advantages and disadvantages. We
have discussed at great length the advantages of video conferencing for enhanced
productivity, to improve remote collaboration, to help build relationships, and to get a better
understanding of the way people are communicating, but what are some of the challenges
related to video-conferencing technology? And in the end, is video conferencing a
worthwhile investment? Let’s take a look:
In order for video conferencing to be used to its full potential, companies must have the
appropriate corporate culture in place. If an organization collaborates in silos, it is unlikely
that the organization will have the required culture in place to use video conferencing
effectively. This technology will be more effective in companies that implement business
process integration, have a younger workforce, and have a true desire to communicate and
collaborate more effectively. Because Millennials make up the majority of the workforce
today and will eventually take it over, this will most likely become a non-issue over time. In
addition, businesses now understand the need for transformation in collaboration and are
moving toward integrating business processes and away from organizational silos, as well as
doing whatever it takes to improve collaboration between locations.
21
video conferencing will find their employees using the technology by example. Without this
buy-in, it will be difficult to reach success.
Smooth transmissions are required for video conferencing to work properly. Issues can result
from problems with software, hardware, or the network itself. Remote connections can be
inadvertently affected by environmental changes like weather or sunspots. The people
supporting the video-conferencing solution must be educated on how to handle these types of
incidents to avoid user frustration.
Many companies have found benefit in rolling out video conferencing to a small trial group
whose members would see the advantages of having the solution available to them. An
example of this might be an engineering team that has people in two or more countries. Once
the team is able to define the benefits for its group, people from that team can sell other teams
on what the benefits might be for them. These “evangelists” can gain support from their peers
by sharing their passion and support for the tool. This can be done at multiple levels, allowing
people to get information and inspiration from people they trust and not necessarily just from
top management.
22
4.6 Lack of Communications
New programs and tools need to be advertised and given a positive image prior to
deployment. Without the advertising, people won’t even know something new is coming or
available. Information and communications should be shared with the entire organization and
will help promote the upcoming new tool, detailing what it is, why it’s launching and when,
how it will save employees time, and how to use it. This will create a buzz around video
conferencing, making it a tool everyone will want to try. At the time of launch, reiterate
information to employees about what the tool can do, why they will want to use it, how it
works, how to get help using it, and how it supports corporate goals.
After the video-conferencing system has launched, it is important to keep track of the metrics
to gauge adoption and determine the need for tweaks. Companies should track enrollment and
usage compared to enrollment and should follow up on feedback from users. If certain groups
are failing to adopt video conferencing, it is important to find out why and to develop benefits
for them to try it. It is also important to share success stories from groups that use video
conferencing and have gained important benefits from its use.
LIMITATIONS
New tools need time and attention for adoption to not only take, but to hold. Basic and
advanced training sessions, lunch-and-learn sessions, newsletters, contests, success stories
with metrics, and feature spotlights can all be used to encourage and maintain
video-conferencing adoption and, eventually, make it a part of the corporate culture. This
article shows all the ways that issues may arise with the implementation of a corporate
video-conferencing solution. For every issue, however, there is a fix, and resellers in the
know can be the solution provider in more than one way. Video conferencing is here to stay
and will only improve and become more beneficial over time. Customer education by
resellers will ensure that there will always be new and better ways to utilize
video-conferencing tools and that now is the time to jump on board.
23
CHAPTER 5
5.1 CODING
5.1.1 INDEX.HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/651046b6c.js" crossorigin="anonymous"></script>
</head>
<body>
<navbar>
<div class="logo">Online Study Room
</div>
</navbar>
<div class="main">
<div class="create-join">
<div class="text"><div class="head">Create Video Meetings in one-click.</div>
<div class="subtext">No sign ups required. Open Source platform.</div>
</div>
<button id="createroom" class="createroom-butt unselectable">Create Room</button><br>
<input type="Text" name="room" spellcheck="false" placeholder="Enter Room Code"
id="roomcode" class="roomcode"><br>
<div class="joinroom unselectable" id="joinroom">Join Room</div>
</div>
<div class="video-cont">
24
<video class="video-self" autoplay muted playsinline></video><div class="settings">
<div class="device" id="mic"><i class="fas fa-microphone"></i></div>
<div class="device" id="webcam"><i class="fas fa-video"></i></div>
</div>
</div>
</div>
<script src="js/landing.js"></script>
</body>
</html>
5.1.2 ROOM.HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>OnlineStudyRoom</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<script src="https://kit.fontawesome.com/6510466b6c.js"
crossorigin="anonymous"></script>
<script>
const params = new URLSearchParams(location.search);
if (!params.get("room")) location.href = "/";
</script>
</head>
<body>
<div class="overlay" id="overlay">
<div class="box">
<div class="head-name">Enter a Name</div>
<input type="text" class="name-field" placeholder="Type here" blink
id="name-field"></input><br>
25
<button class="continue-name">Continue</button>
</div>
</div>
<div class="container-room">
<div class="left-cont">
<div class="video-cont-single" id="vcont">
<div class="video-box">
<video class="video-frame" id="vd1" autoplay playsinline>
</video>
<div class="nametag" id="myname">yourname</div>
<div class="mute-icon" id="mymuteicon"><i class="fas
fa-microphone-slash"></i></div>
<div class="video-off" id="myvideooff">Video Off</div>
</div>
</div>
<div class="whiteboard-cont"><canvas id="whiteboard" height="1000"
width="1000"></canvas>
<div class="colors-cont">
<div class="black" onclick="setColor('black')"></div>
<div class="red" onclick="setColor('#e74c3c')"></div>
<div class="yellow" onclick="setColor('#f1c40f')"></div>
<div class="green" onclick="setColor('#badc58')"></div>
<div class="blue" onclick="setColor('#3498db')"></div>
<div class="orange" onclick="setColor('#e67e22')"></div>
<div class="purple" onclick="setColor('#9b59b6')"></div>
<div class="pink" onclick="setColor('#fd79a8')"></div>
<div class="brown" onclick="setColor('#834c32')"></div>
<div class="grey" onclick="setColor('gray')"></div>
<div class="eraser" onclick="setEraser()"><i class="fas fa-eraser"></i></div>
<div class="clearboard" onclick="clearBoard()"><i class="fas
fa-trash-alt"></i></div>
</div>
</div>
26
<div class="footer">
<div class="utils">
<div class="audio">
<i class="fas fa-microphone"></i>
</div>
<div class="novideo">
<i class="fas fa-video"></i>
</div>
<div class="screenshare tooltip">
<i class="fas fa-desktop"></i>
<span class="tooltiptext">Share Screen</span>
</div>
<div class="board-icon tooltip">
<i class="fas fa-chalkboard"></i>
<span class="tooltiptext">Whiteboard</span>
</div>
<div class="cutcall tooltip">
<i class="fas fa-phone-slash"></i>
<span class="tooltiptext">Leave Call</span>
</div>
</div>
<div class="copycode-cont">
<div class="roomcode"></div>
<button class="copycode-button" onclick="CopyClassText()">Copy Room
Code</button>
</div>
</div>
</div>
<div class="right-cont">
<div class="head-title">
<div class="chats"><i class="fas fa-comment-alt mr-1"></i>Chats</div>
</div>
<div class="chat-cont">
27
</div>
<div class="chat-input-cont">
<div class="ci-cont"><input type="text" class="chat-input" placeholder="Type
chat here.."></div>
<div class="ci-send"><button class="chat-send">Send</button></div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script src="js/room.js"></script>
</body>
</html>
5.1.3 SERVER.JS
const path = require('path');
const express = require('express')
const http = require('http')
const moment = require('moment');
const socketio = require('socket.io');
const PORT = process.env.PORT || 3000;
const io = socketio(server);
app.use(express.static(path.join(__dirname, 'public')));
28
let roomBoard = {};
socket.join(roomid);
socketroom[socket.id] = roomid;
socketname[socket.id] = username;
micSocket[socket.id] = 'on';
videoSocket[socket.id] = 'on';
});
29
else if (msg == 'unmute')
micSocket[socket.id] = 'on';
else if (msg == 'videoon')
videoSocket[socket.id] = 'on';
else if (msg == 'videooff')
videoSocket[socket.id] = 'off';
socket.on('getCanvas', () => {
if (roomBoard[socketroom[socket.id]])
socket.emit('getCanvas', roomBoard[socketroom[socket.id]]);
});
30
socket.on('draw', (newx, newy, prevx, prevy, color, size) => {
socket.to(socketroom[socket.id]).emit('draw', newx, newy, prevx, prevy, color, size);
})
socket.on('clearBoard', () => {
socket.to(socketroom[socket.id]).emit('clearBoard');
});
socket.on('disconnect', () => {
if (!socketroom[socket.id]) return;
socket.to(socketroom[socket.id]).emit('message', `${socketname[socket.id]} left the
chat.`, `Bot`, moment().format(
"h:mm a"
));
socket.to(socketroom[socket.id]).emit('remove peer', socket.id);
var index = rooms[socketroom[socket.id]].indexOf(socket.id);
rooms[socketroom[socket.id]].splice(index, 1);
io.to(socketroom[socket.id]).emit('user count', rooms[socketroom[socket.id]].length);
delete socketroom[socket.id];
console.log('--------------------');
console.log(rooms[socketroom[socket.id]]);
});
})
31
5.1.4 LANDING.JS
let micAllowed = 1;
let camAllowed = 1;
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(localstream => {
videoCont.srcObject = localstream;
})
function uuidv4() {
return 'xxyxyxxyx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
const createroomtext = 'Creating Room...';
32
if (createButton.innerHTML < createroomtext) {
createButton.innerHTML = createroomtext.substring(0,
createButton.innerHTML.length + 1);
}
else {
createButton.innerHTML = createroomtext.substring(0,
createButton.innerHTML.length - 3);
}
}, 500);
location.href = `/room.html?room=${uuidv4()}`;
});
joinBut.addEventListener('click', (e) => {
e.preventDefault();
if (codeCont.value.trim() == "") {
codeCont.classList.add('roomcode-error');
return;
}
const code = codeCont.value;
location.href = `/room.html?room=${code}`;
})
codeCont.addEventListener('change', (e) => {
e.preventDefault();
if (codeCont.value.trim() !== "") {
codeCont.classList.remove('roomcode-error');
return;
}
})
cam.addEventListener('click', () => {
if (camAllowed) {
mediaConstraints = { video: false, audio: micAllowed ? true : false };
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(localstream => {
videoCont.srcObject = localstream;
33
})
cam.classList = "nodevice";
cam.innerHTML = `<i class="fas fa-video-slash"></i>`;
camAllowed = 0;
}
else {
mediaConstraints = { video: true, audio: micAllowed ? true : false };
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(localstream => {
videoCont.srcObject = localstream;
})
cam.classList = "device";
cam.innerHTML = `<i class="fas fa-video"></i>`;
camAllowed = 1;
}
})
mic.addEventListener('click', () => {
if (micAllowed) {
mediaConstraints = { video: camAllowed ? true : false, audio: false };
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(localstream => {
videoCont.srcObject = localstream;
})
mic.classList = "nodevice";
mic.innerHTML = `<i class="fas fa-microphone-slash"></i>`;
micAllowed = 0;
}
else {
mediaConstraints = { video: camAllowed ? true : false, audio: true };
navigator.mediaDevices.getUserMedia(mediaConstraints)
.then(localstream => {
videoCont.srcObject = localstream;
34
})
mic.innerHTML = `<i class="fas fa-microphone"></i>`;
mic.classList = "device";
micAllowed = 1;
}
})
FIG 5.1.5.1
PACKAGES INSTALLED AND USED
35
5.1.6 RUNNING THE SERVER
FIG 5.1.6.1
RUNNING SERVER
FIG 5.2.1
FRONT PAGE
36
FIG 5.2.2
ENTERING NAME TO JOIN ROOM
FIG 5.2.3
MAIN PAGE
37
FIG 5.2.4
WHITEBOARD
FIG 5.2.5
SCREEN SHARING
38
FIG 5.2.6
CHAT BOX
FIG 5.2.7
TOOLS
FIG 5.2.8
LINK
39
CHAPTER 6
CONCLUSION AND FUTURE SCOPE
Conclusion
It was quite surprising to find that almost all of the well-known video conferencing solutions
(like Zoom, Teams, Webex, Gotomeeting or Skype) do not provide a service with a data
privacy agreement conforming to European law. There are exceptions, and the review lists
several solutions that do conform to legal requirements as well as provide secure and private
solutions.
All services that did pass the legal requirements did also pass the security and privacy
requirements, at least for the least-demanding use case outlined in the review. Three video
conferencing solutions did pass all requirements, and two of these are open source software -
including the one with strongest end-to-end encryption.
While not all criteria in this review might be applicable to your specific requirements, this
review does provide valuable insight into how to conduct an assessment, and especially the
findings of the legal review should be thought-provoking. The review also gives a good
overview over video conferencing solutions available.
Future Scope
Pinning ideas and dynamic content on virtual walls and sharing notes in realtime from any
device (laptop, phone) within a few seconds are practical examples of living in a mixed
reality. Digital objects become physical in virtual rooms, so you can scroll through them –
pick up images and contents you like and toss them up on the virtual wall. Anyone can enter
and exit these virtual rooms and contribute at any time as if they are real physical rooms.
These all might be in concept phases for now, but as these technologies are adopted by
companies, the way we work will forever be changed. With the help of technology, we are
overcoming the barrier of distance to work together and to satisfy our human desires for the
direct, face-to-face interaction that builds commitment and trust.
40
Appendix A
Deployment method
If you haven't already, log in to your Heroku account and follow the prompts to create a new SSH
public key.
$ heroku login
$ git add .
$ git commit -am "make it better"
$ git push heroku master
41
Appendix B
Algorithm
42
REFERENCES
43