This presentation contains the brief introduction of webrtc and turn server.

1. Introducing WebRTC
Rishi Khandelwal
Software Consultant
Knoldus Software LLP
Email : rishi@knoldus.com

2. Introduction
WebRTC (Web Real-Time Communication)
Supports browser-to-browser applications for voice calling,
video chat, and P2P file sharing without plugins.
Uses simple JavaScript APIs and HTML5.
Open source project
Released by Google.
Supporting browsers :Google chrome. Mozilla. Opera

3. WebRTC libraries

simpleRTC (http://simplewebrtc.com)

talky.io (http://talky.io) (uses simpleRTC)

lynckia/licode (http://lynckia.com/licode/)

holla (http://wearefractal.com/holla/)

easyRTC (http://easyrtc.com) (priologic)

peerjs (http://peerjs.com) (data channel)

rtc.io (http://www.rtc.io)

4. Key features
1. MediaStreams (aka getUserMedia), access to and control
of the user camera and microphone
2. PeerConnection, negotiate and connect clients in order to
allow direct communication
3. DataChannels, peer to peer data exchange

5. Prons and Cons
Prons :
No licenses or other fees are needed to start with it
The end user doesn't have to download and install additional software
Integration is performed using standard API accessed by JavaScript
Cons :
The support is partial and the documentation is very fragmented

6. Steps to show streaming
1. Set up video on a Web page
<video> element
2. Access local devices: camera, microphone
navigator.getUserMedia()
3. Display a/v from local or remote peer
createObjectURL
4. Connect to remote peers
PeerConnection API

7. Video element

HTML 5 element

Embed a video or movie on a web page.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support

Supported media types : mp4, webm, ogg

Properties : controls, autoplay, muted, loop
<video src="videofile.ogg" autoplay controls></video>

8. Access local media
navigator.getUserMedia (
// constraints
{
video: true,
audio: true
},
// successCallback
function(localMediaStream) {
// DO the stuff with mediastream
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
} );

9. Permission Bar

10. Display video on webpage
<video id="sourcevid" controls></video>
<script>
var video = document.getElementById('sourcevid');
video.src = window.URL.createObjectURL(localMediaStream);
video.play();
</script>

11. Using easyrtc
// constraints
easyRTC.enableAudio(true);
easyRTC.enableVideo(true);
// Get local media stream
easyRTC.getLocalStream();
// get video reference
var video = element.getElementsByTagName('video')[0];
/* style */
video.className = 'video-sm state_1';
/* mute local stream */
video.muted = true;
/* output */
easyRTC.setVideoObjectSrc(video, stream);

12. Peerconnection API
1. easyRTC.connect(“application name”, sipRTC.success, sipRTC.failed);
2. easyRTC.call(rtcid);
3. easyRTC.setAcceptChecker(function(rtcid, callback) {
callback(true);
});
4. easyRTC.setLoggedInListener(sipRTC.peers);
5. easyRTC.setStreamAcceptor(sipRTC.inbound);
6. easyRTC.setOnStreamClosed(sipRTC.closed);

13. Continued...

14. Signalling
1. Signaling protocols are a way to coordinate and control the
communication between peers.
2. Signalling methods and protocols are not specfied by webrtc but by
application developer.
3. Usually the following information are shipped by signaling :
a. Session control messages (communication initialization & co.)
b. Network configuration (e.g. computer's IP address and port)

15. Continued...

16. STUN and ICE
ICE (Interactive Connectivity Establishment) is a framework for
connecting peers, such as two video chat clients.
STUN (Session Traversal Utilities for NAT) is a standardized set of
methods and a network protocol to allow an end host to discover
its public IP address if it is located behind a NAT.
STUN servers have a single task: to enable a peer behind a NAT to
find out its public address and port.

17. Continued...
1. Initially, ICE tries to connect peers directly, with the lowest
possible latency, via UDP.
2. If UDP fails, ICE tries TCP : first http, then https.
3. If direct communication fails due to enterprise NAT traversal and
firewalls, then ICE uses an intermediate (relay) Turn server.

18. Communication flow

19. References
http://slides.com/giorgionatili/webrtc/fullscreen#/5/3
http://html5videoguide.net/presentations/WebDirCode2012/#page17
http://www.slideshare.net/dhamavijays/webrtc-17414738