![Page 1: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/1.jpg)
+
Implementation WebRTC as Multimedia Real-Time
Communication in Virtual Classbox for
Limited Capacity Network
By Rizal Muhammad Nur
DSP Research and Technology Group
Electrical Engineering Dept. | ITB
![Page 2: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/2.jpg)
+Outline
Background
Issues
Specification & Requirement
Comparison
WebRTC
Implementation
Testbed Testing
Conclusion
![Page 3: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/3.jpg)
+Background
There are various education method depend on area
In city (downtown), most of them have relative better learning
method than in country side
Education
![Page 4: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/4.jpg)
+Background
Needs for sharing knowledge between school
Teacher exchange (Call teacher from another school)
Send CD/tools of education
Delivery digital learning by teleconference
Sharing knowledge
![Page 5: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/5.jpg)
+Background
Indonesia is archipelago country contain >10.000 island
This become one of obstacle for schools to share knowledge
among them
Geographic of Indonesia
![Page 6: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/6.jpg)
+Background
Avg. of Indonesia network connection is1.5Mbps (Akamai,
2013)
Of course many schools have connection lower than 1.5Mbps
Distance learning by teleconference should run well at least in
this bandwidth
Latency and jitter of network that cant be guarantee
Currently no network connection dedicated connecting schools
Mostly using third party network provider (leased line,
GSM/CDMA, etc.)
Network Connection
![Page 7: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/7.jpg)
+Background
Virtual Classbox (VCB) is one of our research that focus on
delivering digital learning service especially in rural area
Main feature is provide multimedia conference so that
students in remote class can interact with teacher that is
teaching in local class
Previous research has successfully developed VCB prototype,
but main issues is high latency and unreliability streaming
process due to low bandwidth
Virtual Classbox (VCB)
![Page 8: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/8.jpg)
+Issues
Fact: We cant guarantee sites/school have stable connection with high bandwidth
Factor reliability of stream A/V :
Bandwidth
Impact to audio and video quality on encoding process such as bitrate and resolution
Latency
More hops relatively increase latency. High latency make conversation not comfortable
Peer-to-peer connection is a way to reduce hops
Jitter
Data stream depart synchrounous order but arrival asynchronous order. Arrival data need to be synchronized before be displayed
High jitter can broke stream connection
Obstacle when building this system
![Page 9: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/9.jpg)
+Specification & Requirement
Streaming Audio&Video
Video Resolution: 480x640 pixel
Latency: <150ms
Adaptive bandwidth management
Can be operate in local network
Run in network with <1Mbps bandwidth
Presentation Document
Doc Type: JPG, JPEG, PNG (Images format)
User Interaction
Web GUI
Text Chat
![Page 10: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/10.jpg)
+Comparison
Backend
Backend
Linux|Ubuntu
Java (GUI)
Skype, VLC, Teamviewer
Previous Current
• Backend
• Linux|Ubuntu
• HTML5, CSS, JavaScript
• WebRTC, STUN, TURN
![Page 11: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/11.jpg)
+Comparison
End-Point Configuration
Camera+MicCamera+Mic
TeacherTeacher
ProjectorProjector Monitor
Wire
less
PCPC
Keyboard+Mouse
OperatorOperator Student
PO
V
PO
VINTERNET
UTP Cable
![Page 12: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/12.jpg)
+Comparison
Previous | Topology
Internet
End-Point End-Point
Skype/TeamViewer Server
Router | NAT Router | NAT
Local-Network
End-Point End-Point
RouterRouter
A/V Flow
Topology 1
(Using Skypee/Teamviewer)Topology 2
(Using VLC)
Issues
• High latency
(>1000ms)
• Using VCL can’t run in
unstable network
• Skype and
Teamviewer can’t run
in local network (must
connect to internet)
![Page 13: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/13.jpg)
+Comparison
Current | Topology
Internet
End-Point End-Point
Router | NATRouter | NAT
End-Point is configured as STUN Server
Internet
End-Point End-Point
Router | NAT Router | NAT
End-Point is configured as STUN+TURN Server
Internet
End-Point as STUN Server End-Point
RouterRouter
End-Point also can be configured become STUN and/or TURN Server
Session Flow
A/V Flow
Session+A/V Flow
Topology 1 Topology 2 Topology 3
![Page 14: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/14.jpg)
+WebRTC
WebRTC is opensource project initiate by Google Inc. to providereal-time communication, and now standardization held by IETF and W3C
This provide to enable real-time communication betweenbrowser without adds third-party
Features
Network detection: throughput, jitter, latency, packet loss
Bandwidth management: adaptive streaming (resolution, bitrate)
Cross platform
Support various A/V codec
Audio: iSAC, Opus, iLBC with various bitrate
Video: VP8 with various resolution
About
![Page 15: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/15.jpg)
+WebRTC
Communication
Web Browser
STUN
Application based WebRTC
Web Socket
Web Browser
Web SocketApplication based
WebRTC
Web Browser
STUN
Application based WebRTC
Web Socket
Web Browser
Web SocketApplication based
WebRTC
TURN
A/V Stream Flow
Session Flow
• STUN is used to
transfer session
before p2p connection
build
• TURN is used as
alternative way
be passed by A/V
stream
Scheme 1
Scheme 2
![Page 16: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/16.jpg)
+WebRTC
Interfacing | Implementation
Chrome
WebAPI|WebRTC
Camera | Mic
NodeJS
Linux OS
Keyboard | Mouse
LCD | Projector
Local Media Stream
Signaling
Hard Drive
Signaling to another end-point
peer-to-peer connectionAudio/Video
![Page 17: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/17.jpg)
+WebRTC
Interaction | Implementation
![Page 18: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/18.jpg)
Implementation | Layout
![Page 19: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/19.jpg)
![Page 20: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/20.jpg)
![Page 21: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/21.jpg)
![Page 22: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/22.jpg)
![Page 23: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/23.jpg)
![Page 24: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/24.jpg)
![Page 25: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/25.jpg)
![Page 26: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/26.jpg)
![Page 27: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/27.jpg)
+Testbed Testing
Testing conducted in 2 elementary school (nodes) at Cianjur,
West Java, Indonesia
Bandwidth test by using iperf between each node to external
STUN server:
Node 1: ~580kbps Node 2: ~370kbps
![Page 28: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/28.jpg)
Throughput of Audio (avg 68kbps) Throughput of Video (avg. 310kbps)
Latency (avg. 165ms) Jitter (avg. 25ms)
![Page 29: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/29.jpg)
Video Resolution
![Page 30: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/30.jpg)
+Conclusion
Implementation WebRTC in VCB can work at low bandwidth
(~380kbps)
Latency can be hold around 150ms
This system can adapt to network condition by change video
resolution
![Page 31: Virtual Classbox 3 - Keio Universityg-edu.kmd.keio.ac.jp/~tetsuya/RP_Rizal.pdfImplementation WebRTC as Multimedia Real-Time Communication in Virtual Classbox for Limited Capacity Network](https://reader031.vdocuments.site/reader031/viewer/2022031516/5d05e4d788c993dd5e8ccecf/html5/thumbnails/31.jpg)
+Plan for future works
Further research about STUN and TURN
Possibility to multicast data-stream using WebRTC
Add more interactive features