Peer-to-Peer Web Applicationict.siit.tu.ac.th/~steven/css403/proposal/proposal-sg2.pdfSG2 Project...

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.



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



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

https://groups.google.com/forum/#!topic/discuss-webrtc/tKoh1wrI8ig

https://labs.ericsson.com/developer-community/blog/beyond-html5-conversational-voice-and-video-implemented-webkit-gtk

http://www.youtube.com/watch?v=Vm5ebKWKNE8



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.



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



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”



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



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.



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.



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



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.



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



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



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/

Date post:	21-Mar-2021
Category:	Documents
Upload:	others
View:	4 times
Download:	0 times

Peer-to-Peer Web Applicationict.siit.tu.ac.th/~steven/css403/proposal/proposal-sg2.pdfSG2 Project...

Documents