exploring the possibilities of sencha and webrtc
DESCRIPTION
Rich Waters, Tobias Uhlig & Alexandru Lazar at ModUX 2013 http://moduxcon.comTRANSCRIPT
![Page 1: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/1.jpg)
Exploring the Possibilities of
Sencha & WebRTC Alexandru Lazar - Engineer, ModusCreate Rich Waters - Chief Software Architect, Extnd LLC Tobias Uhlig - Solutions Engineer, Sencha
@alexlazar86@rwaters@tobiasuhlig
Monday, September 23, 13
![Page 2: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/2.jpg)
Monday, September 23, 13
![Page 3: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/3.jpg)
Ext JS DataView
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/view/data-view.html
Monday, September 23, 13
![Page 4: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/4.jpg)
https://code.google.com/p/css-vfx
Charles Ying (2009)
Snow Stack
Monday, September 23, 13
![Page 5: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/5.jpg)
Best of both worlds
Demo Time
Monday, September 23, 13
![Page 6: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/6.jpg)
Ext JS and HTML5
Monday, September 23, 13
![Page 7: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/7.jpg)
Circles Component
Monday, September 23, 13
![Page 8: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/8.jpg)
And Sencha Touch?
Monday, September 23, 13
![Page 9: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/9.jpg)
Custom Drag & Drop
Monday, September 23, 13
![Page 10: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/10.jpg)
Coding Session
Monday, September 23, 13
![Page 11: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/11.jpg)
Coding Session
Monday, September 23, 13
![Page 12: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/12.jpg)
Animations for Ext JS
Monday, September 23, 13
![Page 13: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/13.jpg)
Animations for Touch
Monday, September 23, 13
![Page 14: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/14.jpg)
What is WebRTC ?
A new communication
Platform
Open Source
Javascript API that enables Real Time
Communication(RTC)
Monday, September 23, 13
![Page 15: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/15.jpg)
The need for WebRTC
•Reduce infrastructure requirements
•Need for speed & quality
•Live streaming & data transfers
•Easy Video/Audio chat sessions
Monday, September 23, 13
![Page 16: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/16.jpg)
Business Perspective
ServerCloud
Client Client
ServerCloud
Client ClientWebRTC
HttpRequest/WS HttpRequest/WS
Monday, September 23, 13
![Page 17: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/17.jpg)
Advantages
• Higher performance
• No server latency
• Less server-side infrastructure
• Easy to implement
• Privacy & Security
• No browser plugins needed
Monday, September 23, 13
![Page 18: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/18.jpg)
Disadvantages• Not fully implemented yet
• Specification still in Draft
• Cross-browser support very limited & requires polyfill
• Broadcast activity implementation becomes much more complex & quirky
• Data persistency
Monday, September 23, 13
![Page 19: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/19.jpg)
Browser Compatibility
• PC
• Google Chrome 23
• Mozilla Firefox 22
• Mobile - only Android for the moment
• Google Chrome 28 (Enabled by default since 29)
• Mozilla Firefox 24
• Bowser (Ericsson Labs)
Monday, September 23, 13
![Page 20: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/20.jpg)
Browser Compatibility
Monday, September 23, 13
![Page 21: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/21.jpg)
Key Features
• Media Streams
• Peer Connection
• Data Channels
Monday, September 23, 13
![Page 22: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/22.jpg)
Media Streamnavigator.getUserMedia ( constraints, successCallback, errorCallback );
Monday, September 23, 13
![Page 23: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/23.jpg)
Peer Connection
• API for establishing audio/video call sessions
• The Built-in concepts: p2p, codec control, encryption and bandwidth management
• 2 Main Protocols:
• ROAP - RTCWeb Offer/Answer Protocol
• JSEP - JavaScript Session Establishment Protocol
Monday, September 23, 13
![Page 24: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/24.jpg)
Peer Connection
• To start a session the client needs:
• Local Session Description
• Remote Session Description
• Remote Transport Candidates
• Caller - Offer
• Callee - Answer
Monday, September 23, 13
![Page 25: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/25.jpg)
Signaling Flow
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Signaling
Session DescriptionSession Description
Media Flow
Signaling
Monday, September 23, 13
![Page 26: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/26.jpg)
Signaling Flow #1
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Session Description
Session Description
Caller sends the Offer
Monday, September 23, 13
![Page 27: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/27.jpg)
Signaling Flow #2
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Session Description
Session Description
Callee receives the Offer
Monday, September 23, 13
![Page 28: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/28.jpg)
Signaling Flow #3
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Session Description
Session Description
Callee Sends the Answer
Monday, September 23, 13
![Page 29: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/29.jpg)
Signaling Flow #4
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Session Description
Session Description
Caller receives the Answer
Monday, September 23, 13
![Page 30: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/30.jpg)
Signaling Flow #5
Browser
Caller
Application
Server/Cloud
Browser
Callee
Application
App Level
WebRTC
Connection Established - Media Flows
Media Flow
Monday, September 23, 13
![Page 31: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/31.jpg)
Peer Connection
//Config peer connection & add streamPeerConnection(config, iceCallback);addStream(stream);
//Create the local session description& apply itcreateOffer(args);setLocalDescription(type, desc);startIce();
.
.
. --- wait for the Callee to respond ---. ..
//Got the Remote descriptionsetRemoteDescription(type, desc);
-- Receive the call from caller --
//Create Peer connection & set descriptionPeerConnection(config, iceCallback);setRemoteDescription(type, desc);
//Create local session desc & apply itcreateAnswer(args);setLocalDescription(type, desc);startIce();
Caller CalleeTimeline
Monday, September 23, 13
![Page 32: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/32.jpg)
How does communication work?
• Connections to remote peers are established using NAT-traversal technologies such as ICE, STUN, and TURN.
• NAT - network address translation
• ICE - Interactive Connectivity Establishment
• STUN - Session Traversal Utilities for NAT
• TURN - Traversal Using Relays around NAT
• Sending the locally-produced streams to remote peers and receiving streams from remote peers.
• Sending arbitrary data directly to remote peers.
Monday, September 23, 13
![Page 33: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/33.jpg)
NAT (Network Address Translation)
• The process of modifying IP address information into IPv4 Headers while in transit across a traffic routing device (address:port)
Monday, September 23, 13
![Page 34: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/34.jpg)
ICE (Interactive Connectivity Establishment)
• The protocol used by NAT Traversal to create Offer/Answer Protocols.
• Uses STUN or TURN protocols
• Usage:
• Internet applications of Voice over Internet Protocol (VoIP)
• p2p communications
• video, instant messaging(chats) and other interactive media
• NAT transversal is an important component to facilitate communications involving hosts on private networks, often located behind firewalls.
Monday, September 23, 13
![Page 35: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/35.jpg)
STUN (Session Traversal Utilities for NAT)
• It is a client-server protocol
• Returns the public IP to a client + information from which the client can infer the type of NAT it sits behind.
• Used to permit NAT transversal for applications.
• Intended to be a tool to be used by other protocols such as ICE (previous slide)
Monday, September 23, 13
![Page 36: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/36.jpg)
TURN (Traversal Using Relays around NAT )
• Places a third party server to relay messages between two clients where peer to peer media traffic is not allowed by a firewall.
• Turns the tables so that the client on the inside can be on the receiving end, rather than the sending end, of a connection that is requested by the client.
• Provides the same security functions provided by symmetric NATs and firewalls
Monday, September 23, 13
![Page 37: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/37.jpg)
Create the RTCPeerConnection
Monday, September 23, 13
![Page 38: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/38.jpg)
Create the Offer
Monday, September 23, 13
![Page 39: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/39.jpg)
Create the Answer
Monday, September 23, 13
![Page 40: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/40.jpg)
Create the ICE Candidate
Monday, September 23, 13
![Page 41: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/41.jpg)
Modus Talk Demo
Monday, September 23, 13
![Page 42: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/42.jpg)
Multiple Peers
• Mesh
• Chrome has hard limit of 256 peer connections
• Maximum bandwidth used by each video RTP port (media-track) is about 1MB by default though we can force lower quality
• sdp = sdp.replace( /a=mid:video\r\n/g , 'a=mid:video\r\nb=AS:256\r\n'); // Cap outgoing bandwidth at 256Kb/s
• Repeater
Monday, September 23, 13
![Page 43: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/43.jpg)
Sample Multi Peer Flow
callUser(userId)
onAcceptCallinitiateVideoCallcreateRoom-- Create PeerConnection, query local media, attach stream & become marked as broadcaster --
-- Invite 2nd Peer ---- Repeat above flow minus createRoom --
-- Once 2+ peer video begin streaming --announceNewParticipant(room)
---- Peer #1 ----onIncomingCallacceptCall
onInitiateVideoCall-- Create PeerConnection, query local media & attach stream --
---- Peer #2 ------ Repeat above flow --
---- Peer #1 ----onNewParticipant-- Create another PeerConnection instance, establish separate signaling channel & begin exchanging SDP, attach local stream to new Peer --
Caller CalleeTimeline
Monday, September 23, 13
![Page 44: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/44.jpg)
Live Streaming (1-n)
Monday, September 23, 13
![Page 45: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/45.jpg)
S-Circles Demo #2
Monday, September 23, 13
![Page 46: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/46.jpg)
Sources
• http://www.webrtc.org/
• http://www.w3.org/TR/2013/WD-webrtc-20130910/
• http://en.wikipedia.org/wiki/Interactive_Connectivity_Establishment
• http://en.wikipedia.org/wiki/STUN
• http://en.wikipedia.org/wiki/Network_address_translation
• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
Monday, September 23, 13
![Page 47: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/47.jpg)
Code Resources• http://peerjs.com/
• Simplified communication & provided signaling server (no streaming support)
• https://www.webrtc-experiment.com/
• Examples of video chat, screen sharing & DataChannels
• https://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js
• Chrome/Firefox polyfill
Monday, September 23, 13
![Page 48: Exploring the Possibilities of Sencha and WebRTC](https://reader033.vdocuments.net/reader033/viewer/2022052822/554baccfb4c905ae618b54d0/html5/thumbnails/48.jpg)
Questions?
Monday, September 23, 13