Exploring the Possibilities of Sencha and WebRTC

4,766 views

Published on

Rich Waters, Tobias Uhlig & Alexandru Lazar at ModUX 2013
http://moduxcon.com

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,766
On SlideShare
0
From Embeds
0
Number of Embeds
1,758
Actions
Shares
0
Downloads
35
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Exploring the Possibilities of Sencha and WebRTC

  1. 1. 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
  2. 2. Monday, September 23, 13
  3. 3. Ext JS DataView http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/ view/data-view.html Monday, September 23, 13
  4. 4. https://code.google.com/p/css-vfx CharlesYing (2009) Snow Stack Monday, September 23, 13
  5. 5. Best of both worlds Demo Time Monday, September 23, 13
  6. 6. Ext JS and HTML5 Monday, September 23, 13
  7. 7. Circles Component Monday, September 23, 13
  8. 8. And Sencha Touch? Monday, September 23, 13
  9. 9. Custom Drag & Drop Monday, September 23, 13
  10. 10. Coding Session Monday, September 23, 13
  11. 11. Coding Session Monday, September 23, 13
  12. 12. Animations for Ext JS Monday, September 23, 13
  13. 13. Animations for Touch Monday, September 23, 13
  14. 14. What is WebRTC ? A new communication Platform Open Source Javascript API that enables Real Time Communication (RTC) Monday, September 23, 13
  15. 15. The need for WebRTC •Reduce infrastructure requirements •Need for speed & quality •Live streaming & data transfers •Easy Video/Audio chat sessions Monday, September 23, 13
  16. 16. Business Perspective Server Cloud Client Client Server Cloud Client Client WebRTC HttpRequest/WS HttpRequest/WS Monday, September 23, 13
  17. 17. Advantages • Higher performance • No server latency • Less server-side infrastructure • Easy to implement • Privacy & Security • No browser plugins needed Monday, September 23, 13
  18. 18. 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
  19. 19. 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
  20. 20. Browser Compatibility Monday, September 23, 13
  21. 21. Key Features •Media Streams •Peer Connection •Data Channels Monday, September 23, 13
  22. 22. Media Stream navigator.getUserMedia ( constraints, successCallback, errorCallback ); Monday, September 23, 13
  23. 23. 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
  24. 24. 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
  25. 25. Signaling Flow Browser Caller Application Server/Cloud Browser Callee Application App Level WebRTC Signaling Session DescriptionSession Description Media Flow Signaling Monday, September 23, 13
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Signaling Flow #5 Browser Caller Application Server/Cloud Browser Callee Application App Level WebRTC Connection Established - Media Flows Media Flow Monday, September 23, 13
  31. 31. Peer Connection //Config peer connection & add stream PeerConnection(config, iceCallback); addStream(stream); //Create the local session description& apply it createOffer(args); setLocalDescription(type, desc); startIce(); . . . --- wait for the Callee to respond --- . . . //Got the Remote description setRemoteDescription(type, desc); -- Receive the call from caller -- //Create Peer connection & set description PeerConnection(config, iceCallback); setRemoteDescription(type, desc); //Create local session desc & apply it createAnswer(args); setLocalDescription(type, desc); startIce(); Caller CalleeTimeline Monday, September 23, 13
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. 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
  36. 36. 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
  37. 37. Create the RTCPeerConnection Monday, September 23, 13
  38. 38. Create the Offer Monday, September 23, 13
  39. 39. Create the Answer Monday, September 23, 13
  40. 40. Create the ICE Candidate Monday, September 23, 13
  41. 41. Modus Talk Demo Monday, September 23, 13
  42. 42. 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:videorn/g , 'a=mid:videor nb=AS:256rn'); // Cap outgoing bandwidth at 256Kb/s • Repeater Monday, September 23, 13
  43. 43. Sample Multi Peer Flow callUser(userId) onAcceptCall initiateVideoCall createRoom -- 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 ---- onIncomingCall acceptCall 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
  44. 44. Live Streaming (1-n) Monday, September 23, 13
  45. 45. S-Circles Demo #2 Monday, September 23, 13
  46. 46. 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
  47. 47. 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
  48. 48. Questions? Monday, September 23, 13

×