WebRTC Presentation - Speaker Deck

Slide 1

Slide 1 text

The Software Society July 2014

Slide 2

Slide 2 text

Who am I Paul Sutherland Construction Surveyor at Black & Veatch Moved across to application deployment Working on mobile app development Member of Software Society since its formation in 2011 [email protected]

Slide 3

Slide 3 text

WebRTC What it is How you can use it Technical challenges Browser woes

Slide 4

Slide 4 text

Motivation Dive in to understand what the technology is Do a talk to bring everyone here up to speed Use it in my web projects Have fun with leading edge technology

Slide 5

Slide 5 text

Let's Get in our Time Machine Back to 1994ish

Slide 6

Slide 6 text

When the web was young

Slide 7

Slide 7 text

When the web was a hypertext driven page centric design

Slide 8

Slide 8 text

Things were simple looking

Slide 9

Slide 9 text

Moving forward 1998

Slide 10

Slide 10 text

We were still dominated by page centric design

Slide 11

Slide 11 text

Early Amazon 2001

Slide 12

Slide 12 text

Early Amazon - no targeted ads!!

Slide 13

Slide 13 text

Even in 2003 it was still fairly static

Slide 14

Slide 14 text

Then through the early to mid 2000s we became dynamic

Slide 15

Slide 15 text

The term "Web 2.0" was first used in January 1999 by Darcy DiNucci

Slide 16

Slide 16 text

"The Web we know now, which loads into a browser window in essentially static screenfuls, is only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to appear, and we are just starting to see how that embryo might develop. The Web will be understood not as screenfuls of text and graphics but as a transport mechanism, the ether through which interactivity happens. It will [...] appear on your computer screen, [...] on your TV set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe even your microwave oven". https://en.wikipedia.org/wiki/Web_2.0

Slide 17

Slide 17 text

Web 2.0

Slide 18

Slide 18 text

We we are interacting with the data without chasing links

Slide 19

Slide 19 text

We start to feed the machine

Slide 20

Slide 20 text

Giving birth to the Social web

Slide 21

Slide 21 text

What Next?

Slide 22

Slide 22 text

Welcome to the Real Time Web

Slide 23

Slide 23 text

A world where through the browser you can: Share Files Live Chat Sensor Feeds Data Feeds Screen Sharing Gaming

Slide 24

Slide 24 text

All Peer to Peer

Slide 25

Slide 25 text

History Google purchase Global IP Solutions (GIPS) for $68m in 2010 Google release WebRTC as a proposed standard in June 2011 They have pushed the W3C and IETF to develop standards Ericsson Labs release a prototype

Slide 26

Slide 26 text

First Implementation https://labs.ericsson.com/developer-community/blog/beyond-

Slide 27

Slide 27 text

This is made possible using three APIs MediaStream RTCPeerConnection RTCDataChannel

Slide 28

Slide 28 text

MediaStream Obtains the audio and video tracks Captures them as separate tracks Combines both the tracks to form a stream You interact via navigator.getUserMedia();

Slide 29

Slide 29 text

MediaStream http://dev.w3.org/2011/webrtc/editor/getusermedia.html

Slide 30

Slide 30 text

getUserMedia() http://dev.w3.org/2011/webrtc/editor/getusermedia.html

Slide 31

Slide 31 text

getUserMedia() Example http://webcamtoy.com/app/

Slide 32

Slide 32 text

getUserMedia() Example http://idevelop.ro/ascii-camera/

Slide 33

Slide 33 text

getUserMedia() Example http://shinydemos.com/facekat/

Slide 34

Slide 34 text

Constraints getUserMedia takes constraints Determining the width and height of video Chrome allows screen capture (experimental)

Slide 35

Slide 35 text

RTCPeerConnection Communicating with other browsers Signal processing Sets up the peer to peer communication Handles security

Slide 36

Slide 36 text

RTCPeerConnection http://www.WebRTC.org

Slide 37

Slide 37 text

RTCDataChannel Uses RTCPeerConnection to send data This is in the form of JSON This can support gaming This can handle file transfers

Slide 38

Slide 38 text

RTCDataChannel Uses a websocket style of API Low latency Sent as reliable or unreliable data

Slide 39

Slide 39 text

RTCDataChannel Example https://www.sharefest.me/

Slide 40

Slide 40 text

How do we find a Browser NATs and Firewalls cause problems Difficult to obtain a public IP

Slide 41

Slide 41 text

STUN & TURN Stun can determine the public IP address of a browser Simple server which connects browsers peer to peer Google have released the source code for their STUN servers Images on Amazon available Stund package is available for Ubuntu

Slide 42

Slide 42 text

STUN server http://www.html5rocks.com/

Slide 43

Slide 43 text

TURN TURN server is the back up Relays the connection is peer to peer fails Seamless in the background determining STUN or TURN

Slide 44

Slide 44 text

TURN server http://www.html5rocks.com/

Slide 45

Slide 45 text

Managing STUN and Turn

Slide 46

Slide 46 text

Welcome ICE Managing the best connection rests with the ICE framework Figures out the best option for the call Utilises STUN as first resort

Slide 47

Slide 47 text

Security http://io13webrtc.appspot.com/#55

Slide 48

Slide 48 text

Browser Support Chrome 23 Firefox 22 Opera 18

Slide 49

Slide 49 text

Mobile Support Chrome 28 Firefox 24 Opera Mobile 12

Slide 50

Slide 50 text

Apple Not supporting it They are very silent on it They would need to replace the VP8 codec with H.264 Replace Opus voice codec with AAC-LD

Slide 51

Slide 51 text

Microsoft Have an alternative called CU-RTC-Web Stands for: Customizable, Ubiquitous Real-Time Communication Looking at a lower level API

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

Interoperability between browsers Firefox Beta post May 2013 Opera 20 Chrome 25 are interoperable

Slide 54

Slide 54 text

API Differences W3C Standard Chrome Firefox getUserMedia webkitGetUserMedia mozGetUserMedia RTCPeerConnection webkitRTCPeerConnection mozRTCPeerConnection RTCSessionDescription RTCSessionDescription mozRTCSessionDescription RTCIceCandidate RTCIceCandidate mozRTCIceCandidate

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Outside the Browser sipML5 open source JavaScript SIP client Phono open source JavaScript phone API Zingaya embeddable phone widget