Real time P2P with HTML5 and JavaScript - JSfoo

Transcript

1. WebRTC Real Time Collaboration with JS & HTML5 Om Shankar Amazon, @WalmartLabs, Adobe Systems Loves the Web; believes moving it forward JavaScript freak, HTML5 Aficionado Usually, press right key. When bottom arrow glows, press down arrow key
2. I just want Internet, What the hell is HTML5
3. Web as an Application Don't you want to Communicate? Export, Share, Store, Edit? Record & Play videos and songs? Drag Drop, 3D, Flexible layouts, Create and Draw?
4. What are these? You tell me! You tell me right now!!
5. HTML5 Features Semantics, Offline & Storage, Multimedia, 3D & Graphics (WebGL, SVG), CSS3 (yes that's part of HTML5 Spec), Performance & Integration (CORS, AJAX2, WebWorkers), Connectivity (Real-time, WebSockets & Push), , Device Acces (Geolocation, Tilt, etc.)
6. What is WebRTC Web Real Time Communication: An HTML5 Featureset enabling Real Time P2P communication ... natively in Browsers - without any plugins. with support for data Sharing, Audio and Video Chat, etc. API Standards and Specs being maintained by . W3C
7. Where is JavaScript? - 3 main actions required for WebRTC on Client Side (Browser) are performed by JavaScript: Acquiring the Video and Audio Streams g e t U s e r M e d i a returning M e d i a S t r e a m (JS Object pointing a live stream being fed to it) Sharing Streams with peers - AKA Communicating ! R T C P e e r C o n n e c t i o n R T C I c e C a n d i d a t e Sharing data with peers R T C D a t a C h a n n e l
8. Acquiring Video and Audio g e t U s e r M e d i a c o n s t r a i n t s - Must for getusermedia, specifies Media type, resolution, etc. v i d e o - An HTML5 DOM element capable of playing live feed v a r c o n s t r a i n t s = { v i d e o : t r u e , a u d i o : t r u e } ; n a v i g a t o r . g e t U s e r M e d i a ( c o n s t r a i n t s , s u c c e s s C a l l b a c k , e r r o r C a l l b a c k ) ; f u n c t i o n s u c c e s s C a l l b a c k ( s t r e a m ) { v a r v i d e o = d o c u m e n t . q u e r y S e l e c t o r ( " v i d e o " ) ; v i d e o . s r c = w i n d o w . U R L . c r e a t e O b j e c t U R L ( s t r e a m ) ; } f u n c t i o n e r r o r C a l l b a c k ( e r r o r ) { a l e r t ( " E r r o r : " , e r r o r ) ; }
9. Communicating Streams R T C P e e r c o n n e c t i o n I c e C a n d i d a t e - ICE - f/w to allow peers to communicate behind Firewalls, explained later. R T C S e s s i o n D e s c r i p t i o n - Description of multimedia content, following SDP, explained later. v a r p e e r C o n = n e w w i n d o w . R T C P e e r C o n n e c t i o n ( c o n f i g u r a t i o n ) ; p e e r C o n . a d d S t r e a m ( l o c a l S t r e a m ) ; / / g o t f r o m g e t U s e r M e d i a p e e r C o n . o n a d d s t r e a m = f u n c t i o n ( e ) { . . . p e e r C o n . a d d I c e C a n d i d a t e ( c a n d i d a t e ) ; p e e r C o n . o n i c e c a n d i d a t e = f u n c t i o n ( e ) { . . . p e e r C o n . s e t L o c a l D e s c r i p t i o n ( d e s c r i p t i o n ) ; p e e r C o n . s e t R e m o t e D e s c r i p t i o n ( n e w R T C S e s s i o n D e s c r i p t i o n ( m s g . d a t a ) ) ; p e e r C o n . c r e a t e O f f e r ( I c e C a n d i d a t e ) p e e r C o n . c r e a t e A n s w e r ( . . . )
10. Communicating Data R T C D a t a C h a n n e l R t p D a t a C h a n n e l s : t r u e - To enable arbitrary data via the same RTCPeerConnection. o n m e s s a g e , etc. - Same API as WebSockets. v a r p e e r C o n = n e w w i n d o w . R T C P e e r C o n n e c t i o n ( s e r v e r s , { o p t i o n a l : [ { R t p D a t a C h a n n e l s : t r u e } ] } ) ; p e e r C o n . o n d a t a c h a n n e l = f u n c t i o n ( e v e n t ) { r e c e i v e r C h a n n e l = e v e n t . c h a n n e l ; r e c e i v e r C h a n n e l . o n m e s s a g e = f u n c t i o n ( e v e n t ) { r e c e i v e D O M E l e m e n t . i n n e r H T M L = e v e n t . d a t a ; } ; } ; X m i t t e r C h a n n e l = p c . c r e a t e D a t a C h a n n e l ( " s e n d D a t a C h a n n e l " , { r e l i a b l e : f a l s e } ) ; X m i t t e r C h a n n e l . s e n d ( ' H e l l o W e b R T C ' ) ;
11. WebRTC & the Web Architecture
12. I don't want to see that image again!
13. WebRTC: No Firewalls STUN and TURN not needed Courtesy : WebRTC - Google IO; and Self Modified
14. WebRTC: Behind NAT Firewall Solution 1: Use STUN Courtesy : WebRTC - Google IO
15. WebRTC: STUN Fails Solution 2: Use TURN Courtesy : WebRTC - Google IO
16. What is STUN, TURN, SDP and ICE? You tell me! You tell me right now!!
17. WebRTC: Stuff Terminologies N A T - Network Address Translation Is used to give the client a public address behind firewall. I C E - Interactive Connectivity Establishment Is a framework to allow your web browser to connect with peers behind NAT. How? Speaking... S T U N - Session Traversal Utilities for NAT Protocol for Client Discovery. T U R N - Traversal Using Relays around NAT ICE opens a connection with a TURN server and relays all information through that. S i g n a l C h a n n e l / S i g n a l i n g - Usually a PUSH enabled communication channel Required for exchanging Network info., Call Offer, Call Answer and SDP. S D P - Session Description Protocol Standard for describing the multimedia content of the connection such as resolution, formats, codecs, encryption, etc. and the connection itself.
18. WebRTC: Stuff Over the Internet - JSFoo Demo Application in Chrome - the HTML5 pillar using WebRTC - by Ericsson R&D labs - by Ericsson R&D labs ICE Breaker WebRTC landing page WebRTC roadmap Mozilla NVIDIA Tegra High def conferencing World's first WebRTC enabled mobile browser 3D communication in browser
19. ICE Breaker
20. Cool Extras - Send files Directly, P2P - Detecting who is speaking in a Conference - Pure JavaScript and HTML5 J a v a S c r i p t + H T M L 5 = Awesomeness ASCII Camera Audio Recorder ShareFest Who's Talking GIF image from Video
21. Thank You Om Shankar @om_invincible invincible.om@gmail github.com/OmShiv geekyogi.tumblr.com