1. WebRTC and Mobile
Integration
Giorgio Natili

2. About me
e-mail: g.natili@gnstudio.com
twitter: @giorgionatili
blog: webplatform.io (coming soon!)
community: codeinvaders.net

3. Agenda
• What is WebRTC
• WebRTC and Modern Browsers
• Ninja Build and GYP files
• Compile WebRTC for Android and iOS
• Let Mobile and the Web talk each other

4. What is WebRTC

5. What is it?
• WebRTC is a free, open project that enables web browsers with
Real-Time Communications (RTC) capabilities via Javascript APIs
• The WebRTC Native Code package is meant for browser
developers that want to integrate WebRTC
• WebRTC defines a way for browsers to implement applications
like video chat in a way that is both interoperable with other
clients, and does not require the use of a plugin

6. Main
Responsibilities
• Get real-time streaming audio and video or data
• Communicate real-time streaming audio, video or data
• Exchange session control messages and media information
(not in the standard)

7. WebRTC
Environment
• Clients (browsers, desktop, mobile, etc.)
• Servers (stun, ice, etc.)
• Gateway (i.e. PSTN)
• Internet

8. Native C++ API
• RTP Stack, handle the network stack for the RTP protocol
• STUN/ICE, handle the peer connections using STUN or ICE
• Session Management, signalling manager to setup calls
• VoiceEngine, audio media chain manager (card -> network)
• Audio codecs, such as iSAC / iLBC / Opus
• VideoEngine, video media chain manager (cam -> network)
Native API

10. WebRTC Triangle
The most common scenario is likely to be where both browsers are
running the same WebRTC web application, downloaded from the
same webpage
• Two web browsers running the same application
• One server for signaling and negotiation

11. Is a Server Still
Required?
• Signalling Server (SIP,XMPP,WebSocket,Socket.io,XHR,etc.)
• ICE Servers (STUN,TURN)
• Media Servers (Asterisk, etc.)

12. Stun & Turn
• 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
• TURN (Traversal Using Relays around NAT) is a protocol that
allows for a client behind a network address translator (NAT) or
firewall to receive incoming data over TCP or UDP connections

13. What is Signalling?
• It's the mechanism by which peers send control messages to
each other to establishing a communication protocol
• Signalling protocols are a way to coordinate and control the
communication between peers
• Session control messages (communication initialization & co.)
• Network configuration (e.g. computer's IP address and port)
• Media capabilities (e.g. codecs and resolutions)

14. Signalling Process
• The local peer opens one or more real-time ports ( RTP )
• The local peer then has to learn of the ports that its remote peer
has opened
• A process of discovery is used to find a local and remote port
pair (a candidate pair) that can exchange UDP packets
• Finally, a real-time transport is established on the pair of ports

15. What is SDP?
Session Description Protocol (SDP): A protocol that is used to
announce sessions, manage session invitations, and perform other
types of initiation tasks for multimedia sessions

16. SDP Flow

17. Complete Process

18. WebRTC in
Modern Browsers

19. The API
Don't confuse WebRTC API and the the <device> API!!!
WebRTC API is available in:
• Chrome 24+
• Firefox 22+
• Opera 12+
• And on mobile!!!

20. Internet Explorer
What's about our good friend IE?
• It's unclear how and when the support will be available
• So far you can use ChromeFrame to support WebRTC (more info
about the ChromeFrame extension are available on the official
web page of the project developers.google.com/chrome/chrome-
frame/)
• Microsoft is going to work on a proprietary standard (weird?)

21. WebRTC pro and
cons
• There are several good reasons to start to use WebRTC
especially if compared with today market where most of the
components are proprietary
• No licences 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

22. Support
The support is partial and the documentation is very fragmented

23. Key Features
The key features of the WebRTC API are:
• MediaStreams (aka getUserMedia), access to and control control
of the user camera and microphone
• PeerConnection, negotiate and connect clients in order to allow
direct communication
• DataChannels, peer to peer data exchange

24. Access Mic and
Camera
In order to access the user camera and audio is enough to use the
getUserMedia method of the navigator object
navigator.getUserMedia({video: true, audio:true},onStreamReady, onStreamError);
• The onStreamReadyhandler receive a MediaStream object
• The onStreamErrorhandler receive a NavigatorUserMediaError
object with a code

25. Demo
Open a supported browser and follow this link https://webrtc-
demos.appspot.com/html/gum2.html

26. The MediaStream
Object
A MediaStream object is made up by:
• the stop(); method
• Two MediaStreamTrackList stored in the audioTracks and
videoTracks properties (actually one is for the video and one for
the audio)
• The MediaStreamTrack object stored in the lists define the
properties kind (e.g. "video") and label (e.g. "FaceTime HD Camera
(Built-in))

27. Play with Sounds
Open http://webcamtoy.com/ and enjoy!
Add Audio to a
Video Track

28. navigator.webkitGetUserMedia({audio:true}, onStreamReady);
var ac = new webkitAudioContext();
var mediaStreamSource = ac.createMediaStreamSource(stream);
mediaStreamSource.connect(ac.destination);
• Request access to the media
• Create a new prefixAudioContext and create new AudioNode
from the stream
• Connect to the stream using the destination

29. What's Just
Happened?
You can access sounds and deliver them to the end user, check it out
http://soundstep.com/blog/experiments/jsdetection/
( ^ _ ^ )

30. RTCPeerConnection
The signalling is initiated by a RTCPeerConnection object
• The methods createOffer, setLocalDescription, createAnswer
and setRemoteDescription are executed at a given time
• In order to connect peers you rely on ICE
• ICE is a framework for connecting peers, such as two video chat
clients; initially, ICE tries to connect peers directly, with the lowest
possible latency, via UDP
• In this process, STUN servers have a single task: to enable a peer
behind a NAT to find out its public address and port

31. RTCPeerConnection
Demo
Let's see a simple demo to clarify RTCPeerConnection object

32. Ninja Build

33. What is it?
• It is a build system written with the specific goal of improving
the edit-compile cycle time
• It behaves very similar to Make
• Ninja is included in depot_tools (as well as gyp) so just install
the tools

34. Philosophy
• Build systems get slow when they need to make decisions, Ninja
it's very fast when doing decisions and evaluation
• It contains the barest functionality necessary to describe
arbitrary dependency graphs
• It is intended to be used with a separate program generating its
input files

35. Design Goals
ninja -C out/Debug -j 10 AppRTCDemo
• Very fast
• Very little
• Very simple

36. Install and Run
Ninja
git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ export PATH="$PATH":`pwd`/depot_tools
• Fetch depot_tools:
• Add depot_tools to your PATH:
• Windows (Cygwin and non-Cygwin):

37. The same!!!
GYP
(generate your project)

38. What is it?
• A tool for the Chromium project that generates native Visual
Studio, Xcode and SCons (Software Construction Tooland/or make
build files from a platform-independent input format
• A very readable format to handle complex configurations and
dependencies

39. File Structure
{
'targets': [
{
'target_name': 'foo',
'type': 'executable',
'sources': [
'linux_specific.cc',
],
'conditions': [
['OS != "linux"', {
'sources!': [
# Linux-only; exclude on other platforms.

40. WebRTC for
Android

41. Get the Source
Code
Run the following command in an empty folder:
$ gclient config http://webrtc.googlecode.com/svn/trunk
$ gclient sync --force
Open the file .gclient located in the folder you did the sync and add
the ios and mac targets:

42. Build the Project for
iOS
• Create a new file and name it makeall-ios.sh
• Change the permissions chmod +x makeall-ios.sh
• Open the makeall-ios.sh file (local)
• Run it and search for the all.xcodeproj file
• Open it with Xcode and build everything

43. Create a Project
Follow this steps https://github.com/GiorgioNatili/TLC-Native-iOS
(coming soon!)

44. Run the demo!

45. Q&A

46. Thanks!