WebRTC Integrator's Guide

Al tanai









Chapter No. 1
" Running WebRTC with and without SIP"
In this package, you will find:
The authors biography
A preview chapter from the book, Chapter no.1 "Running WebRTC with and
without SIP"
A synopsis of the books content
Information on where to buy this book









About the Author
Altanai, born into an Indian army family, is a bubbly, vivacious, intelligent computer
geek. She is an avid blogger and writes on Research and Development of evolving
technologies in Telecom (ht t p: / / al t anai t el ecom. wor dpr ess. com).
She holds a Bachelor's degree in Information Technology from Anna University,
Chennai. She has worked on many Telecom projects worldwide, specifically in the
development and deployment of IMS services. She firmly believes in contributing to
the Open Source community and is currently working on building a WebRTC-based J S
library with books for more applications.
Her hobbies include photography, martial arts, oil canvas painting, river rafting, horse
riding, and trekking, to name a few.
This is her first book, and it contains useful insight into WebRTC for beginners and
integrator in this field. The book has definitions and explanations that will cover many
interesting concepts in a clear manner.
Altanai can be contacted at t ar a181989@gmai l . com.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
WebRTC Integrator's Guide
WebRTC Integrator's Guide is a deep dive into the world of real-time telecommunication
and its integration with the telecom network. This book covers a wide range of WebRTC
solutions, such as GSM, PSTN, and IMS, designed for specific network requirement.
It also addresses the implementation woes by describing every minute detail of the
WebRTC platform setup from the APIs to the architecture, code-to-server installations,
RCS-to-Codec interoperability, and much more. It also describes various enterprise-based
use cases that can be built around WebRTC.
What This Book Covers
Chapter 1, Running WebRTC with and without SIP, is a quick brush-up of WebRTC
basics such as Media APIs. It also describes the use of plain WebSocket signaling
to deliver WebRTC-based browser-to-browser communication.
Chapter 2, Making a Standalone WebRTC Communication Client, talks about the
use of the Session Initiation Protocol (SIP) as the signaling mechanism for WebRTC.
It describes the setup of the SIP server for this purpose.
Chapter 3, WebRTC with SIP and IMS, outlines the interaction of a SIP-based WebRTC
client with the IP Multimedia Subsystem (IMS).
Chapter 4, WebRTC Integration with Intelligent Network, describes the ways in which
WebRTC can be made interoperable with mobile phones, as the majority of mobile
communications today are still on GSM under the IN model.
Chapter 5, WebRTC Integration with PSTN, describes the backward compatibility
of the WebRTC technology to the old, fixed-line telephones.
Chapter 6, Basic Features of WebRTC over SIP, describes the basic WebRTC SIP
services such as audio/video call, messaging, call transfer, call hold/resume, and others.
Chapter 7, WebRTC with Industry Standard Frameworks, discusses the development
of the WebRTC client over the industry-adopted framework (that is, Model-
View-Controller).





For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 8, WebRTC and Rich Communication Services, discusses how RCS enriches
the communication technology with features such as file transfer, Presence, phonebook,
and others.
Chapter 9, Native SIP Application and Interaction with WebRTC Clients, addresses a
very important concern, that is, the WebRTC interoperability with other SIP endpoints
such as desktop clients, SIP hardphones, and mobile-based SIP applications.
Chapter 10, Other WebRTC Use Cases, presents an interesting array of WebRTC
use cases that are both innovative and practical with the current WebRTC standards.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with
and without SIP
WebRTC lets us make calls right from a web page without any plugin. This was
made possible using media APIs of the browser to fetch user media, WebSocket for
transportation, and HTML5 to render the media on the web page. Thus, WebRTC
is an evolved form of WebSocket communication. WebSocket is a Transport Layer
protocol that carries data. The WebSocket API is an Application Programming
Interface (API) that enables web pages to use the WebSocket protocol for (duplex)
communication with a remote host.
In this chapter, we will study how WebRTC really works. We will also
demonstrate the use of WebRTC media APIs to capture and render input from a
user's microphone and camera onto a web page. In the later part of chapter, we will
nd out how to build a simple standalone WebRTC client using the plain WebSocket
protocol as the signaling mechanism.
JavaScript Session Establishment
Protocol (JSEP)
The communication model between a client and remote host is based on the
JSEP architecture, which differentiates the signaling and media transaction
into different layers.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 8 ]
The differentiation is shown in the following gure:
SessionDescription SessionDescription
Signaling Signaling
App
WebRTC
Caller
Signaling vs Media
WebRTC: JSEP Approach
Media
App
Browser
Callee
Browser
App
Network
JSEP signaling and media
As an example, let's consider two peers, A and B, where A initiates communication
with B. Initially, in the rst case, A being the offerer will have to call the
cr eat eOf f er function to begin a session. A also mentions details such as codecs
through a set Local Descr i pt i on function, which sets up its local cong. The remote
party, B, reads the offer and stores it using the set Remot eDescr i pt i on function. The
remote party, B, calls the cr eat eAnswer function to generate an appropriate answer,
applies it using the set Local Descr i pt i on function, and sends the answer back
to the initiator over the signaling channel. When A gets the answer, it also stores it
using the set Remot eDescr i pt i on function, and the initial setup is complete. This
is repeated for multiple offers and answers. The latest on JSEP specications can be
read from the Internet Engineering Task Force (IETF) site at ht t p: / / dat at r acker .
i et f . or g/ doc/ dr af t - i et f - r t cweb- j sep/ .
Signal and media ows
The differentiation between signal and media ows is an important aspect of the
WebRTC call setup.
The signaling mechanism can be any among HTTP/REST, JavaScript Object
Notation (JSON) via XMLHttpRequest (XHR), Session Initiation Protocol (SIP)
over websockets, XMPP, or any custom or proprietary protocol. The media
(audio/video) is dened through the Session Description Protocol (SDP) and
ows from peer to peer.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 9 ]
A few instances of end-to-end signaling and media ow variants are shown in the
following screenshot:
SessionDescription
SessionDescription
Signaling Signaling
App
WebRTC
Caller Callee
Media
RTP
Browser Browser
App App
Network
JSON XMLHttpRequest via JSON XMLHttpRequest via
websocket subprotocol JSON XMR
The preceding gure depicts signaling over the WebRTC API in the JSON format
via XHR.
Now, the following gure depicts signaling over the WebRTC API in eXtensible
Messaging and Presence Protocol (XMPP):
SessionDescription SessionDescription
Signaling
App
WebRTC
Caller Callee
Media
Browser Browser
App App
Network
XMPP
Signaling
XMPP
eXtensible Messaging and Presence Protocol (XMPP)



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 10 ]
While it's very popular to use the WebRTC API with SIP support through
JavaScript libraries such as JSSIP, SIPML5, PJSIP, and so on, these libraries cater
to the SIP/IMS (IP Multimedia Subsystem) world and are not mandatory for
setting up enterprise-level WebRTC Infrastructure. In fact, it is a misconception
that WebRTC is coupled with SIP in itself; it isn't.
IP Multimedia System (IMS) is part of the Next Generation
Network (NGN) model for IP-based communication.
Running WebRTC without SIP
HTML5 websockets can be dened by ws: / / followed by the URL in the server eld
while readying a WebRTC client for registration. This enables bidirectional, duplex
communications with server-side processes, that is, server-side push events to the
client. It also enables the handshake after sharing media metadata such as ports,
codecs, and so on.
It should be noted that WebRTC works in an offer/answer mode and has ways
of traversing the Network Address Translation (NAT) and rewalls by means
of Interactive Connectivity Establishment (ICE). ICE makes use of the Session
Traversal Utilities for NAT (STUN) protocol and its extension, Traversal Using
Relay NAT (TURN). This is covered later in the chapter.
Sending media over WebSockets
WebRTC mainly comprises three operations: fetching user media from a
camera/microphone, transmitting media over a channel, and sending messages
over the channel. Now, let's take a look at the summarized description of every
operation type.
getUserMedia
The JavaScript get User Medi a function (also known as Medi aSt r eam) is used to allow
the web page to access users' media devices such as camera and microphone using
the browser's native API, without the need of any other third-party plugins such as
Adobe Flash and Microsoft Silverlight.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 11 ]
For simple demos of these methods, download the WebRTC read-only
by executing the following command:
svn checkout ht t p: / / webr t c. googl ecode. com/ svn/ t r unk/
webr t c-r ead- onl y
The following is the code to access the IP camera in the Google Chrome browser
and display the local video in a <vi deo/ >element:
/ *The HTML t o def i ne a but t on t o begi n t he capt ur e and HTML5 vi deo
el ement on web page body */
<vi deo i d=" vi d" aut opl ay=" t r ue" ></ vi deo>
<but t on i d=" bt n" oncl i ck=" st ar t ( ) " >St ar t </ but t on>
/ *The J avaScr i pt bl ock cont ai ns t he f ol l owi ng f unct i on cal l t o st ar t
t he medi a capt ur e usi ng Chr ome br owser ' s get User Medi a f unct i on*/
vi deo = document . get El ement ByI d( " vi d" ) ;
f unct i on st ar t ( ) {
navi gat or . webki t Get User Medi a( {vi deo: t r ue}, got St r eam,
f unct i on( ) {}) ;
bt n. di sabl ed = t r ue;
}
/ *The f unct i on t o add t he medi a st r eamt o a vi deo el ement on a page*/
f unct i on got St r eam( st r eam) {
vi deo. sr c = webki t URL. cr eat eObj ect URL( st r eam) ;
}
When the browser tries to access media devices such as a camera and
mic from users, there is always a browser notication that asks for the
user's permission.
Downloading the example code
You can download the example code les for all Packt books you have
purchased from your account at ht t p: / / www. packt pub. com. If you
purchased this book elsewhere, you can visit ht t p: / / www. packt pub.
com/ suppor t and register to have the les e-mailed directly to you



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 12 ]
The following screenshot depicts the user notication for granting permission to
access the camera in Google Chrome:
The following screenshot depicts the user notication for granting permission to
access the camera in Mozilla Firefox:
The following screenshot depicts the user notication for granting permission to
access the camera in Opera:
RTCPeerConnection
In WebRTC, media traverses in a peer-to-peer fashion and is necessary to exchange
information prior to setting up a communication path such as public IP and open
ports. It is also necessary to know about the peer's codecs, their settings, bandwidth,
and media types.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 13 ]
To make the peer connection, we will need a function to populate the values
of the RTCPeer Connect i on, get User Medi a, at t achMedi aSt r eam, and
r eat t achMedi aSt r eamparameters. Due to the fact that the WebRTC standard is
currently under development, the JavaScript API can change from one implementation
to another. So, a web developer has to congure the RTCPeer Connect i on,
get User Medi a, at t achMedi aSt r eam, and r eat t achMedi aSt r eamvariables in
accordance to the browser on which we are running the HTML content.
It is noted that WebRTC standards are in rapid evolution.
The API that was used for the rst version of WebRTC was the
Peer Connect i on API, which had distinct methods for media
transmission. As of now, the old Peer Connect i on API has
been deprecated and a new enhanced version is under process.
The new Media API has replaced the media streams handling in
the old Peer Connect i on API.
The browser APIs of different browsers have different names. The criterion is
to determine the browser on which the web page is opened and then call the
appropriate function for the WebRTC operation. The identity of the browser
can be determined by extracting a friendly name or checking for a match with a
specic library name of the different browser. For example, when navi gat or .
webki t Get User Medi a is t r ue, then WebRTCDet ect edBr owser = " chr ome" , and
when navi gat or . mozGet User Medi a is t r ue, then WebRTCDet ect edBr owser =
" f i r ef ox" . The following table shows the W3C standard elements in Google
Chrome and Mozilla Firefox:
W3C Standard Chrome Firefox
getUserMedia webki t Get User Medi a mozGet User Medi a
RTCPeerConnection webki t RTCPeer Connect i on mozRTCPeer Connect i on
RTCSessionDescription RTCSessi onDescr i pt i on mozRTCSessi onDescr i pt i on
RTCIceCandidate RTCI ceCandi dat e mozRTCI ceCandi dat e
Such methods also exist for Opera, which is a new addition to the WebRTC suite.
Hopefully, Internet Explorer, in the future, would have native support for WebRTC
standards. For other browsers such as Safari that don't support WebRTC as yet, there
are temporary plugins that help capture and display the media elements, which
can be used until these browsers release their own enhanced WebRTC supported
versions. Creating WebRTC-compatible clients in Internet Explorer and Safari is
discussed in Chapter 9, Native SIP Application and Interaction with WebRTC Clients.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 14 ]
The following code snippet is used to make an RTC peer connection and render
videos from one HTML video frame to another on the same web page. The library
le, adapt er . j s, is used, which renders the polyll functionality to different
browsers such as Mozilla Firefox and Google Chrome.
The HTML body content that includes two video elements for the local and remote
videos, the text status area, and three buttons to start capturing, sending, and stop
receiving the stream are given as follows:
<vi deo i d=" vi d1" aut opl ay=" t r ue" mut ed=" t r ue" ></ vi deo>
<vi deo i d=" vi d2" aut opl ay></ vi deo>
<but t on i d=" bt n1" oncl i ck=" st ar t ( ) " >St ar t </ but t on>
<but t on i d=" bt n2" oncl i ck=" cal l ( ) " >Cal l </ but t on>
<but t on i d=" bt n3" oncl i ck=" hangup( ) " >Hang Up</ but t on>
<xt ext ar ea i d=" t a1" ></ t ext ar ea>
<xt ext ar ea i d=" t a2" ></ t ext ar ea>
The JavaScript program to transmit media from the video element to another at the
click of the Start button, using the WebRTC API is given as follows:
/ * set t i ng t he val ue of st ar t , cal l and hangup t o f al se i ni t i al l y*/
bt n1. di sabl ed = f al se;
bt n2. di sabl ed = t r ue;
bt n3. di sabl ed = t r ue;
/ * decl ar at i on of gl obal var i abl es f or peer conecect i on 1 and 2, l ocal
st r eams, sdp const r ai ns */
var pc1, pc2;
var l ocal st r eam;
var sdpConst r ai nt s = {' mandat or y' : {
' Of f er ToRecei veAudi o' : t r ue,
' Of f er ToRecei veVi deo' : t r ue }};
The following code snippet is the denition of the function that will get the user
media for the camera and microphone input from the user:
f unct i on st ar t ( ) {
bt n1. di sabl ed = t r ue;
get User Medi a( {audi o: t r ue, vi deo: t r ue},
/ * get audi o and vi deo capt ur e */
got St r eam, f unct i on( ) {}) ;
}



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 15 ]
The following code snippet is the denition of the function that will attach an input
stream to the local video section and enable the call button:
f unct i on got St r eam( st r eam) {
at t achMedi aSt r eam( vi d1, st r eam) ;
l ocal st r eam= st r eam; / * r eady t o cal l t he peer */
bt n2. di sabl ed = f al se;
}
The following code snippet is the function call to stream the video and audio content
to the peer using RTCPeer Connect i on:
f unct i on cal l ( ) {
bt n2. di sabl ed = t r ue;
bt n3. di sabl ed = f al se;
vi deoTr acks = l ocal st r eam. get Vi deoTr acks( ) ;
audi oTr acks = l ocal st r eam. get Audi oTr acks( ) ;
var ser ver s = nul l ;
pc1 = new RTCPeer Connect i on( ser ver s) ; / * peer 1 connect i on t o ser ver
*/
pc1. oni cecandi dat e = i ceCal l back1;
pc2 = new RTCPeer Connect i on( ser ver s) ; / * peer 2 connect i on t o ser ver
*/
pc2. oni cecandi dat e = i ceCal l back2;
pc2. onaddst r eam= got Remot eSt r eam;
pc1. addSt r eam( l ocal st r eam) ;
pc1. cr eat eOf f er ( got Descr i pt i on1) ;
}
f unct i on got Descr i pt i on1( desc) {/ * get t i ng SDP f r omof f er by peer 2 */
pc1. set Local Descr i pt i on( desc) ;
pc2. set Remot eDescr i pt i on( desc) ;
pc2. cr eat eAnswer ( got Descr i pt i on2, nul l , sdpConst r ai nt s) ;
}
f unct i on got Descr i pt i on2( desc) {/ * get t i ng SDP f r omanswer by peer 1 */
pc2. set Local Descr i pt i on( desc) ;
pc1. set Remot eDescr i pt i on( desc) ;
}



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 16 ]
On clicking the Hang Up button, the following function closes both of the
peer connections:
f unct i on hangup( ) {
pc1. cl ose( ) ;
pc2. cl ose( ) ;
pc1 = nul l ; / * peer 1 connect i on t o ser ver cl osed */
pc2 = nul l ; / * peer 2 connect i on t o ser ver cl osed */
bt n3. di sabl ed = t r ue; / * di sabl es t he Hang Up but t on */
bt n2. di sabl ed = f al se; / *enabl es t he Cal l but t on */
}
f unct i on got Remot eSt r eam( e) {
vi d2. sr c = webki t URL. cr eat eObj ect URL( e. st r eam) ;
}
f unct i on i ceCal l back1( event ) {
i f ( event . candi dat e) {
pc2. addI ceCandi dat e( new RTCI ceCandi dat e( event . candi dat e) ) ;
}
}
f unct i on i ceCal l back2( event ) {
i f ( event . candi dat e) {
pc1. addI ceCandi dat e( new RTCI ceCandi dat e( event . candi dat e) ) ;
}
}
In the preceding example, JSON/XHR (XMLHttpRequest) is the signaling
mechanism. Both the peers, that is, the sender and receiver, are present on the same
web page; this is represented by the two video elements shown in the following
screenshot. They are currently in the noncommunicating state.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 17 ]
As soon as the Start button is hit, the user's microphone and camera begin to
capture. The rst peer is presented with the browser request to use their camera and
microphone. After allowing the browser request, the rst peer's media is successfully
captured from their system and displayed on the screen. This is demonstrated in the
following screenshot:
As soon as the user hits the Call button, the captured media stream is shared in
the session with the second peer, who can view it on their own video element.
The following screenshot depicts the two peers sharing a video stream:
The session can be discontinued by clicking on the Hang Up button.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 18 ]
RTCDataChannel
The Dat aChannel function is used to exchange text messages by creating a
bidirectional data channel between two peers. The following is the code to
demonstrate the working of RTCDat aChannel .
The following code snippet is the HTML body of the code for the Dat aChannel
function. It consists of a text area for the two peers to view the messages and three
buttons to start the session, send the message, and stop receiving messages.
<di v i d=" l ef t " >
<br >
<h2>Send dat a</ h2>
<t ext ar ea i d=" dat aChannel Send" r ows=" 5" col s=" 15"
di sabl ed=" t r ue" >
</ t ext ar ea>
<br >
<but t on i d=" st ar t But t on" oncl i ck=" cr eat eConnect i on( ) " >
St ar t </ but t on>
<but t on i d=" sendBut t on" oncl i ck=" sendDat a( ) " >Send Dat a</ but t on>
<but t on i d=" cl oseBut t on" oncl i ck=" cl oseDat aChannel s( ) " >
St op Send Dat a
</ but t on>
<br >
</ di v>
<di v i d=" r i ght " >
<br >
<h2>Recei ved Dat a</ h2>
<t ext ar ea i d=" dat aChannel Recei ve" r ows=" 5" col s=" 15"
di sabl ed=" t r ue" >
</ t ext ar ea><br >
</ di v>
The style script for the text area is given as follows; to differentiate between the two
peers, we place one text area aligned to the right and another to the left:
#l ef t { posi t i on: absol ut e; l ef t : 0; t op: 0; wi dt h: 50%; }
#r i ght { posi t i on: absol ut e; r i ght : 0; t op: 0; wi dt h: 50%; }
The JavaScript block that contains the functions to make the session and transmit the
data is given as follows:
/ *Decl ar i ng gl obal par amet er s f or bot h si des' peer connect i on, sender ,
and r ecei ver channel */
var pc1, pc2, sendChannel , r ecei veChannel ;



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 19 ]
/ *Onl y enabl e t he St ar t but t on, keep t he send dat a and st op send dat a
but t on of f */
st ar t But t on. di sabl ed = f al se;
sendBut t on. di sabl ed = t r ue;
cl oseBut t on. di sabl ed = t r ue;
The following code snippet is the script to create Peer Connect i on in Google
Chrome, that is, webki t RTCPeer Connect i on that was seen in the previous table.
It is noted that a user needs to have Google Chrome Version 25 or higher to test
this code. Some old Chrome versions are also required to set the - - enabl e- dat a-
channel s ag to the enabled state before using the Dat aChannel functions.
f unct i on cr eat eConnect i on( ) {
var ser ver s = nul l ;
pc1 = new webki t RTCPeer Connect i on( ser ver s, {
opt i onal : [ {Rt pDat aChannel s: t r ue}] }) ;
t r y {
sendChannel = pc1. cr eat eDat aChannel ( " sendDat aChannel " , {
r el i abl e: f al se}) ;
} cat ch ( e) {
al er t ( ' Fai l ed t o cr eat e dat a channel . ' +
' You need Chr ome M25 or l at er wi t h
- - enabl e- dat a- channel s f l ag' ) ; ) ;
}
pc1. oni cecandi dat e = i ceCal l back1;
sendChannel . onopen = onSendChannel St at eChange;
sendChannel . oncl ose = onSendChannel St at eChange;
pc2 = new webki t RTCPeer Connect i on( ser ver s, {
opt i onal : [ {Rt pDat aChannel s: t r ue}] }) ;

pc2. oni cecandi dat e = i ceCal l back2;
pc2. ondat achannel = r ecei veChannel Cal l back;
pc1. cr eat eOf f er ( got Descr i pt i on1) ;
st ar t But t on. di sabl ed = t r ue; / *si nce sessi on i s up,
di sabl e st ar t but t on */
cl oseBut t on. di sabl ed = f al se; / *enabl e cl ose but t on */
}
The following function is used to invoke the sendChannel . send function along with
user text to send data across the data channel:
f unct i on sendDat a( ) {
var dat a = document . get El ement ByI d( " dat aChannel Send" ) . val ue;
sendChannel . send( dat a) ;
}



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 20 ]
The following function calls the sendChannel . cl ose( ) and r ecei veChannel .
cl ose( ) functions to terminate the data channel connection:
f unct i on cl oseDat aChannel s( ) {
sendChannel . cl ose( ) ;
r ecei veChannel . cl ose( ) ;
pc1. cl ose( ) ; / * peer 1 connect i on t o ser ver cl osed */
pc2. cl ose( ) ; / * peer 2 connect i on t o ser ver cl osed */
pc1 = nul l ;
pc2 = nul l ;
st ar t But t on. di sabl ed = f al se;
sendBut t on. di sabl ed = t r ue;
cl oseBut t on. di sabl ed = t r ue;
document . get El ement ByI d( " dat aChannel Send" ) . val ue = " " ;
document . get El ement ByI d( " dat aChannel Recei ve" ) . val ue = " " ;
document . get El ement ByI d( " dat aChannel Send" ) . di sabl ed = t r ue;
}
Peer connection 1 sets the local description, and peer connection 2 sets the remote
description from the SDP exchanged, and the answer is created:
f unct i on got Descr i pt i on1( desc) {
pc1. set Local Descr i pt i on( desc) ;
pc2. set Remot eDescr i pt i on( desc) ;
pc2. cr eat eAnswer ( got Descr i pt i on2) ;
}
f unct i on got Descr i pt i on2( desc) {
pc2. set Local Descr i pt i on( desc) ;
t r ace( ' Answer f r ompc2 \ n' + desc. sdp) ;
pc1. set Remot eDescr i pt i on( desc) ;
}
The following is the function to get the local ICE call back:
f unct i on i ceCal l back1( event ) {
i f ( event . candi dat e) {
pc2. addI ceCandi dat e( event . candi dat e) ;
}
}



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 21 ]
The following is the function for the remote ICE call back:
f unct i on i ceCal l back2( event ) {
i f ( event . candi dat e) {
pc1. addI ceCandi dat e( event . candi dat e) ;
}
}
The function that receives the control when a message is passed back to the user
is as follows:
f unct i on r ecei veChannel Cal l back( event ) {
r ecei veChannel = event . channel ;
r ecei veChannel . onmessage = onRecei veMessageCal l back;
r ecei veChannel . onopen = onRecei veChannel St at eChange;
r ecei veChannel . oncl ose = onRecei veChannel St at eChange;
}
f unct i on onRecei veMessageCal l back( event ) {
document . get El ement ByI d( " dat aChannel Recei ve" ) . val ue =
event . dat a;
}
f unct i on onRecei veChannel St at eChange( ) {
var r eadySt at e = r ecei veChannel . r eadySt at e;
}
f unct i on onSendChannel St at eChange( ) {
var r eadySt at e = sendChannel . r eadySt at e;
i f ( r eadySt at e == " open" ) {
document . get El ement ByI d( " dat aChannel Send" ) . di sabl ed = f al se;
sendBut t on. di sabl ed = f al se;
cl oseBut t on. di sabl ed = f al se;
} el se {
document . get El ement ByI d( " dat aChannel Send" ) . di sabl ed = t r ue;
sendBut t on. di sabl ed = t r ue;
cl oseBut t on. di sabl ed = t r ue;
}
}



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 22 ]
The following screenshot shows that Peer 1 is prepared to send text to Peer 2 using
the Dat aChannel API of WebRTC:
Empty text areas before beginning the exchange of text
On clicking on the Start button, as shown in the following screenshot, a session is
established between the peers and the server:
Putting in text from one's peers after hitting the Start button
As Peer 1 keys in the message and hits the Send button, the message is passed on
to Peer 2. The preceding snapshot is taken before sending the message, and the
following picture is taken after sending the message:
Text is exchanged on DataChannel on the click of the Send button



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 23 ]
However, right now, you are only sending data from one localhost to another.
This is because the system doesn't know any other peer IP or port. This is where
socket-based servers such as Node.js come into the picture.
Media traversal in WebRTC clients
Real-time Transport Protocol (RTP) is the way for media to ow between end
points. Media could be audio and/or video based.
Media stream uses SRTP and DTLS protocols.
RTP in WebRTC is by default peer-to-peer as enforced by the Interactive Connectivity
Establishment (ICE) protocol candidates, which could be either STUN or TURN. ICE
is required to establish that rewalls are not blocking any of the UDP or TCP ports. The
peer-to-peer link is established with the help of the ICE protocol. Using the STUN and
TURN protocols, ICE nds out the network architecture and provides some transport
addresses (ICE candidates) on which the peer can be contacted.
An RTCPeer Connect i on object has an associated ICE, comprising the
RTCPeer Connect i on signaling state, the ICE gathering state, and the ICE connection
state. These are initialized when an object is rst created. The ow of signals through
these nodes is depicted in the following call ow diagram:
Peer A STUN TURN Signal Channel Peer B
Peer A STUN TURN Signal Channel Peer B
Who am I?
Symmetric NAT
Offer SDP
Answer SDP
Who am I?
ICE candidate(B)
ICE candidate(A)
Answer SDP
Offer SDP
ICE candidate(A)
ICE candidate(B)
213.51.61.3:5656
Channel please



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 24 ]
ICE, STUN, and TURN are dened as follows:
ICE: This is the framework to allow your web browser to connect with peers.
ICE uses STUN or TURN to achieve this.
STUN: This is the protocol to discover your public address and determine
any restrictions in your router that would prevent a direct connection with a
peer. It presents the outside world with a public IP to the WebRTC client that
can be used by the peers to communicate to it.
TURN: This is meant to bypass the Symmetric NAT restriction by
opening a connection with a TURN server and relaying all information
through this server.
STUN/ICE is built-in and mandatory for WebRTC.
WebRTC through WebSocket signaling
servers
Signaling is a crucial activity to establish any kind of network-based communication.
It lets the endpoints share the session description and media information before
setting up the path to actually exchange media. For a simple WebRTC client,
there are JavaScript-based WebSocket servers that can provide such signaling
in a permanent, full duplex, real-time manner. Node.js is one such server.
Node.js
Node.js is an asynchronous, server-side JavaScript server powered by Chrome's
V8 JS engine. There are many WebSocket libraries, such as Socket.io and SockJS, that
can run over it. Why are they used? They are used because the WebSocket server will
do the WebSocket signaling between WebRTC clients and the server without using
other protocols such as XMPP or SIP.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 25 ]
Let's see how we can use Node.js signaling server through the following
simple steps:
1. On a Windows machine, install nodej s. exe from the ofcial download site,
ht t p: / / www. nodej s. or g.
2. To check whether Node.js is properly installed and working, check the
version using the following command lines
node - v
The output in my case is v0. 10. 26.
3. Open the command prompt, and type node <name of t he J S f i l e>
in the window. Consider the following command line as an example:
node si gnal er. j s
To write and run a simple server-side program, open Notepad, make a sample JS le
with a name, say, consol e, and add some content to the consol e. l og( ' node. j s
r unni ng f i ne' ) le. Run this le using the following Node.js command from the
command prompt:
node consol e. j s
The following screenshot shows the output of the preceding command line:



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 26 ]
Let's now look at the overview of steps using Node.js to set up the signaling
environment for a WebRTC client.
1. First, we need a JavaScript library to support WebRTC signaling operations.
We can use si gnal l er . j s for this. Download si gnal l er . j s from
ht t ps: / / gi t hub. com/ muaz- khan/ WebRTC- Exper i ment / bl ob/ mast er /
websocket - over - nodej s/ si gnal er . j s.
2. Next, we should run the JavaScript library using the Node.js server.
We can do so by executing the following command in the terminal window:
node si gnal er. j s
3. Specify the address of the Node.js server machine in the WebRTC client.
Now, we can make inter-browser WebRTC audio/video calls, where
the signaling is handled by the Node.js WebSocket signaling server.
The following diagram depicts how Node.js is used as a signaling server:
Node.js
Signaling Signaling
Encrypted Media
RTP
Bob's Browser Alice's Browser
The preceding diagram denotes signaling across WebRTC clients over the
Node.js WebSocket-based server. The media ows from peer to peer.
Making a peer-to-peer audio call using
Node.js for signaling
We have seen how a JavaScript program is hosted on a Node.js signaling server.
Now, let's study the process of making an audio/video call using this setup. The
following code references Muaz Khan WebRTC experiments, which is under the
MIT license. The library used is Peer Connect i on. j s. The following are the CSS
descriptions for the audio and video content on a page:
audi o, vi deo {
ver t i cal - al i gn: t op;



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 27 ]
}
. set up {
bor der - bot t om- l ef t - r adi us: 0;
bor der - t op- l ef t - r adi us: 0;
mar gi n- l ef t : - 9px;
mar gi n- t op: 8px;
posi t i on: absol ut e;
}
. hi ghl i ght { col or : r gb( 0, 8, 189) ; }
Next, we will look at the JavaScript functions that dene the behavior of the WebRTC
client. This is a modied version of code from one- t o- one- peer connect i on. ht ml
under the WebRTC experiments master from Muaz Khan. For better clarity and easy
understanding, I have removed the functions of unique ID, rotate video, and scale
video, and have minimal CSS styling.
The following code denes the websocket . onopen and websocket . send operations:
var channel = l ocat i on. hr ef . r epl ace( / \ / | : | #| %| \ . | \ [ | \ ] / g, ' ' ) ;
var websocket = new WebSocket ( ' ws: / / ' + document . domai n +
' : 12034' ) ;
websocket . onopen = f unct i on( ) {
websocket . push( J SON. st r i ngi f y( {
open: t r ue, channel : channel
}) ) ;
};
websocket . push = websocket . send;
websocket . send = f unct i on( dat a) {
websocket . push( J SON. st r i ngi f y( {
dat a: dat a, channel : channel
}) ) ;
};
The following code is for the creation of a new peer connection and for every user
who joins a session:
var peer = new Peer Connect i on( websocket ) ;
peer . onUser Found = f unct i on( user i d) {
i f ( document . get El ement ByI d( user i d) ) r et ur n;
/ * addi ng t he name of r oomt o r ooml i st */
var t r = document . cr eat eEl ement ( ' t r ' ) ;
var t d1 = document . cr eat eEl ement ( ' t d' ) ;
var t d2 = document . cr eat eEl ement ( ' t d' ) ;



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 28 ]
t d1. i nner HTML = user i d + ' vi deo cal l ' ;
/ * cr eat i ng el ement but t on t o r ooml i st */
var but t on = document . cr eat eEl ement ( ' but t on' ) ;
but t on. i nner HTML = ' J oi n' ;
but t on. i d = user i d;
but t on. st yl e. f l oat = ' r i ght ' ;
/ * add t he user t o sessi on on but t on cl i ck */
but t on. oncl i ck = f unct i on( ) {
but t on = t hi s;
get User Medi a( f unct i on( st r eam) {
/ / get user medi a
peer . addSt r eam( st r eam) ;
/ / add t he st r eam
peer . sendPar t i ci pat i onRequest ( but t on. i d) ;
}) ;
but t on. di sabl ed = t r ue;
};
t d2. appendChi l d( but t on) ;
t r . appendChi l d( t d1) ;
t r . appendChi l d( t d2) ;
r oomsLi st . appendChi l d( t r ) ;
};
The following code adds streaming to the video element of HTML and sets
its characteristics:
peer . onSt r eamAdded = f unct i on( e) {
i f ( e. t ype == ' l ocal ' )
document . quer ySel ect or ( ' #st ar t - br oadcast i ng' ) . di sabl ed =
f al se;
var vi deo = e. medi aEl ement ;
vi deo. set At t r i but e( ' wi dt h' , 400) ;
vi deo. set At t r i but e( ' hei ght ' , 400) ;
vi deo. set At t r i but e( ' cont r ol s' , t r ue) ;
vi deosCont ai ner . i nser t Bef or e( vi deo,
vi deosCont ai ner . f i r st Chi l d) ;
vi deo. pl ay( ) ;
};



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 29 ]
The following code is to close the streaming session:
peer . onSt r eamEnded = f unct i on( e) {
var vi deo = e. medi aEl ement ;
i f ( vi deo) {
vi deo. st yl e. opaci t y = 0;
set Ti meout ( f unct i on( ) {
vi deo. par ent Node. r emoveChi l d( vi deo) ;
scal eVi deos( ) ;
}, 1000) ;
}
};
document . quer ySel ect or ( ' #st ar t - br oadcast i ng' ) . oncl i ck =
f unct i on( ) {
t hi s. di sabl ed = t r ue;
get User Medi a( f unct i on( st r eam) {
peer . addSt r eam( st r eam) ;
peer . st ar t Br oadcast i ng( ) ;
}) ;
};
document . quer ySel ect or ( ' #your - name' ) . onchange = f unct i on( ) {
peer . user i d = t hi s. val ue;
};
var vi deosCont ai ner = document . get El ement ByI d(
' vi deos- cont ai ner ' ) | | document . body;
var bt nSet upNewRoom= document . get El ement ByI d( ' set up- new- r oom' ) ;
var r oomsLi st = document . get El ement ByI d( ' r ooms- l i st ' ) ;
i f ( bt nSet upNewRoom) bt nSet upNewRoom. oncl i ck =
set upNewRoomBut t onCl i ckHandl er ;
The following code is to capture the user media:
f unct i on get User Medi a( cal l back) {
var hi nt s = {
audi o: t r ue,
vi deo: {
opt i onal : [ ] ,
mandat or y: {
mi nWi dt h: 200, mi nHei ght : 200, maxWi dt h: 400,
maxHei ght : 400, mi nAspect Rat i o: 1. 77
}
}
};



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 30 ]
navi gat or . get User Medi a( hi nt s, f unct i on( st r eam) {
var vi deo = document . cr eat eEl ement ( ' vi deo' ) ;
vi deo. sr c = URL. cr eat eObj ect URL( st r eam) ;
vi deo. cont r ol s = t r ue;
vi deo. mut ed = t r ue;
peer . onSt r eamAdded( {
medi aEl ement : vi deo,
user i d: ' sel f ' ,
st r eam: st r eam
}) ;
cal l back( st r eam) ;
}) ;
}
The following is the web page's HTML content to add a button to start transmitting
the media, a video element to display the media, a text eld to add a user's name,
and a table to list the existing available sessions:
<i nput t ype=" t ext " i d=" your - name" pl acehol der =" your - name" >
<but t on i d=" st ar t - br oadcast i ng" cl ass=" set up" >
St ar t Tr ansmi t t i ng Your sel f ! </ but t on>
<! - - l i st of al l avai l abl e conf er enci ng r ooms - - >
<t abl e i d=" r ooms- l i st " st yl e=" wi dt h: 100%; " ></ t abl e>
<! - - l ocal / r emot e vi deos cont ai ner - - >
<di v i d=" vi deos- cont ai ner " ></ di v>
The following screenshot depicts a user, Alice, creating a new session named al i ce.
Here, the user Alice creates a session for broadcasting video, which will be added to
the room list.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 31 ]
Alice's media is streamed on the session space, as shown in the next screenshot:
A new user, Bob, views the list of ongoing sessions from his remote computer,
and clicks on the Join button, as shown in the following screenshot, to join
Alice's session:



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 32 ]
The following screenshot displays a two-way audio and video session in progress
between Bob and Alice:
Bob and Alice are in an audio/video sharing session. Using other WebRTC APIs,
we can also add le sharing, text chat, screen sharing capabilities, and so on to this
simple demonstration to turn it into a multifeatured communication tool.
Running WebRTC with SIP
This section introduces the approach to use the SIP signaling mechanism with
WebRTC. Like any other VoIP protocol, SIP also provides the signaling framework
before setting up an actual media path. However, the foundation of open standard
and industry-adopted signaling protocol such as SIP is recommended, as it provides
the rst and most crucial step to a strong, scalable architecture.
Session Initiation Protocol (SIP)
As we already know, SIP is a signaling protocol that is used to establish an RTP
between two endpoints.
As per the ofcial document, RFC 3261, SIP is an application-layer
control protocol that can establish, modify, and terminate multimedia
sessions (conferences) such as Internet telephony calls.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 33 ]
The SIP stack denes the Request and Response methods. These methods are
used to gather the information about endpoints that wish to participate in a
communication so that the device-specic information such as IP, port, availability,
media understanding, and audio-video device compatibility can be sorted out
before establishing a owing media connection.
However, it should be noted that traditional SIP is a bit different from SIP over
WebSocket (SIPWS), which is used in case of WebRTC with SIP signaling.
It is not by default that every SIP server would understand SIPWS. Only those
SIP servers that have WebSocket support, or state that they are WebRTC compliant,
will be able to proxy or understand the SIP messages sent from a WebRTC client.
Why do we use SIPWS? This protocol allows the development of Convergent
applications, that is, applications that support SIP for communication, HTTP for
web components, and WebRTC for media. SIPWS can be transformed into plain SIP
signal through a gateway, which can then interact with the IMS network. Also, SIP
can be used to integrate application logic such as call screening and call rerouting,
with the help of SIP Servlets or other kinds of SIP programming. More of this is
given in Chapter 3, WebRTC with SIP and IMS.
SIPWS is explained in detail in the IETF draft, The WebSocket Protocol as a Transport for
the Session Initiation Protocol (SIP) draft-ietf-sipcore-sip-websocket-10 and can be found at
ht t p: / / t ool s. i et f . or g/ ht ml / dr af t - i et f - si pcor e- si p- websocket - 10.
The following gure depicts the use of SIPWS signaling plane with WebRTC
media plane:



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 34 ]
The following gure provides the call ow of the SIPWS signaling mechanism.
Any SIP request is preceded by a one-time WebSocket handshake.
Alice loads a web page using her web browser and retrieves the JavaScript code that
implements the SIP WebSocket subprotocol. The JavaScript code (SIP WebSocket
Client) establishes a secure WebSocket connection with a SIP proxy/registrar
(SIP WebSocket Server) at pr oxy. exampl e. com.
The following is an example of a WebSocket handshake in which the Client requests
the WebSocket SIP subprotocol support from the Server:
ws: / / ns313841. ovh. net: 10060/
Request Method:
GET
Status Code:
101 Swi tchi ng Protocol s
Request Headers:
Provi si onal headers are shown.
Cache- Control : no- cache
Connecti on: Upgrade
Host: ns313841. ovh. net: 10060
Ori gi n: http: / / si pml 5. org
Pragma: no- cache
Sec- WebSocket- Extensi ons: permessage- def l ate; cl i ent_max_wi ndow_bi ts,
x- webki t- def l ate- f rame
Sec- WebSocket- Key: 4aUpDOwtSWPaLmXKzQef J Q==
Sec- WebSocket- Protocol : si p
Sec- WebSocket- Versi on: 13
Upgrade: websocket



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 35 ]
User- Agent: Mozi l l a/ 5. 0 ( X11; Li nux i 686 ( x86_64) ) Appl eWebKi t/ 537. 36
( KHTML, l i ke Gecko) Chrome/ 32. 0. 1700. 102 Saf ari / 537. 36
Response Headersvi ewsource
Connecti on: Upgrade
Content- Length: 0
Sec- WebSocket- Accept: 5l 6i qk2+moekkwZsql Xo4cewzcw=
Sec- WebSocket- Protocol : si p
Sec- WebSocket- Versi on: 13
Upgrade: websocket
The following diagram shows the call between Alice and Bob through the SIP proxy
server over WebSocket signaling:
Every SIP endpoint is registered with the SIP Server by a unique callable ID. This is
referred to as the SIP URI and is denoted by the si p: <user name>@<domai nname>
format. When a user, Alice, calls another user, Bob, through Bob's SIP URI, then the
SIP WebSocket Server at pr oxy. exampl e. comacts as a SIP proxy node and routes
the I NVI TE call to Bob's contact. Bob answers the call to start a conversation and then
terminates it with a BYE request when the communication is over.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Running WebRTC with and without SIP
[ 36 ]
JavaScript-based SIP libraries
There are many popular JavaScript libraries that offer easy-to-integrate support
for WebRTC communication using SIP signaling:
SIPJS: This is an SIP stack in JavaScript to implement SIP-based audio
and video user agents in the browser. You can nd a running demo at
ht t p: / / t hei nt enci t y. com/ si p- j s/ phone. ht ml ?net wor k_t ype=WebRTC.
The demo application has the option to switch between WebRTC capabilities
and Flash for browsers that support and do not support WebRTC.
JSSIP: This is an SIP over WebSocket transport API for audio/video calls
and instant messaging. It works with all SIPWS-compatible SIP servers such
as OverSIP, Kamailio, and Asterisk servers. You can nd a running demo at
ht t p: / / t r yi t . j ssi p. net / .
sipML5: This is an open source JavaScript library with a provision for
RTCWeb Breaker (audio and video transcoding when the endpoints do not
support the same codecs or the remote server is not RTCWeb compliant). For
example, features such as audio/video call, instant messaging, presence, call
hold/resume, explicit call transfer, and Dual-tone multi-frequency (DTMF)
signaling using SIP INFO are present. You can nd a running example at
ht t p: / / si pml 5. or g/ cal l . ht m.
QuoffeSIP: This is another WebRTC SIP library to establish real-time
communication between browsers. This is developed in CoffeeScript
(simple syntax). It features video/audio call capabilities using SIP over the
Websockets protocol and also uses the SIP Outbound and GRUU protocols.
You can nd a running example at ht t p: / / t al kset up. quobi s. com/ .
The implementation of the sipML5 and JSSIP libraries to constitute a simple
WebRTC browser client that is able to communicate to a similar peer in any
WebRTC-supported browser is covered in the next chapter.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Chapter 1
[ 37 ]
Summary
In this chapter, we learned that a WebRTC communication process is divided into
two parts: signaling, where the session setup and teardown is agreed to, and media
transactions, which deals with the actual RTP streams that contain voice/video/
data that the user has sent. We saw how to program the three basic APIs of WebRTC
media stack, namely, get User Medi a, RTCPeer Connect i on, and Dat aChannel .
The Running WebRTC without SIP section described signaling done over JSON via
XMLHttpRequest using Node.js as the intermediately signaling server to connect the
peers and prepare for the media ow. The next section, Running WebRTC with SIP,
listed the libraries or WebRTC clients that use SIP over WebSocket to take care of the
signaling between WebRTC peers. In the following chapters, we will see how to use
WebRTC media APIs over the SIP WebSocket protocol in detail.



For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide
Where to buy this book
You can buy WebRTC Integrator's Guide from the Packt Publishing website:
ht t ps: / / www. packt pub. com/ web- devel opment / webr t c- i nt egr at or s-
gui de
Free shipping to the US, UK, Europe and selected Asian countries. For more information, please
read our shipping policy.
Alternatively, you can buy the book from Amazon, BN.com, Computer Manuals and
most internet book retailers.



















www.PacktPub.com




For More Information:
www.packtpub.com/web-development/webrtc-integrators-guide