Web Real-Time Communication free open-source high quality Real Time Communications right in the browser. http://web.folio3.com/vetspert/

1. WebRTC
FUTURE OF THE WEB
@folio_3 www.folio3.com Copyright 2015

2. WebRTC
 Web Real-Time Communication
 free
 open-source
 high quality
 Real Time Communications
 right in the browser.
@folio_3 www.folio3.com Copyright 2015

3. No plugins...!!!
 Support browser-to-browser applications for:
 voice calling
 video chat
 and P2P file sharing
without the need of either internal or external plugins.
@folio_3 www.folio3.com Copyright 2015

4. Yes, you got it right..!!!
 Simple JavaScript APIs and HTML5
 No downloads required
 No installing and updating plugins of any sort.
@folio_3 www.folio3.com Copyright 2015

5. So, what's the big idea?
 Flash Player is like patching an incomplete system.
 With WebRTC there is no external dependency beyond the basic
web browser.
 You know HTML and Javascript, right?
 What about Actionscript/MXML???
@folio_3 www.folio3.com Copyright 2015

6. Browser Support
Desktop: 17+
Mobile: 29+
Desktop: 18+
Mobile: 20+
Desktop: 18+
Mobile: 24+
@folio_3 www.folio3.com Copyright 2015

7. Quality
 WebRTC - High quality video codec
 Flash Player - Outdated Sorenson codec
(which is difficult to interoperate with non-Flash products)
@folio_3 Copyright 2015www.folio3.com

8. But lets face it...
 Many users are reluctant to change/update their browser (IE,
Safari,...)
 Flash Player has shown more ubiquitous availability on user's
desktops and laptops than any specific web browser.
@folio_3 www.folio3.com Copyright 2015

9. Cross-compatibility
 In the past, incompatibility in HTML among browsers has been a
nightmare for web developers
(remember IE6...? Dark ages...? anyone...?)
 Solution:
adapter.js
or similar shims
@folio_3 www.folio3.com Copyright 2015

10. The main problem with Flash?!!?!
 It's PROPRIETARY..!!!
(the protocol for end-to-end media path is proprietary so interoperating with existing
VoIP gears is inefficient without buying server pieces from the plugin vendor.)
@folio_3 www.folio3.com Copyright 2015

11. So What it takes for a browser to
support WebRTC?
 Lets look at some boring jargons...
 Media Engine
The technology that manages microphones, cameras, and
speakers and gets audio and video onto and off the internet.
 Transport layer
(ISO-OSI) which is relatively simple, but hard to tweak for real-time
communications
 CODECs
Audio/Video encoders and decoders (something that is usually
acquired from third parties)
@folio_3 www.folio3.com Copyright 2015

12. @folio_3 www.folio3.com Copyright 2015

13. How about the network?
 NAT
an Internet standard that enables a local-area network (LAN) to use one set of IP
addresses for internal traffic and a second set of addresses for external traffic.
 STUN
(Session Traversal Utilities for NAT) is a standardized set of methods and a network
protocol that allows an end host to discover its public IP address if it is located behind
a NAT.
 TURN
Traversal Using Relays around NAT (TURN) is a protocol that allows a client behind a
network address translator (NAT) or firewall to receive incoming data over TCP or UDP
connections.
@folio_3 www.folio3.com Copyright 2015

14.  ICE
Interactive Connectivity Establishment (ICE) is a technique used in computer
networking involving network address translators (NATs) in Internet applications of
Voice over Internet Protocol (VoIP), peer-to-peer communications, video, instant
messaging and other interactive media. [Wikipedia]
 Stream
An abstraction referring to any flow of data from a source (or sender, producer) to a
single sink (or receiver, consumer). A stream usually flows through a channel of some
kind.
 SDP
The Session Description Protocol (SDP) is a format for describing streaming media
initialization parameters.
SDP does not deliver media itself but is used for negotiation
between end points of media type, format, and all associated
properties.
@folio_3 www.folio3.com Copyright 2015

15. How all of this fits together?
@folio_3 www.folio3.com Copyright 2015

16. Ready...steady...RT.........
peerConnection = new mozRTCPeerConnection();
peerConnection.onaddstream = pconaddstream;
navigator.mozGetUserMedia({video: true, audio: true}, mediaSuccess,
mediaFailure);
@folio_3 www.folio3.com Copyright 2015

17. function mediaSuccess(media) {
localVideo = document.querySelector('#vidLocalVideo');
//Add stream obtained to <video> to start media flow.
localVideo.mozSrcObject = media;
localVideo.play();
peerConnection.addStream(media);
if (userType === "caller") {
peerConnection.createOffer(createLocalDesc, callFailed);
}
else {
peerConnection.createAnswer(createLocalDesc, callFailed);
}
}
@folio_3 www.folio3.com Copyright 2015

18. function createLocalDesc(sessionObj) {
peerConnection.setLocalDescription(sessionObj, doNothing,
callFailed);
sessionJson = JSON.stringify(sessionObj);
if (userType === "caller") {
sendOfferToServer(sessionJson);
}
else {
sendAnswerToServer(sessionJson);
}
}
@folio_3 www.folio3.com Copyright 2015

19. function setRemoteDesc(connectionString) {
var connectionObj = JSON.parse(connectionString);
var sessionObj = new mozRTCSessionDescription();
sessionObj.type = connectionObj.type;
sessionObj.sdp = connectionObj.sdp;
peerConnection.setRemoteDescription(sessionObj, doNothing,
callFailed);
}
@folio_3 www.folio3.com Copyright 2015

20. function pconaddstream(obj) {
pcvideo = document.querySelector('#vidRemoteVideo');
pcvideo.mozSrcObject = obj.stream;
pcvideo.play();
}
var pconicecandidate = function (iceEvent) {
if (iceEvent.candidate) {
var candidate = new mozRTCIceCandidate({
sdpMLineIndex: userType,
candidate: iceEvent.candidate.candidate
});
peerConnection.addIceCandidate(candidate);
}
else {
console.log(iceEvent);
}
}
@folio_3 www.folio3.com Copyright 2015

21. WebRTC beyond peer-to-peer
 3 types of architectures:
 Mesh
 Mixing
 Routing
@folio_3 www.folio3.com Copyright 2015

22. Mesh
 Powerful clients
 High network bandwidth
 Best quality
 Minimal Latency
@folio_3 www.folio3.com Copyright 2015

23. Mixing
 MCU (Multipoint Conferencing Unit)
 Powerful server
 Compromised Quality
 High Latency
@folio_3 www.folio3.com Copyright 2015

24. Routing
 SFU (Selective Forwarding Unit)
 Compression on clients
 Scalable
 Low Latency
@folio_3 www.folio3.com Copyright 2015

25. Is it all upon me???
Muaz Khan
on GitHub
@folio_3 www.folio3.com Copyright 2015

26. PetZam
 PetZam uses WebRTC
 using TokBox API
 peer-to-peer video calling
 for pet care
@folio_3 www.folio3.com Copyright 2015

27. Future
 Support on Safari and IE
 Unified standard API
 Lots of fun and interactivity
(screen sharing, video conferences, team collaboration, distance
learning, online gaming, real-time dashboards, ... ... ... ... ...)
www.folio3.com Copyright 2015@folio_3