See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/331344763

Peer to Peer Multimedia Real-Time Communication System based on WebRTC

Technology

Article in International Journal for the History of Engineering & Technology · February 2019

CITATIONS READS

22 8,762

3 authors, including:

Zinah Nayyef Sarah Faris Amer

University of Baghdad Dijlah University College
4 PUBLICATIONS 26 CITATIONS 1 PUBLICATION 22 CITATIONS

SEE PROFILE SEE PROFILE

All content following this page was uploaded by Sarah Faris Amer on 26 February 2019.

The user has requested enhancement of the downloaded file.

 International Journal of Engineering & Technology, 7 (2.9) (2018) 125-130

International Journal of Engineering & Technology

Website: www.sciencepubco.com/index.php/IJET
Research paper

Peer to Peer Multimedia Real-Time

Communication System based on WebRTC Technology

Zinah Tareq Nayyef1, Sarah Faris Amer1, Zena Hussain1

1Department of Computer science, Dijlah University College

Abstract- In the modern world and fast development of the internet, the connection among people is being very significant
than ever, people are looking for new methods to do advance communication between them without any issue, real-time
communication is one of this ways. WebRTC (Web real-time communication) is a futuristic technology that makes real-time
communication capabilities in audio, video and data transmission possible in real time communication through web browsers
by using JavaScript APIs (Application Programming Interface) without the plug-in. In this paper, we proposed a web peer to
peer real time communication system that allows users to communicate with high-speed data transmission over the
communication channel using WebRTC technology, HTML5 and use Node.js server address. The result shows that the system
is stable, fully functional, safe and can use in a practical network to transmit and receive multimedia data in real time between
users.

Keyword: WebRTC, Nood.js server, HTML5, JavaScript APIs, multimedia.

1.1 Introduction: In this paper, we introduce a system that afford

multimedia transmission service such as video and audio,
The extreme development of modern technology in identifies the user and detects any other users of the system,
the transfer of multimedia and computer communications satisfying the basic requirements to be considered secure
requires high-quality communication among people. To without complicated installation or setup actions within a
satisfy this growing need, real-time communication process web browser on a variety of devices and operating systems
was implemented [1]. based on WebRTC.
Real-time communication (RTC) is a new standard 1.2Real-Time Communication with WebRTC
and industry-wide effort that expand the web browsing A. WebRTC Architecture
model that allows access information area like social WebRTC follows the semantics client-server
media, chat, video conferencing, and television over the organizer with the concept of peer-to-peer communication
internet, and unified communication, Users of these among the browsers as shown in Figure (1). The connection
systems can view, record, remark, or video contents flow. manages the media path to permit a direct flow between
browsers. Network signals are transmitted during the Web
The open source project WebRTC enabled users of
Servers that help in modifying, interpreting or managing
these systems to view video content or record, comment on
the signals, as it required by WebSockets or HTTP [2,7]. It
or stream it to achieve real-time communication between
was noted that the signals between the browser and server
web browsers [2][3]. WebRTC is a form of real-time
are not uniform in WebRTC, where they are part of the
communication technologies that have added standards of
application. Web servers can communicate using the
API (Application Programming Interface) that have made
standard signaling protocol such as SIP (Session Initiation
real-time multimedia transfer such as voice, and video
Protocol) or Jingle [7]. Otherwise, a property signaling
(including codes) available to web browser without a plug-
protocol can be used for this goal.
in that makes high-quality multimedia communication from
peer- to- peer available to web developers without
traditional plug-in components using some JavaScript
codes [4]. WebRTC is an open sourced standard from
Google in 1122 for the multimedia web systems. At this
time, it is included in Web browsers like Firefox, Chrome,
opera, etc. In future, this technology will be included in all
browsers without plug-in components, which can end the
threat of virus while providing interactive communication
[5][14].
Copyright © 2018 Authors. This is an open access article distributed under the Creative Commons Attribution License, which permits
unrestricted use, distribution, and reproduction in any medium, provided the original work is properly cited.
126 International Journal of Engineering & Technology

Figure (2) Real-Time communication in the

Figure (1) The WebRTC Trapezoid browser.
B. The Browser in WebRTC Function C. WebRTC API

WebRTC application (usually written using HTML5, The W3C (World Wide Web Consortium)
CSS, and JavaScript) is interacted with several web WebRTC API allows JavaScript application to take the
browser by the WebRTC API (Application Programming benefit of the real-time capabilities of an uncommon
Interface), which allow proper use and management of the browser’s. The real-time browser function as shown in
Real-time browser function, as shown in Figure (2). Using Figure (2), which was implemented at the browser center,
fundamentally WebSocket technology, signals can be provides the necessary function for setting the video, audio,
exchanged between online participants [6, 8]. and data channel required. Three basic concepts that been
The WebRTC web application interacts with relied upon in the design of the API (Application
browsers that use both standers application of API and Programming Interface): MediaStream, PeerConnection,
WebRTC application, proactively (e.g. inquiry browser DataChannel [10].
competency) and an interactive way (e.g. receiving a 1. MediaStream
cross-browser notification) way [4, 3]. MediaStream represents media streaming from a local
Real-time imaging communication (Like a video, and media device like a microphone, webcam [11][4]. The web
audio call) among two browsers includes direct media application must request user access to make and utilize a
streaming among the two browsers, within the media path local stream through “GetUserMedia ()” function.
parley and create an instance of multifaceted interaction 2. PeerConnection
through the following entities [9]: RTC PeerConnection reads the output data from
 The caller and caller browser are using JavaScript MediaStream and creates the connection between two
application (using JavaScript API). users. To create the peer-to-peer connection, the STUN and
 The JavaScript application for caller and TURN protocols are used by ICE (Interactive Connectivity
application provider ( typically a web server) Establishment) structure as its core of NAT (Network
 The JavaScript application for called and caller Address Translator) where these protocols are provided by
browser (through the application browser Google [10].
JavaScript API). 3. DataChannel
The RTCDataChannel API is a bi-directional data
channel between two peers provides the possibility of
exchanging random data among them. Each
RTCDataChannel provides the following [12]:
 Reliable or unreliable transport of messages.
 In-order or out-order transport of messages.
D. How to Use WebRTC:
The four procedure of setting up WebRTC is
illustrated in figure (3) [13].
International Journal of Engineering & Technology 127

 All server-side and client-side information that

transmitted is secure and encrypted using high secure
protocols server which is used to distribute the content
from different remote sources. Before the flow of data
begins, the server application will verify user session
and licenses for each demand. If the session has
licenses for requested content and is valid, the flow
will begin.

• The information contained in any request is noted by
the server, and on that basis informs the user of
incoming messages and calls. This server listens for
calls or calls during the requested request creation
process, information about the paths between the
users and request parameters required for each call
participant will be transferred by the server. Two
servers connected together; Apache server for
Website and Node.JS server for implementing
WebRTC technology. Videos and images files that
Figure (3) WebRTC Session Establishment, API View uploaded by a user to the server will be compressed
1.3 System design while maintaining high resolution of uploaded files.
The system design to provide video, audio and chat • Create a Database (using MySQL) consisting of
communication with the mechanism of user identification many tables used to store information about users
and discovery of other users of the system without and their activities such as video calls, user logins,
installation or setup procedures as illustrated in Figure (4). and sessions. All important information of users that
The proposed system is divided into several parts: stored in Database is encrypted by using high
complex encrypt methods to protect Database and
Website from outside attacks like XSS attack.
• Using a HTML5, CSS3, JavaScript and jQuery,
JSON, AJAX Techniques on client-side and used
PHP 5.5, PHP: PDO for SQL instructions and
Node.JS on server-side.

1.4 Experimental Result

A. User interface
The Web page of Website which is named
“Skyline” consist of Log in the panel for entering User
Name and Password as referred by the first and second
arrow and the third arrow refers to “Log in” button. In
the case that user forgotten password than by click
“Forget Password?” to get help to retrieve a password
as referred by the fourth arrow. If the user is not
subscribed, so, there is a need to go to “sign- up” web
page of the website by clicking “Join us” link where
the fifth arrow referring to it as shown in Figure (3).

Figure (4) Flowchart of the proposed system

Figure (5) User interface of Website.

128 International Journal of Engineering & Technology

One of the website features is the ability to compress files

like profile image which selected by the user.

Figure(8)Settings of the web page.

D. Frind Requests & Chat Box
If the user “wadhahhussain’ click on a friend name
“ahmedali” the chat box between them will appear and they
can send messages to each other as shown in Figure (6).
Messages with gray color from user “A” and messages in
pink color from user “B” on the perspective of each user as
shown in Figure (7) and Figure (8).

Figure (6) Encrypted information in the database.

B. Home Page of Website
After clicking “Log in” in “sign in” the user will
redirect to the home page of Website as shown in figure
(5).

Figure (9) Friend request & Chatbox.

Figure (7) Homepage of user “wadhahhussaain”.

The arrows in Figure (5) indicate in order:-
1. Edit image2. Edit profile link
3. Username 4. Search field that can use to find a new
friend.
5. Postbox 6. Chatbox
7. New friend requests notification
8. New messages notifications
9. Post notifications
C. Settings Web page
Edit profile in “home page” will redirect the user to another
web page named “Settings” which enable the user to
change basic information like username, password, image
and another information as shown in Figure (6). After
clicking “Confirm” the information will send to the server
to ensure that it complies with the conditions of Website.
International Journal of Engineering & Technology 129

and second arrow refers to sending video/audio call while

third arrow refers to room name which both users
communicate through it.

Figure (12) Contact call.

Figure (10) user “Wadhah Hussain”.

Figure (13) Incoming call.

Figure (11) user “ahmedali”.

If user “Wadhah Hussain” click on call link

where first arrow referring as shown in Figure (10) and
second arrow refers to “Contact Call” box and then he Figure (14) Video/Audio call of user ‘wadhah Hussain”/
waiting for “ahmedali” to accept the offer as shown in Image black deliberately.
Figure (11).if the user accept the call the Website will open
video/audio chat window for each user as shown in Figure
(12) where first arrow refers to receiving video/ audio call
 130 International Journal of Engineering & Technology

1.5 Conclusion [12] BranislavSredojev, Dragan Samardzija and Dragan

The use of WebRTC technology enabled the Posarac, “WebRTC Technology Overview And Signaling
implementation of secure and high data transmission Solution Design And Implementation”, MIPRO 2015/CTS.
between users as peer-to-peer or peer-to-group connection [13] Alan B.Johnston, Daniel C. Burnett, “WebRTC APIs and
in real-time communication, therefore, anyone can create RTCWeb Protocols of the HTML5 Real-Time Web”, third
their own Webpage or application such as real-time sharing edition, digital codex LLC,2013.
files, real-time communication environment as messaging [14] M. H. Ali, M. F. Zolkipli, M. A. Mohammed, and M.
chat or video/audio conferencing this opened the way for M. Jaber, “Enhance of extreme learning machine-genetic
programmers and developers to enter the actual job market algorithm hybrid based on intrusion detection system,” J.
and compete with social media owners. Using WebRTC Eng. Appl. Sci., vol. 12, no. 16, 2017.
technology allows us to create a webpage with the most
powerful features, allowing each user to connect to another
via Text messages, video/audio call by using simple
JavaScript APIs and Node JS. The server associated with
Google STUN and TURN server.
Reference:

[1] WenPeng Wang, Lingli Mei, “A design of Multimedia

Conferring System Based on WebRTC Technology”,
Boston University, IEEE, 2017.
[2] Zafran M RM, Gunathunga L G K M, Rangadhari M I
T, Gunathne M D D J, Kuragala K R S C B,
MrDhishanDhammearatchi, “Real Time Information and
communication Center based on WebRTC”, international
journal of science and research Publication, volume 6, Issue
4, ISSN 2250- 3153,April 2014.
[3] IgorDujlovic, Zoran Duric, “Cross-Platform Web-based
Real-time communication in Web TV and Video on
Demand System”, 57th international symposium, Zadar
Croatia ELMAR-2015, 28-30 September 2015.
[4] HuayingXue, Yuan Zhang, “A_WebRTC-Based Video
Conferencing System with Screen
Sharing”, IEEE International Conference on computer and
communication, 2016.
[5] Shi Yuzhuo, Hao Kun, “Design and Realization of
Chatting Tool Based on Web” IEEE, 2013.
[6] WajdiElleuch, “Models for Multimedia conference
between Browsers based on WebRTC”, the sixth
international workshop on selected topics in mobile and
wireless computing, IEEE, 2013.
[7] P. Mohamed Shakeel, S. Baskar, V. R. Sarma
Dhulipala, S. Mishra, and M. M. Jaber, “Maintaining
Security and Privacy in Health Care System Using
Learning Based Deep-Q-Networks,” J. Med. Syst., 2018.
[8] S. K. Abd, S. A. R. Al-Haddad, F. Hashim, A. B. H. J.
Abdullah, and S. Yussof, “Energy-Aware Fault Tolerant
Task offloading of Mobile Cloud Computing,” in
Proceedings - 5th IEEE International Conference on
Mobile Cloud Computing, Services, and Engineering,
MobileCloud 2017, 2017.
[9] M. A. Mohammed et al., “Genetic case-based
reasoning for improved mobile phone faults diagnosis,”
Comput. Electr. Eng., 2018.
[10] Chuan Yen Chiang, Yen-Lin Chen, Pei-Shiun Tsai,
Shyan-Ming Yuan, “ A Video Conferencing System Based
on WebRTC for Seniors”, International Conference on a
trustworthy system and their application, IEEE, 2014.
[11]Khalid Ibn Zinnah, Nafiz Mahmud, Firoz Hasan,
Sabbir Hossain Sagar, “ P2P Video Conferencing System
Based on WebRTC”, International Conference on
electrical, computer and communication engineering
(ECCE), February 2017.

View publication stats