peer-to-peer web applicationict.siit.tu.ac.th/~steven/css403/proposal/proposal-sg2.pdfsg2 project...
TRANSCRIPT
SG2 Project Proposal
Peer-to-Peer Web Application
Group Members
Pattapon Tangwipas 5422792408
Suwatchai Wongchai 5422792390
Advisor: Dr. Steven Gordon
School of Information, Computer and Communication Technology,
Sirindhorn International Institute of Technology,
Thammasat University
Semester 1, Academic Year 2014
15/12/2014
Table of Contents
1 Introduction ....................................................................................................................... 1
2 Background ....................................................................................................................... 2
3 Objectives ......................................................................................................................... 4
4 Outputs and Expected Benefits ......................................................................................... 4 4.1 Outputs ......................................................................................................................... 4
4.2 Benefits ........................................................................................................................ 4
5 Literature Review ............................................................................................................. 5
6 Methodology ................................................................................................................... 10
6.1 Approach .................................................................................................................... 10
6.2 Tools and Techniques ................................................................................................ 12
7 Project Schedule ............................................................................................................. 13
8 Project Progress (optional) .............................................................................................. 14
9 References ....................................................................................................................... 14
Statement of Contribution
By submitting this document, all students in the group agree that their contribution in the
project so far, including the preparation of this document, is as follows:
Pattapon Tangwipas 5422792408 50%
Suwatchai Wongchai 5422792390 50%
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 1
Introduction
My project is peer-to-peer web application. We will add a function into Moodle website. The
function that we will add including of video communication (video chat), screen sharing and
file sharing. We have motivation to do this project from a WebRTC technology, which
technology to have video communication faster and easier.
The reasons that this is an important topic because nowadays we study about information
technology that always use Moodle website to do an online quiz in class, to see a course
information, to see a score and lecture material also have in Moodle website. That a reason of
why Moodle website is very important and student usually go to this website. So, we will
develop a Moodle website to have more function to be more interested. The function that we
will add to Moodle website are including of video communication, file sharing and screen
sharing. Moodle website will be better, SIIT student can use these functions to do a task with
your friend when you receive group homework. Student who has a problem to do something,
you can have video communication and use screen sharing function with instructor easily.
You can have video call to your friend for entertainment also. You do not to go to see your
friend to do homework group anymore. It will save money and times in transportation. If you
need to consult or solve a task, which need to use a program for coding, you can share your
screen to your friends. It also has convenient for you because you just go to Moodle website
then use these functions by click to your friend account and use a function that you need to
use. We aim to develop a project to have efficiency, reliable and have security of information.
The reasons that why it has to be WebRTC is WebRTC can have connection directly between
user and user then will be faster. Some people say that we can use Skype to have video
communication with friends but why we have to change to use WebRTC. Because WebRTC
doesn’t need downloads, native apps or plugin like Skype. Downloading, installing and
updating plugins can be complex, error prone and annoying. Plugins can be difficult to
deploy, debug, troubleshoot, test and maintain and may require licensing and integration with
complex, expensive technology. It’s often difficult to persuade people to install plugins in
first time. WebRTC implements three APIs include of 1. getUserMedia, which allows a web
browser to access the camera and microphone and to capture media. 2. RTCPeerConnection,
which everything encodes and decodes media, sends it over the network, takes care of NAT
traversal, etc. 3. RTCDataChannels, which send arbitrary data directly between browsers-your
low latency friends for whatever it is you want. We have to learn and find information about it
to implement onto Moodle.
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 2
Background
WebRTC is an implementation of SRTP with an SDP control mechanism on top. This is a
media engine with G.711, Opus and VP8 codecs. Then WebRTC is a topic, which interested
because we will have to study about a thing that never known before. We will have a new
experience to do APIs and HTML5.
WebRTC implements three APIs:
getUserMedia
RTCPeerConnection
RTCDataChannels
getUserMedia is available in Chrome, Opera and Firefox.
RTCPeerConnection is the WebRTC component that handles stable and efficient
communication of streaming data between peers.
Below is a WebRTC architecture diagram showing the role of RTCPeerConnection. As you
will notice, the green parts are complex.
Figure 1. WebRTC architecture (from webrtc.org)
From a JavaScript perspective, the main thing to understand from this diagram is that
RTCPeerConnection shields web developers from the myriad complexities that lurk beneath.
The codecs and protocols used by WebRTC do a huge amount of work to make real-time
communication possible, even over unreliable networks:
packet loss concealment
echo cancellation
bandwidth adaptivity
dynamic jitter buffering
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 3
automatic gain control
noise reduction and suppression
image 'cleaning'.
RTCDataChannel is supported by Chrome 25, Opera 18 and Firefox 22 and above.
WebRTC functionality is available in Internet Explorer via Chrome Frame, and Skype
(acquired by Microsoft in 2011) is reputedly planning to use WebRTC. WebRTC has also
been integrated with WebKitGTK + and Qt native apps.
From this project, we found a lot of problem because of in a topic of WebRTC must use
knowledge of JavaScript, APIs and HTML5 and we have to coding by Coda2 program. After
we done from coding, we will integrate into Moodle. In figure 1 will show a diagram of
process to connect with Moodle server. We found a problem of how to use Coda2. First of
all, we collect a file of .js (JavaScript), .php, .html, etc. should be in folder
/Applications/XAMPP/xamppfiles/htdocs like in figure2.
Figure 2. Data Diagram
Figure 3. /Applications/XAMPP/xamppfiles/htdocs
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 4
Objectives
The aim of this project is
Develop the WebRTC web application
Integrate into Moodle
Convenient of SIIT student
Reliability and security of information
Outputs and Expected Benefits
4.1 Outputs
We are develop a WebRTC, which an implementation of SRTP with an SDP control
mechanism on top. The way to implement WebRTC has to use knowledge of JavaScript, APIs
and HTML5. So, we use Coda2 program to implement in coding because Coda2 can edit all
language that we use. In part of server, we use XAMPP that a free and open source cross-
platform web server solution stack package, consisting mainly of the Apache HTTP Server,
MySQL database, and interpreters for scripts written in the PHP. So, we can simulator a
Moodle server by XAMPP. Then we will integrate a function into Moodle server. So, the
outputs of this project are functions that we will add into Moodle. The functions that we will
add include of video chat, file sharing and screen sharing. It will be faster than another
application of video communication like Skype because we will use a communication
technology call WebRTC. The reason that why WebRTC technology is faster because
WebRTC have connection from browser to browser directly. It does not to connect with
server and have SRTP to be more security of data you send together.
4.2 Benefits
From this project output useful for SIIT student that will have a function for entertainment,
for study or doing homework group that also have convenient for communication.
In short term has benefit for SIIT student. For example, student can have file transfer with
your friends and share a screen for teaching to coding with any program or have video
communication for talk about task or entertainment.
In long term benefit is for SIIT student. For example, in the future student can have
convenient in communication then student can get this project to be a case study, which can
develop to be better in the future or have more function. Another student can see a problem
and know a way to solve it.
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 5
Figure 5. Create a new room “Click Go”
Literature Review
1. vLine
vLine is working on making real-time communication a reality.
vLine is led by experienced developers focused on how technology changes the way people
engage with each other. Mobile web browsers, web-based mobile OS, and real-time file
sharing are just some of the innovative front lines they've led. They have big company
experience at the likes of Apple, Palm, IBM, and Motorola as well as deep start-up
experience.
Figure 4. 3 steps to have a video communication
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 6
Advantage:
- For have a video communication.
- vLine is free to use. There is no charge.
- Your global video chat won’t be delayed or slowed.
- You can add more people with one click.
- Have firewall savvy then can connect across companies via your browser.
Disadvantage:
- When you click some link, it will have ads link in new tab to have annoying.
- Still don’t have file-sharing function.
- Still don’t have screen-sharing function.
Figure 7. Video Communication
Figure 6. Go to link, Enter your name then “Submit”
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 7
2. Appear
The appear.in team currently consists of 9 people, and operates as an independent startup
within the incubator environment of Telenor Digital. Telenor Digital (and it predecessor Co-
moyo) has been working with in-house development of communication products based on
WebRTC since 2012. The long term ambition for appear.in is to create a global
communication service that users love and use frequently.
Figure 8. Create a new room
Figure 9. Click “Allow” to access your camera and microphone
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 8
Figure 10.
Waiting for other people to
have a video
communication
Figure 11.
Video Communication
Figure 12. If these room has been locked by its owner. Please knock to enter.
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 9
Figure 13. Then it will show at screen of owner
Figure 14. Screen Sharing function
In this website is better than vLine because it has many advantages such as video
communication, screen sharing, lock room function, and chatting but still doesn’t have file
sharing function.
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 10
Methodology
6.1 Approach
First of all, we have to find information about WebRTC. WebRTC is a technology that
enables audio/video streaming and data sharing between browser clients (peers). Then we
have to design a template of website, which including a function of video communication, file
sharing, and screen sharing. Those function is benefit for SIIT student that can use to have a
communication or have tutorial together by doesn’t have to go to see your friend. Let we
show an example of high-level system of WebRTC.
The getUserMedia API is used to access media streams from media input devices such
as webcams or microphones. The stream obtained can then either be used locally by passing it
to a HTML <audio/> or <video/> tag, lending itself to many creative and fun applications
such as photobooth, facial recognition, image processing etc. Additionally it can be attached
to an RTCPeerConnection object and used to establish communications with another user.
Figure 15 shows possible usage scenarios.
Figure 15. Example scenarios (source http://w3c.github.io)
As an overview, getUserMedia( ) is called with up to three parameters:
mediaConstraints – this is an object specifying the type and optionally the quality of the
media streams required. Full details can be found in the getUserMedia API but for the
purposes of this post we’ll concentrate on the boolean attributes audio, and video, which
specify whether audio and/or video streams are required respectively.
successCallback (optional) – this is called with the MediaStream. This is illustrated in figure
16. Object encapsulating the media streams requested by the developer
errorCallback (optional) – this is called with an error object, which should give an indication
as to why the call failed
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 11
Figure 16. MediaStream object (source http://w3c.github.io)
Although the callbacks are optional in the spec, in practice at the very least
the successCallback is required, as this is the only way to access the MediaStream object. As
we shall see, providing the error callback is also beneficial.
The RTCPeerConnection, despite the many protocols involved in setting up and
maintaining a peer-to-peer connection, the application API exposed by the browser is
relatively simple. The RTCPeerConnection interface in figure 17 is responsible for managing
the full life cycle of each peer-to-peer connection.
Figure 17. RTCPeerConnection API
RTCPeerConnection manages the full ICE workflow for NAT traversal.
RTCPeerConnection sends automatic (STUN) keepalives between peers.
RTCPeerConnection keeps track of local streams.
RTCPeerConnection keeps track of remote streams.
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 12
RTCPeerConnection triggers automatic stream renegotiation as required.
RTCPeerConnection provides necessary APIs to generate the connection offer, accept
the answer, allows us to query the connection for its current state, and more.
In short, RTCPeerConnection encapsulates all the connection setup, management, and state
within a single interface. However, before we dive into the details of each configuration
option of the RTCPeerConnection API, we need to understand signaling and negotiation, the
offer-answer workflow, and ICE traversal.
In figure 18 is show the example of demo in this senior project that show a video
communication, which use APIs knowledge that describe before. From figure 18, you can see
a problem that need to fix is video communication is appear on above template. Then we will
fix this problem soon.
Figure 18. Template Demo of P2P Web Application
Tools and Techniques
- XAMPP
- Coda2, Eclipse
- PHP, HTML5
- JavaScript API – getUserMedia, RTCPeerConnection, RTCDataChannel
- Power Point
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 13
Project Schedule
Table or diagram of schedule, showing tasks, deadlines or duration, and the person
responsible for the task. An example table is shown below. Aim to divide the project into
tasks of about 1-2 weeks duration. If you have a task with a duration of 1 month, then divide
it into multiple smaller tasks. If this document also reports your current progress, it will be
useful to annotate the plan with a current status column (e.g. percent complete of each item).
You could include a Gantt chart if desired.
Task Description Person Duration Deadline Status
1 Design schedule of work PT/SW 1w 8 Sep 14 Have plan to work
2 Study about WebRTC PT/SW 1w 10 Sep 14 50% Still need to study more
3 Prepare for presentation PT/SW 5d 14 Sep 14
4 Study about XAMPP PT/SW 1w 29 Sep 14 Install XAMPP success
5 Draft proposal PT/SW 1w 3 Oct 14 60% Still need to add more
information.
6 Study about WebRTC PT/SW 2w 10 Oct 14
7 Study about API - getUserMedia PT/SW 1w 24 Oct 14
8 Study about API - RTCDataChannel PT/SW 1w 31 Oct 14
9 Study about API - RTCPeerConnection PT/SW 1w 7 Nov 14
10 Prepare for second presentation PT/SW 5d 17 Nov 14
11 Study about HTML5, PHP PT/SW 1w 24 Nov 14
12 Try to coding PT/SW 1w 1 Dec 14 Have demo of project but
still need to fix some
problem
13 Complete final proposal PT/SW 1w 12 Dec 14
14 Prepare for final presentation PT/SW 1w 14 Dec 14
15 Study about SRTP & SRTCP PT 2w 26 Dec 14
16 Study about ICE PT 2w 2 Jan 15
Senior Project 2014 Peer to Peer Web Application
School of ICT, SIIT 14
Project Progress (optional)
If you have started doing work, then in this section you should report on the current progress
of the project. You can consider the previous sections as the “Proposal” of what you intend to
do and why, whereas this section reports on what you have done. You may break into
multiple sections or sub-sections if necessary. You should include any designs and
implementation details.
References
http://www.webrtc.org
http://www.html5rocks.com/en/
https://vline.com/
https://appear.in/
https://developer.mozilla.org/en-US/
http://w3c.github.io
http://www.rtcmulticonnection.org/
https://www.webrtc-experiment.com/