Introducing WebRTC

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

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

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)

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

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

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

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>

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); } );

Permission Bar

Display video on webpage

<video id="sourcevid" controls></video>

<script>

var video = document.getElementById('sourcevid'); video.src = window.URL.createObjectURL(localMediaStream); video.play();

</script>

Using easyrtc// constraintseasyRTC.enableAudio(true);easyRTC.enableVideo(true);

// Get local media stream easyRTC.getLocalStream();

// get video referencevar video = element.getElementsByTagName('video')[0];

/* style */video.className = 'video-sm state_1';

/* mute local stream */video.muted = true;

/* output */easyRTC.setVideoObjectSrc(video, stream);

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);

Continued...

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)

Continued...

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.

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.

Communication flow

References

http://slides.com/giorgionatili/webrtc/fullscreen#/5/3

http://html5videoguide.net/presentations/WebDirCode2012/#page17

http://www.slideshare.net/dhamavijays/webrtc-17414738